@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/src/form/__tests__/__snapshots__/TextField.tsx.snap

@@ -6,7 +6,7 @@ exports[`TextField should allow for addons before and after the input 1`] = `
   data-testid="container"
 >
   <span
-    class="rmd-text-field-addon rmd-text-field-addon--before rmd-text-field-addon--presentational"
+    class="rmd-text-field-addon rmd-text-field-addon--before rmd-text-field-addon--presentational rmd-box rmd-box--wrap"
   >
     <span
       aria-hidden="true"
@@ -29,7 +29,7 @@ exports[`TextField should allow for addons before and after the input 1`] = `
     Field
   </label>
   <span
-    class="rmd-text-field-addon rmd-text-field-addon--after rmd-text-field-addon--presentational"
+    class="rmd-text-field-addon rmd-text-field-addon--after rmd-text-field-addon--presentational rmd-box rmd-box--wrap"
   >
     <span
       aria-hidden="true"

package/src/form/__tests__/useFormReset.tsx

@@ -1,8 +1,7 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { useRef, useState, type ReactElement } from "react";
-import { act } from "react-dom/test-utils";
 import { Button } from "../../button/Button.js";
-import { rmdRender, screen, userEvent } from "../../test-utils/index.js";
+import { act, rmdRender, screen, userEvent } from "../../test-utils/index.js";
 import { useFormReset } from "../useFormReset.js";
 
 interface TestImplementationProps {

package/src/form/_form.scss

@@ -3,6 +3,7 @@
 @use "sass:color";
 @use "../utils";
 @use "../box-shadows";
+@use "../box/box";
 @use "../button/button";
 @use "../progress/progress";
 @use "../theme/colors";
@@ -106,7 +107,6 @@ $text-field-height: 3rem !default;
 $text-field-dense-height: 2.5rem !default;
 $text-field-label-height: 3.5rem !default;
 $text-field-label-dense-height: 3.25rem !default;
-$text-field-spacing: icon.$spacing !default;
 $text-field-border-radius: 0.25rem !default;
 $text-field-border-width: 1px !default;
 $text-field-border-width-active: 2px !default;
@@ -122,7 +122,9 @@ $text-field-underlined-label-padding-top: 1.5rem !default;
 $text-field-underlined-label-left-offset: icon.$spacing !default;
 $text-field-color-min-width: 5rem !default;
 
+$text-field-addon-gap: 0.25rem !default;
 $text-field-addon-margin: icon.$spacing !default;
+$text-field-addon-spacing: icon.get-var(spacing) !default;
 
 $text-field-light-border-color: rgba(#000, 0.12) !default;
 $text-field-dark-border-color: rgba(#fff, 0.5) !default;
@@ -270,6 +272,7 @@ $variables: (
   active-color,
   focus-color,
   addon-top,
+  addon-spacing,
   addon-margin-top,
   addon-left-offset,
   label-floating-top,
@@ -284,6 +287,9 @@ $variables: (
   text-field-border-color,
   text-field-hover-border-color,
   text-field-filled-color,
+  text-field-filled-padding,
+  text-field-outlined-padding,
+  text-field-underlined-padding,
   textarea-height,
   textarea-padding,
   switch-track-background-color,
@@ -459,30 +465,24 @@ $variables: (
       margin: $message-margin-top 0 $message-margin-bottom;
       min-height: $message-min-height;
 
-      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+      @if not $disable-text-field-filled-theme {
         &--filled {
-          padding-left: $text-field-filled-padding;
-          padding-right: $text-field-filled-padding;
+          @include use-var(padding-left, text-field-filled-padding);
+          @include use-var(padding-right, text-field-filled-padding);
         }
       }
 
-      @if not
-        $disable-text-field-outlined-theme and
-        $text-field-outlined-padding
-      {
+      @if not $disable-text-field-outlined-theme {
         &--outline {
-          padding-left: $text-field-outlined-padding;
-          padding-right: $text-field-outlined-padding;
+          @include use-var(padding-left, text-field-outlined-padding);
+          @include use-var(padding-right, text-field-outlined-padding);
         }
       }
 
-      @if not
-        $disable-text-field-underlined-theme and
-        $text-field-underlined-padding
-      {
+      @if not $disable-text-field-underlined-theme {
         &--underline {
-          padding-left: $text-field-underlined-padding;
-          padding-right: $text-field-underlined-padding;
+          @include use-var(padding-left, text-field-underlined-padding);
+          @include use-var(padding-right, text-field-underlined-padding);
         }
       }
 
@@ -678,19 +678,25 @@ $variables: (
         &--outline {
           @include set-var(
             text-field-padding-left,
-            $text-field-outlined-padding
+            get-var(text-field-outlined-padding)
           );
           @include set-var(
             text-field-padding-right,
-            $text-field-outlined-padding
+            get-var(text-field-outlined-padding)
           );
           @include use-var(border-color, text-field-border-color);
           @if not $disable-text-field-addon {
-            @include set-var(addon-left-offset, $text-field-outlined-padding);
+            @include set-var(
+              addon-left-offset,
+              get-var(text-field-outlined-padding)
+            );
           }
 
           @if not $disable-floating-label {
-            @include set-var(label-left-offset, $text-field-outlined-padding);
+            @include set-var(
+              label-left-offset,
+              get-var(text-field-outlined-padding)
+            );
             @include set-var(label-top-offset, -50%);
             @include set-var(label-active-padding, 0 $label-floating-padding);
             @include set-var(
@@ -721,20 +727,24 @@ $variables: (
           opacity: 1;
         }
 
-        &--outline-left {
-          $distance: calc(
-            #{icon.get-var(size)} +
-              #{$text-field-outlined-padding +
-              $text-field-spacing}
-          );
+        @if not $disable-text-field-addon {
+          &--outline-left {
+            $distance: calc(
+              icon.get-var(size) +
+                get-var(text-field-outlined-padding) +
+                get-var(addon-spacing)
+            );
 
-          @include set-var(text-field-padding-left, $distance);
-        }
+            @include set-var(text-field-padding-left, $distance);
+          }
 
-        &--outline-right {
-          $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});
+          &--outline-right {
+            $distance: calc(
+              icon.get-var(size) + calc(get-var(addon-spacing) * 2)
+            );
 
-          @include set-var(text-field-padding-right, $distance);
+            @include set-var(text-field-padding-right, $distance);
+          }
         }
       }
 
@@ -1095,25 +1105,22 @@ $variables: (
 
       @if not $disable-text-field-outlined-theme {
         &--outline {
+          @include use-var(padding-right, text-field-outlined-padding);
           @include utils.rtl {
+            @include use-var(padding-left, text-field-outlined-padding);
             @include use-var(padding-right, text-field-padding-left);
-
-            padding-left: $text-field-outlined-padding;
           }
-
-          padding-right: $text-field-outlined-padding;
         }
       }
 
       @if not $disable-text-field-filled-theme {
         &--filled {
+          @include use-var(padding-right, text-field-filled-padding);
           @include utils.rtl {
             @include use-var(padding-right, text-field-padding-left);
 
-            padding-left: $text-field-filled-padding;
+            @include use-var(padding-left, text-field-filled-padding);
           }
-
-          padding-right: $text-field-filled-padding;
         }
       }
     }
@@ -1191,6 +1198,9 @@ $variables: (
 @mixin text-field-addon-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-text-field-addon {
+      @if $text-field-addon-gap {
+        @include box.set-var(gap, $text-field-addon-gap);
+      }
       @if not
         $disable-text-field-filled-theme or not
         $disable-text-field-underlined-theme
@@ -1201,7 +1211,6 @@ $variables: (
       // this makes it so that this container element is the same size as the
       // child (normally icons). without this, icons would have a height of 30.5px
       // and no longer be centered
-      display: inline-flex;
       position: absolute;
 
       // Note: Can't use `:first-child` and `:last-child` since
@@ -1213,7 +1222,7 @@ $variables: (
       }
 
       &--after {
-        @include utils.auto-rtl(right, $text-field-spacing);
+        @include utils.auto-rtl(right, get-var(addon-spacing));
       }
 
       &--presentational {
@@ -1977,6 +1986,37 @@ $variables: (
       @include set-var(label-active-background-color, transparent);
     }
 
+    @if not
+      $disable-text-field or not
+      $disable-textarea or not
+      $disable-select or not
+      $disable-native-select
+    {
+      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+        @include set-var(text-field-filled-padding, $text-field-filled-padding);
+      }
+
+      @if not
+        $disable-text-field-outlined-theme and
+        $text-field-outlined-padding
+      {
+        @include set-var(
+          text-field-outlined-padding,
+          $text-field-outlined-padding
+        );
+      }
+
+      @if not
+        $disable-text-field-underlined-theme and
+        $text-field-underlined-padding
+      {
+        @include set-var(
+          text-field-underlined-padding,
+          $text-field-underlined-padding
+        );
+      }
+    }
+
     @if not $disable-text-field {
       @include set-var(text-field-height, $text-field-height);
       @include set-var(text-field-padding-left, 0px);
@@ -2003,6 +2043,7 @@ $variables: (
       @include set-var(addon-top, auto);
       @include set-var(addon-margin-top, 0px);
       @include set-var(addon-left-offset, 0px);
+      @include set-var(addon-spacing, $text-field-addon-spacing);
     }
 
     @if not $disable-switch {

package/src/form/fileUtils.ts

@@ -1,7 +1,7 @@
 import { nanoid } from "nanoid";
 import { type ChangeEventHandler, type DragEventHandler } from "react";
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface BaseFileUploadStats {
   /**
    * A unique key associated with each upload generated by `nanoid`.
@@ -19,15 +19,15 @@ export interface BaseFileUploadStats {
   progress: number;
 }
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface ProcessingFileUploadStats extends BaseFileUploadStats {
   status: "pending" | "uploading";
 }
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export type FileReaderResult = FileReader["result"];
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface CompletedFileUploadStats extends BaseFileUploadStats {
   status: "complete";
 
@@ -44,15 +44,15 @@ export interface CompletedFileUploadStats extends BaseFileUploadStats {
   result: FileReaderResult;
 }
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export type FileUploadStats =
   | ProcessingFileUploadStats
   | CompletedFileUploadStats;
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export type FileUploadStatus = FileUploadStats["status"];
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface FileUploadHandlers<E extends HTMLElement> {
   onDrop?: DragEventHandler<E>;
   onChange?: ChangeEventHandler<HTMLInputElement>;
@@ -63,7 +63,7 @@ export interface FileUploadHandlers<E extends HTMLElement> {
  * from a shared directory that they do not have access to. This error will not
  * occur much.
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export class FileAccessError extends Error {
   /**
@@ -85,7 +85,7 @@ export class FileAccessError extends Error {
 /**
  * An error that just requires a `File` to be passed as the first argument.
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export class GenericFileError extends Error {
   /**
@@ -112,7 +112,7 @@ export class GenericFileError extends Error {
  * An error that is created during the upload process if the number of files
  * exceeds the {@link FileUploadOptions.maxFiles} amount.
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export class TooManyFilesError extends GenericFileError {
   /**
@@ -137,7 +137,7 @@ export class TooManyFilesError extends GenericFileError {
  * - greater than the {@link FileValidationOptions.maxFileSize}
  * - including the file would be greater than the {@link FileValidationOptions.totalFileSize}
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export class FileSizeError extends GenericFileError {
   /**
@@ -160,7 +160,7 @@ export class FileSizeError extends GenericFileError {
  * An error that will be created if a user tries to upload a file that does not
  * end with one of the {@link FileValidationOptions.extensions}.
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export class FileExtensionError extends GenericFileError {
   /**
@@ -180,7 +180,7 @@ export class FileExtensionError extends GenericFileError {
 /**
  * Mostly an internal type that is used to allow custom validation errors
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export type FileValidationError<E = GenericFileError> =
   | FileAccessError
@@ -270,7 +270,7 @@ export function isFileExtensionError<CustomError extends {}>(
  * `extensions` list had at least one value.
  * @param extensions - The list of extensions allowed
  * @returns true if the file has a valid name.
- * @remarks \@since 3.1.0
+ * @since 3.1.0
  */
 export type IsValidFileName = (
   file: File,
@@ -281,12 +281,12 @@ export type IsValidFileName = (
 /**
  *
  * @defaultValue `matcher?.test(file.name) ?? true`
- * @remarks \@since 3.1.0
+ * @since 3.1.0
  */
 export const isValidFileName: IsValidFileName = (file, matcher) =>
   matcher?.test(file.name) ?? true;
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface FileValidationOptions {
   /**
    * If the number of files should be limited, set this value to a number
@@ -321,8 +321,7 @@ export interface FileValidationOptions {
    *
    * Note: The extensions and file names will be compared ignoring case.
    *
-   * @example
-   * Only Allow Images
+   * @example Only Allow Images
    * ```ts
    * const extensions = ["png", "jpeg", "jpg", "gif"];
    * ```
@@ -341,7 +340,7 @@ export interface FileValidationOptions {
   totalFileSize?: number;
 }
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface FilesValidationOptions
   extends Required<FileValidationOptions> {
   /**
@@ -360,7 +359,7 @@ export interface FilesValidationOptions
   totalFiles: number;
 }
 
-/** @remarks \@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
@@ -382,8 +381,7 @@ export interface ValidatedFilesResult<CustomError> {
  * This function will be called whenever a file has been uploaded by the user
  * either through an `<input type="file">` or drag and drop behavior.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```ts
  * const validateFiles: FilesValidator = (files, options) => {
  *   const invalid: File[] = [];
@@ -410,7 +408,7 @@ export interface ValidatedFilesResult<CustomError> {
  * @param options - The {@link FilesValidationOptions}
  * @returns the {@link ValidatedFilesResult}
  * @see {@link validateFiles} for the default implementation
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export type FilesValidator<CustomError = never> = (
   files: readonly File[],
@@ -426,7 +424,7 @@ export type FilesValidator<CustomError = never> = (
  * @param files - The list of files to check
  * @param options - The {@link FilesValidationOptions}
  * @returns the {@link ValidatedFilesResult}
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function validateFiles<CustomError>(
   files: readonly File[],
@@ -523,7 +521,7 @@ export function validateFiles<CustomError>(
  *
  * @param file - The file to check
  * @returns `true` if the file should be considered as a text-content file.
- * @remarks \@since 2.9.0
+ * @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);
@@ -539,7 +537,7 @@ export function isTextFile(file: File): boolean {
  *
  * @param file - The file to check
  * @returns `true` if the file should be considered as a text content file.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function isImageFile(file: File): boolean {
   return /\.(a?png|avif|svg|tiff|gifv?|jpe?g)/i.test(file.name);
@@ -555,7 +553,7 @@ export function isImageFile(file: File): boolean {
  *
  * @param file - The file to check
  * @returns `true` if the file should be considered as a audio content file.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function isAudioFile(file: File): boolean {
   return /\.(mp3|wav|ogg|m4p|flac)$/i.test(file.name);
@@ -571,7 +569,7 @@ export function isAudioFile(file: File): boolean {
  *
  * @param file - The file to check
  * @returns `true` if the file should be considered as a video content file.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function isVideoFile(file: File): boolean {
   return /\.(mkv|mpe?g|mov|avi|flv|webm|mp4)$/i.test(file.name);
@@ -583,7 +581,7 @@ export function isVideoFile(file: File): boolean {
  *
  * @param file - The file to check
  * @returns `true` if the file matches an image, audio, or video file.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function isMediaFile(file: File): boolean {
   return isImageFile(file) || isAudioFile(file) || isVideoFile(file);
@@ -596,7 +594,7 @@ export function isMediaFile(file: File): boolean {
  * Note: If this file does not need to be previewed in the browser and will
  * immediately be uploaded to a server, use `readAsArrayBuffer`.
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export type FileReaderParser =
   | "readAsText"
@@ -608,8 +606,7 @@ export type FileReaderParser =
  * 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
+ * @example The Default File Upload Parser
  * ```ts
  * export const getFileParser: GetFileParser = (file) => {
  *   if (isMediaFile(file)) {
@@ -626,7 +623,7 @@ export type FileReaderParser =
  *
  * @param file - The file to get a parser for
  * @returns the {@link FileReaderParser} string.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export type GetFileParser = (file: File) => FileReaderParser;
 
@@ -638,7 +635,7 @@ export type GetFileParser = (file: File) => FileReaderParser;
  * - everything else as an `ArrayBuffer` which can be manually converted into a
  *   data url if needed with `URL.createObjectURL`
  *
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export const getFileParser: GetFileParser = (file) => {
   if (isMediaFile(file)) {
@@ -652,7 +649,7 @@ export const getFileParser: GetFileParser = (file) => {
   return "readAsArrayBuffer";
 };
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface SplitFileUploads {
   readonly pending: readonly ProcessingFileUploadStats[];
   readonly uploading: readonly ProcessingFileUploadStats[];
@@ -665,7 +662,7 @@ export interface SplitFileUploads {
  * @param stats - The {@link FileUploadStats} list generally returned by the
  * {@link useFileUpload} hook.
  * @returns the {@link SplitFileUploads}.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function getSplitFileUploads(
   stats: readonly FileUploadStats[]

package/src/form/formConfig.ts

@@ -1,7 +1,7 @@
 import { type FormConfiguration } from "./types.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const FORM_CONFIG: FormConfiguration = {
   theme: "outline",
@@ -10,7 +10,7 @@ export const FORM_CONFIG: FormConfiguration = {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function getFormConfig<N extends keyof FormConfiguration>(
   name: N,

package/src/form/formMessageStyles.ts

@@ -6,7 +6,7 @@ import { type FormMessageClassNameOptions } from "./types.js";
 const styles = bem("rmd-form-message");
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function formMessage(options: FormMessageClassNameOptions = {}): string {
   const { className, error = false, theme = "none" } = options;
@@ -18,13 +18,13 @@ export function formMessage(options: FormMessageClassNameOptions = {}): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface FormMessageTextClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function formMessageText(
   options: FormMessageTextClassNameOptions = {}
@@ -34,13 +34,13 @@ export function formMessageText(
   return cnb(styles("message"), className);
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface FormMessageCounterClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function formMessageCounter(
   options: FormMessageCounterClassNameOptions = {}

package/src/form/inputToggleStyles.ts

@@ -16,11 +16,11 @@ const styles = bem("rmd-input-toggle");
  * When this is set to `"auto"`, the size will be determined by the current
  * `font-size` of the `Label` element.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type InputToggleSize = "auto" | "small" | "dense" | "normal" | "large";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface InputToggleClassNameOptions
   extends Omit<FormComponentStates, "readOnly"> {
   className?: string;
@@ -43,7 +43,7 @@ export interface InputToggleClassNameOptions
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function inputToggle(options: InputToggleClassNameOptions): string {
   const {