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

package/src/hoverMode/useHoverModeProvider.ts

@@ -6,11 +6,10 @@ const noop = (): void => {
   // do nothing
 };
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SimpleHoverModeContext {
   /**
-   * @example
-   * Main Usage
+   * @example Main Usage
    * ```ts
    * onMouseEnter(event) {
    *   const hoverTimeout = hoverTimeoutRef.current;
@@ -31,8 +30,7 @@ export interface SimpleHoverModeContext {
   hoverTimeoutRef: NonNullRef<number | undefined>;
 
   /**
-   * @example
-   * Main Usage
+   * @example Main Usage
    * ```ts
    * onMouseLeave() {
    *   if (mode === "touch") {
@@ -75,9 +73,8 @@ export interface SimpleHoverModeContext {
 }
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Uses refs to increase performance by preventing unneeded
+ * @since 2.8.0
+ * @since 6.0.0 Uses refs to increase performance by preventing unneeded
  * re-renders of the entire hover mode provider's component tree. The API also
  * changed to support custom hover mode providers.
  */
@@ -108,7 +105,7 @@ export interface HoverModeContext extends SimpleHoverModeContext {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface CreateHoverModeContextOptions {
   /**
@@ -132,14 +129,14 @@ export interface CreateHoverModeContextOptions {
    * visibility to `false`.
    *
    * @defaultValue `0`
-   * @remarks \@since 6.0.0 This was renamed from `exitVisibilityDelay` and the
+   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the
    * default value changed from `300` to `0`.
    */
   leaveTimeout?: number;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function createHoverModeContext(
   options: CreateHoverModeContextOptions = {}
@@ -159,7 +156,7 @@ export function createHoverModeContext(
   };
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface HoverModeConfiguration extends CreateHoverModeContextOptions {
   /**
    * The amount of time to wait before disabling the hover mode behavior if none
@@ -178,8 +175,7 @@ export interface HoverModeConfiguration extends CreateHoverModeContextOptions {
 }
 
 /**
- * @example
- * Creating a Hover Mode Group
+ * @example Creating a Hover Mode Group
  * ```tsx
  * import type {
  *   HoverModeConfiguration,
@@ -224,7 +220,7 @@ export interface HoverModeConfiguration extends CreateHoverModeContextOptions {
  *
  * @see {@link CreateHoverModeContextOptions}
  * @see {@link useHoverMode}
- * @remarks \@since 6.0.0 The `HoverModeProvider` component was replaced by this
+ * @since 6.0.0 The `HoverModeProvider` component was replaced by this
  * hook implementation. After developing the `MenuBar`, I realized the hover
  * mode should normally be grouped by related components or types instead of a
  * top-level catch all.

package/src/icon/FontIcon.tsx

@@ -22,7 +22,7 @@ export interface FontIconProps
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
 export const FontIcon = forwardRef<HTMLElement, FontIconProps>(

package/src/icon/IconRotator.tsx

@@ -11,7 +11,7 @@ import {
 import { iconRotator, type IconRotatorClassNameOptions } from "./styles.js";
 
 /**
- * @remarks \@since 6.0.0 Removed `animate` prop and added `disableTransition`
+ * @since 6.0.0 Removed `animate` prop and added `disableTransition`
  */
 export interface IconRotatorBaseProps
   extends HTMLAttributes<HTMLSpanElement>,

package/src/icon/MaterialIcon.tsx

@@ -3,7 +3,7 @@ import { type MaterialIconName } from "./material.js";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface MaterialIconProps
   extends HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
@@ -16,7 +16,7 @@ export interface MaterialIconProps
 /**
  * **Server Component**
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
   function MaterialIcon(props, ref) {

package/src/icon/MaterialSymbol.tsx

@@ -20,7 +20,7 @@ declare module "react" {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaterialSymbolProps
   extends HTMLAttributes<HTMLSpanElement>,
@@ -41,8 +41,7 @@ export interface MaterialSymbolProps
  * there are so many icons available. If it becomes an issue, just stop using
  * this component and define the icons inline instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { MaterialSymbol } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -64,7 +63,7 @@ export interface MaterialSymbolProps
  * root.render(<App />);
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(
   function MaterialSymbol(props, ref) {

package/src/icon/SVGIcon.tsx

@@ -56,7 +56,6 @@ export interface SVGIconProps
    * This prop **should not** be used with the `children` prop as only one will
    * be rendered.
    *
-   * @remarks
    *
    * NOTE: IE **does not support** external SVGs. Please see the demo for more
    * details.

package/src/icon/TextIconSpacing.tsx

@@ -97,7 +97,7 @@ export interface TextIconSpacingProps {
    * Boolean if the icon and content are in a `column-reverse` or `row-reverse`
    * `flex-direction`. This will swap the different classnames as needed.
    *
-   * @remarks \@since 2.5.0
+   * @since 2.5.0
    * @defaultValue `false`
    */
   flexReverse?: boolean;
@@ -109,8 +109,7 @@ export interface TextIconSpacingProps {
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { TextIconSpacing, FontIcon } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -124,8 +123,7 @@ export interface TextIconSpacingProps {
  * }
  * ```
  *
- * @example
- * Stacked Example
+ * @example Stacked Example
  * ```tsx
  * import { TextIconSpacing, FontIcon } from "@react-md/core";
  * import type { ReactElement } from "react";

package/src/icon/iconConfig.tsx

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import { FontIcon } from "./FontIcon.js";
 
 /**
- * @remarks \@since 5.0.0 The `download` icon has been renamed to `upload`.
+ * @since 5.0.0 The `download` icon has been renamed to `upload`.
  */
 export interface ConfigurableIcons {
   /**
@@ -12,10 +12,18 @@ export interface ConfigurableIcons {
    */
   back?: ReactNode;
 
+  /**
+   * The icon to use when clearing content from a text field.
+   *
+   * @defaultValue `<FontIcon>clear</FontIcon>`
+   * @since 6.0.0
+   */
+  clear?: ReactNode;
+
   /**
    * @defaultValue `<FontIcon>close</FontIcon>`
    *
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   close?: ReactNode;
 
@@ -23,7 +31,7 @@ export interface ConfigurableIcons {
    * The icon to use for unchecked checkboxes.
    *
    * @defaultValue `<FontIcon>check_box_outline_blank</FontIcon>`
-   * @remarks \@since 6.0.0 This icon now represents the unchecked state for
+   * @since 6.0.0 This icon now represents the unchecked state for
    * checkboxes.
    */
   checkbox?: ReactNode;
@@ -32,7 +40,7 @@ export interface ConfigurableIcons {
    * The icon to use for checked checkboxes.
    *
    * @defaultValue `<FontIcon>check_box</FontIcon>`
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   checkboxChecked?: ReactNode;
 
@@ -40,7 +48,7 @@ export interface ConfigurableIcons {
    * The icon to use for indeterminate checkboxes.
    *
    * @defaultValue `<FontIcon>indeterminate_check_box</FontIcon>`
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   checkboxIndeterminate?: ReactNode;
 
@@ -55,7 +63,7 @@ export interface ConfigurableIcons {
   /**
    * The icon to use when there are form errors.
    *
-   * @remarks \@since 2.5.0
+   * @since 2.5.0
    * @defaultValue `<FontIcon>error_outline</FontIcon>`
    */
   error?: ReactNode;
@@ -102,7 +110,7 @@ export interface ConfigurableIcons {
    * The icon to use for unchecked radio buttons.
    *
    * @defaultValue `<FontIcon>radio_button_unchecked</FontIcon>`
-   * @remarks \@since 6.0.0 This icon now represents the unchecked state for
+   * @since 6.0.0 This icon now represents the unchecked state for
    * radios.
    */
   radio?: ReactNode;
@@ -134,7 +142,7 @@ export interface ConfigurableIcons {
    * The icon to use for the `FileInput` component (normally file
    * uploads).
    *
-   * @remarks \@since 5.0.0
+   * @since 5.0.0
    * @defaultValue `<FontIcon>file_upload</FontIcon>`
    */
   upload?: ReactNode;
@@ -143,7 +151,7 @@ export interface ConfigurableIcons {
 export type ConfiguredIcons = Required<ConfigurableIcons>;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ConfigurableIconName = keyof ConfigurableIcons;
 
@@ -155,8 +163,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * @see {@link configureIcons} for a quick way of overriding the configuration
  * or the example below.
  *
- * @example
- * Mutating this object
+ * @example Mutating this object
  * ```tsx
  * import { ICON_CONFIG } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
@@ -197,10 +204,11 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ```
  *
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const ICON_CONFIG: ConfiguredIcons = {
   back: <FontIcon>keyboard_arrow_left</FontIcon>,
+  clear: <FontIcon>clear</FontIcon>,
   close: <FontIcon>close</FontIcon>,
   checkbox: <FontIcon>check_box_outline_blank</FontIcon>,
   checkboxChecked: <FontIcon>check_box</FontIcon>,
@@ -222,8 +230,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
 /**
  * A convenience helper to reconfigure icons within `react-md`.
  *
- * @example
- * Using SVG Material Icons
+ * @example Using SVG Material Icons
  * ```tsx
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
@@ -265,7 +272,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  * });
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function configureIcons(overrides: ConfiguredIcons): void {
   Object.entries(overrides).forEach(([name, value]) => {
@@ -282,7 +289,7 @@ export function configureIcons(overrides: ConfiguredIcons): void {
  * a custom prop to override this behavior. The main benefit of this function is
  * that icons can be removed if the override is set to `null`.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function getIcon(
   name: ConfigurableIconName,

package/src/icon/material.ts

@@ -1,6 +1,6 @@
 // THIS FILE WAS GENERATED BY A SCRIPT AND SHOULD NOT BE UPDATED MANUALLY
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type MaterialIconFamily =
   | "outlined"
   | "rounded"
@@ -8,7 +8,7 @@ export type MaterialIconFamily =
   | "filled"
   | "two-tone";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type MaterialIconName =
   | "10k"
   | "10mp"
@@ -2210,10 +2210,10 @@ export type MaterialIconName =
   | "zoom_out"
   | "zoom_out_map";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type MaterialSymbolFamily = "outlined" | "rounded" | "sharp";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type MaterialSymbolName =
   | "10k"
   | "10mp"

package/src/icon/materialConfig.ts

@@ -5,7 +5,7 @@ import {
 } from "./material.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaterialIconCustomization {
   /**
@@ -15,7 +15,7 @@ export interface MaterialIconCustomization {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MaterialIconConfiguration = Required<MaterialIconCustomization>;
 
@@ -27,7 +27,7 @@ export type MaterialIconConfiguration = Required<MaterialIconCustomization>;
  * interaction. The values are 0 for default or 1 for completely filled. Along
  * with the weight axis, the fill also impacts the look of the icon.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MaterialSymbolFill = 0 | 1;
 
@@ -36,7 +36,7 @@ export type MaterialSymbolFill = 0 | 1;
  * thin (100) and bold (700). Weight can also affect the overall size of the
  * symbol.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;
 
@@ -57,7 +57,7 @@ export type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;
  * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the
  *   positive grade.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MaterialSymbolGrade = -25 | 0 | 200;
 
@@ -69,7 +69,7 @@ export type MaterialSymbolGrade = -25 | 0 | 200;
  * automatically adjust the stroke weight when you increase or decrease the
  * symbol size.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;
 
@@ -79,7 +79,7 @@ export type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;
  * info icon next to each property.
  *
  * @see https://fonts.google.com/icons?icon.set=Material+Symbols
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaterialSymbolCustomization {
   /**
@@ -143,19 +143,19 @@ export interface MaterialSymbolCustomization {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaterialConfiguration
   extends MaterialIconConfiguration,
     MaterialSymbolConfiguration {}
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const MATERIAL_CONFIG: MaterialConfiguration = {
   fill: 0,
@@ -167,7 +167,7 @@ export const MATERIAL_CONFIG: MaterialConfiguration = {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaterialSymbolFontVariationSettings {
   style?: CSSProperties;
@@ -175,7 +175,7 @@ export interface MaterialSymbolFontVariationSettings {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export function getFontVariationSettings(

package/src/icon/styles.ts

@@ -16,7 +16,7 @@ declare module "react" {
 const styles = bem("rmd-icon");
 const rotatorStyles = bem("rmd-icon-rotator");
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SVGIconClassNameOptions {
   className?: string;
 
@@ -60,7 +60,7 @@ export interface SVGIconClassNameOptions {
   inline?: boolean;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface FontIconClassNameOptions extends SVGIconClassNameOptions {
   /**
    * The font icon class name to use.
@@ -70,18 +70,18 @@ export interface FontIconClassNameOptions extends SVGIconClassNameOptions {
   iconClassName?: string;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {
   family: MaterialIconFamily;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface MaterialSymbolClassNameOptions
   extends SVGIconClassNameOptions {
   family: MaterialSymbolFamily;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type IconClassNameOptions =
   | ({ type: "font" } & FontIconClassNameOptions)
   | ({ type: "svg" } & SVGIconClassNameOptions)
@@ -90,7 +90,7 @@ export type IconClassNameOptions =
 
 /**
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function icon(options: IconClassNameOptions): string {
   const {
@@ -133,7 +133,7 @@ export function icon(options: IconClassNameOptions): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface IconRotatorClassNameOptions {
   className?: string;
 
@@ -152,7 +152,7 @@ export interface IconRotatorClassNameOptions {
 
 /**
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function iconRotator(options: IconRotatorClassNameOptions): string {
   const { className, rotated, disableTransition = false } = options;

package/src/interaction/UserInteractionModeProvider.tsx

@@ -61,8 +61,7 @@ export interface UserInteractionModeProviderProps {
  * - only display `:focus` outlines while in `"keyboard-mode"`
  * - do not display `:hover` effects while in `"touch-mode"`
  *
- * @example
- * Mount at the root of your app
+ * @example Mount at the root of your app
  * ```tsx
  * import { createRoot } from "react-dom/client";
  * import { UserInteractionModeProvider } from "@react-md/core";

package/src/interaction/config.ts

@@ -1,7 +1,7 @@
 import { type ElementInteractionMode } from "./types.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ElementInteractionConfiguration {
   mode: ElementInteractionMode;
@@ -14,7 +14,7 @@ let mode: ElementInteractionMode = "ripple";
 let higherContrast = true;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const INTERACTION_CONFIG: ElementInteractionConfiguration = {
   get mode() {

package/src/interaction/types.ts

@@ -41,11 +41,11 @@ declare module "react" {
  * Note: this should match the `$interaction-mode` SCSS variable.
  *
  * @defaultValue `"ripple"`
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ElementInteractionMode = "ripple" | "press" | "none";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ElementInteractionHandlers<E extends HTMLElement> {
   onBlur: FocusEventHandler<E>;
 
@@ -124,7 +124,7 @@ export interface ElementInteractionHandlers<E extends HTMLElement> {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface RippleStyle {
@@ -135,7 +135,7 @@ export interface RippleStyle {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface RippleState {
@@ -146,13 +146,13 @@ export interface RippleState {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export type RippleStateList = readonly RippleState[];
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface RippleTransitionCallbacks {
@@ -161,7 +161,7 @@ export interface RippleTransitionCallbacks {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface ProvidedRippleContainerProps
@@ -170,7 +170,7 @@ export interface ProvidedRippleContainerProps
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface ElementInteractionState {

package/src/interaction/useElementInteraction.tsx

@@ -25,10 +25,10 @@ declare module "react" {
   }
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export const PRESSED_CLASS_NAME = "rmd-pressed";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ElementInteractionOptions<E extends HTMLElement>
   extends Partial<ElementInteractionHandlers<E>> {
   /**
@@ -40,7 +40,7 @@ export interface ElementInteractionOptions<E extends HTMLElement>
   disabled?: boolean;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
   /**
    * The event handlers required for element interaction.
@@ -61,7 +61,7 @@ export interface ElementInteractionHookReturnValue<E extends HTMLElement> {
   pressedClassName: string | undefined;
 
   /**
-   * The ripple click/touch interaction. This will be `undefined` when the {@Link ElementInteractionMode}
+   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}
    * is set to `"none"` or `"press"`.
    */
   ripples?: ReactElement;
@@ -80,8 +80,7 @@ const noop = (): void => {
  * This hook is used to apply the required element interaction based on the
  * {@link ElementInteractionMode} and should generally be used internally only.
  *
- * @example
- * Providing Element Interaction
+ * @example Providing Element Interaction
  * ```tsx
  * import { useElementInteraction } from "@react-md/core";
  * import { cnb } from "cnbuilder";
@@ -147,7 +146,7 @@ const noop = (): void => {
  * @param options - An object of {@link ElementInteractionOptions} that is used
  * to merge event handlers or disable the interactions.
  * @returns the {@link ElementInteractionHookReturnValue}
- * @remarks \@since 6.0.0 Touch interactions were removed since it never looked
+ * @since 6.0.0 Touch interactions were removed since it never looked
  * good if the user touched a clickable element right before scrolling. The
  * ripple effect will only be fired on click now for touch devices.
  */