@react-md/core 6.2.1 → 6.3.1

package/src/form/Slider.tsx

@@ -33,6 +33,8 @@ import { type RangeSliderState } from "./useRangeSlider.js";
 import { type SliderState, type SliderValueOptions } from "./useSlider.js";
 import { useSliderDraggable } from "./useSliderDraggable.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `sliderStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-slider-color"?: string;
@@ -47,6 +49,10 @@ declare module "react" {
     "--rmd-slider-tooltip-scale"?: string | number;
     "--rmd-slider-tooltip-translate"?: string | number;
     "--rmd-slider-mark-offset"?: string;
+    "--rmd-slider-mark-active-color"?: string;
+    "--rmd-slider-mark-active-opacity"?: string | number;
+    "--rmd-slider-mark-inactive-color"?: string;
+    "--rmd-slider-mark-inactive-opacity"?: string | number;
   }
 }
 

package/src/form/Switch.tsx

@@ -19,6 +19,8 @@ import {
   type FormMessageContainerExtension,
 } from "./types.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `switchStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-switch-track-background-color"?: string;

package/src/form/TextArea.tsx

@@ -22,6 +22,8 @@ import {
   useResizingTextArea,
 } from "./useResizingTextArea.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `textAreaStylesStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-text-area-height"?: string | number;
@@ -250,6 +252,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     return (
       <FormMessageContainer
+        inline={inline}
         {...messageContainerProps}
         messageProps={messageProps}
       >

package/src/form/TextField.tsx

@@ -165,6 +165,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     return (
       <FormMessageContainer
+        inline={inline}
         {...messageContainerProps}
         messageProps={
           messageProps && {

package/src/form/TextFieldContainer.tsx

@@ -7,20 +7,6 @@ import { getFormConfig } from "./formConfig.js";
 import { textFieldContainer } from "./textFieldContainerStyles.js";
 import { type TextFieldContainerOptions } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-text-field-height"?: string | number;
-    "--rmd-text-field-padding-left"?: string | number;
-    "--rmd-text-field-padding-right"?: string | number;
-    "--rmd-text-field-padding-top"?: string | number;
-    "--rmd-text-field-border-color"?: string;
-    "--rmd-text-field-hover-border-color"?: string;
-    "--rmd-text-field-filled-color"?: string;
-    "--rmd-form-addon-top"?: string | number;
-    "--rmd-form-addon-margin-top"?: string | number;
-  }
-}
-
 export interface TextFieldContainerProps
   extends HTMLAttributes<HTMLDivElement>,
     TextFieldContainerOptions {

package/src/form/formMessageContainerStyles.ts

@@ -9,6 +9,14 @@ const styles = bem("rmd-form-message-container");
  */
 export interface FormMessageContainerClassNameOptions {
   className?: string;
+
+  /**
+   * Set to `true` to enable `display: inline-flex; width: auto`.
+   *
+   * @defaultValue `false`
+   * @since 6.3.0
+   */
+  inline?: boolean;
 }
 
 /**
@@ -17,7 +25,7 @@ export interface FormMessageContainerClassNameOptions {
 export function formMessageContainer(
   options: FormMessageContainerClassNameOptions = {}
 ): string {
-  const { className } = options;
+  const { className, inline } = options;
 
-  return cnb(styles(), className);
+  return cnb(styles({ inline }), className);
 }

package/src/form/sliderUtils.ts

@@ -6,7 +6,7 @@ import {
   type DraggableMouseEventHandlers,
   type DraggableTouchEventHandlers,
 } from "../draggable/useDraggable.js";
-import { type RenameKeysWithPrefix } from "../types.js";
+import { type MinMaxRange, type RenameKeysWithPrefix } from "../types.js";
 import {
   type ClientPositionEvent,
   getClientPosition,
@@ -18,9 +18,7 @@ import { getRangeSteps } from "../utils/getRangeSteps.js";
  * @since 6.0.0
  * @internal
  */
-interface JumpOptions {
-  min: number;
-  max: number;
+interface JumpOptions extends MinMaxRange {
   step: number;
   jump: number | undefined;
 }
@@ -178,9 +176,7 @@ function getThumbOffset(
  * @since 6.0.0
  * @internal
  */
-export interface ThumbOffsetsOptions {
-  min: number;
-  max: number;
+export interface ThumbOffsetsOptions extends MinMaxRange {
   thumb1Value: number;
   thumb1Dragging: boolean;
   thumb1DragPercentage: number;

package/src/form/types.ts

@@ -12,6 +12,35 @@ declare module "react" {
   interface CSSProperties {
     "--rmd-form-active-color"?: string;
     "--rmd-form-focus-color"?: string;
+
+    // NOTE: The label properties are in this file since all label types are
+    // in this file. If they are able to be moved to labelStyles or Label and
+    // the compiled `.d.ts` includes the types from those files, this can be
+    // moved.
+    "--rmd-label-floating-x"?: string | number;
+    "--rmd-label-floating-y"?: string | number;
+    "--rmd-label-floating-active-x"?: string | number;
+    "--rmd-label-floating-active-y"?: string | number;
+    "--rmd-label-active-padding"?: string | number;
+    "--rmd-label-active-background-color"?: string;
+
+    // NOTE: The text field properties are in this file since there are no
+    // typedefs included from `TextFieldContainer` or
+    // `textFieldContainerStyles`.
+    "--rmd-text-field-addon-top"?: string | number;
+    "--rmd-text-field-addon-spacing"?: string | number;
+    "--rmd-text-field-addon-margin-top"?: string | number;
+    "--rmd-text-field-addon-left-offset"?: string | number;
+    "--rmd-text-field-height"?: string | number;
+    "--rmd-text-field-padding-left"?: string | number;
+    "--rmd-text-field-padding-right"?: string | number;
+    "--rmd-text-field-padding-top"?: string | number;
+    "--rmd-text-field-border-color"?: string;
+    "--rmd-text-field-hover-border-color"?: string;
+    "--rmd-text-field-filled-color"?: string;
+    "--rmd-text-field-filled-padding"?: string | number;
+    "--rmd-text-field-outlined-padding"?: string | number;
+    "--rmd-text-field-underlined-padding"?: string | number;
   }
 }
 
@@ -255,6 +284,21 @@ export interface FormMessageProps
    */
   disableWrap?: boolean;
 
+  /**
+   * Optional props to provide to inline counter.
+   *
+   * @since 6.3.0
+   */
+  counterProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
+
+  /**
+   * Optional props to apply to the `<p>` tag that surrounds the `children`.
+   * This will not be used if `role="alert"` or `disableWrap={true}`.
+   *
+   * @since 6.3.0
+   */
+  messageProps?: PropsWithRef<HTMLAttributes<HTMLParagraphElement>>;
+
   /**
    * An optional style to apply to the `<p>` tag that surrounds the `children`.
    * This will not be used if `role="alert"` or `disableWrap={true}`.

package/src/form/useCombobox.ts

@@ -69,7 +69,12 @@ export interface ComboboxKeyboardMovementData<
   show: () => void;
   hide: () => void;
   visible: boolean;
-  focusLast: NonNullMutableRef<boolean>;
+
+  /**
+   * @since 6.3.0 Renamed from `focusLast` to `focusLastRef` to support the new
+   * actions.
+   */
+  focusLastRef: NonNullMutableRef<boolean>;
 }
 
 /**
@@ -280,7 +285,7 @@ export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
 export interface ComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends KeyboardMovementProviderImplementation<ComboboxEl> {
+> extends Omit<KeyboardMovementProviderImplementation<ComboboxEl>, "nodeRef"> {
   show: () => void;
   hide: () => void;
   visible: boolean;
@@ -349,16 +354,17 @@ export function useCombobox<
 
   const popupId = useEnsuredId(propPopupId, "combobox-popup");
   const comboboxId = useEnsuredId(propComboboxId, "combobox");
-  const [comboboxRef, comboboxRefCallback] = useEnsuredRef(propComboboxRef);
   const [popupRef, popupRefCallback] = useEnsuredRef(propPopupRef);
-  const focusLast = useRef(false);
+  const focusLastRef = useRef(false);
   const {
+    nodeRef: comboboxRef,
     movementProps,
     movementContext,
     currentFocusIndex,
     activeDescendantId,
     setActiveDescendantId,
   } = useKeyboardMovementProvider<ComboboxEl>({
+    ref: propComboboxRef,
     onFocus,
     onKeyDown,
     onClick(event) {
@@ -375,7 +381,7 @@ export function useCombobox<
         show,
         hide,
         visible,
-        focusLast,
+        focusLastRef,
       });
       const { event } = movementData;
       if (event.isPropagationStopped()) {
@@ -406,7 +412,7 @@ export function useCombobox<
         case "ArrowDown":
           event.preventDefault();
           event.stopPropagation();
-          focusLast.current = event.key === "ArrowUp";
+          focusLastRef.current = event.key === "ArrowUp";
           show();
           break;
         case "Enter":
@@ -445,7 +451,7 @@ export function useCombobox<
     hide,
     visible,
     setVisible,
-    focusLast,
+    focusLast: focusLastRef,
     popupRef,
     popupProps,
     comboboxRef,
@@ -456,7 +462,6 @@ export function useCombobox<
       "aria-expanded": visible,
       "aria-haspopup": popup,
       id: comboboxId,
-      ref: comboboxRefCallback,
       role: "combobox",
     },
     movementProps,
@@ -496,11 +501,11 @@ export function useCombobox<
 
         const focusables = getFocusableElements(popup, true);
         const index = getEnterDefaultFocusedIndex({
-          focusLast: focusLast.current,
+          focusLast: focusLastRef.current,
           focusables,
           currentFocusIndex: currentFocusIndex.current,
         });
-        focusLast.current = false;
+        focusLastRef.current = false;
         currentFocusIndex.current = index;
 
         const option = focusables[index];

package/src/form/useFormReset.ts

@@ -9,12 +9,15 @@ import {
 
 /**
  * @since 6.0.0
+ * @since 6.3.0 Added the optional `onReset` callback and updated
+ * `defaultValue` to be optional.
  * @internal
  */
 export interface FormResetOptions {
   form?: string;
   elementRef: RefObject<ChangeableHTMLElement>;
-  defaultValue: string;
+  onReset?: () => void;
+  defaultValue?: string;
 }
 
 /**
@@ -22,11 +25,11 @@ export interface FormResetOptions {
  * @internal
  */
 export function useFormReset(options: FormResetOptions): void {
-  const { form, elementRef, defaultValue } = options;
+  const { form, elementRef, defaultValue, onReset } = options;
 
   useEffect(() => {
     const element = elementRef.current;
-    if (!element) {
+    if (!element || (typeof defaultValue === "undefined" && !onReset)) {
       return;
     }
 
@@ -39,12 +42,16 @@ export function useFormReset(options: FormResetOptions): void {
     }
 
     const handleReset = (): void => {
-      triggerManualChangeEvent(element, defaultValue);
+      if (onReset) {
+        onReset();
+      } else if (typeof defaultValue !== "undefined") {
+        triggerManualChangeEvent(element, defaultValue);
+      }
     };
 
     formElement.addEventListener("reset", handleReset);
     return () => {
       formElement.removeEventListener("reset", handleReset);
     };
-  }, [defaultValue, elementRef, form]);
+  }, [defaultValue, elementRef, form, onReset]);
 }

package/src/form/useNumberField.ts

@@ -4,6 +4,7 @@ import { useCallback, useRef, useState } from "react";
 
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { withinRange } from "../utils/withinRange.js";
+import { useFormReset } from "./useFormReset.js";
 import {
   type ProvidedTextFieldMessageProps,
   type ProvidedTextFieldProps,
@@ -46,10 +47,7 @@ export interface NumberFieldConstraints {
  * - Renamed `fixOnBlur` to `updateValueOnBlur`
  */
 export interface NumberFieldHookOptions
-  extends Omit<
-      TextFieldHookOptions<HTMLInputElement>,
-      "defaultValue" | "isNumber"
-    >,
+  extends Omit<TextFieldHookOptions, "defaultValue" | "isNumber">,
     NumberFieldConstraints {
   /**
    * @defaultValue `undefined`
@@ -121,24 +119,21 @@ export interface NumberFieldHookState
 
 /** @since 2.5.6 */
 export interface ProvidedNumberFieldProps
-  extends ProvidedTextFieldProps<HTMLInputElement>,
+  extends ProvidedTextFieldProps,
     NumberFieldConstraints {
   type: "number";
 }
 
 /** @since 2.5.6 */
 export interface ProvidedNumberFieldMessageProps
-  extends ProvidedTextFieldMessageProps<HTMLInputElement>,
+  extends ProvidedTextFieldMessageProps,
     NumberFieldConstraints {
   type: "number";
 }
 
 /** @since 6.0.0 */
 export interface NumberFieldImplementation
-  extends Omit<
-    TextFieldImplementation<HTMLInputElement>,
-    "value" | "setState"
-  > {
+  extends Omit<TextFieldImplementation, "value" | "setState"> {
   value: number | undefined;
   setState: UseStateSetter<NumberFieldHookState>;
   fieldProps: ProvidedNumberFieldProps;
@@ -152,10 +147,7 @@ export interface NumberFieldWithMessageImplementation
 
 /** @since 6.0.0 */
 export interface ValidatedNumberFieldImplementation
-  extends Omit<
-    ValidatedTextFieldImplementation<HTMLInputElement>,
-    "value" | "setState"
-  > {
+  extends Omit<ValidatedTextFieldImplementation, "value" | "setState"> {
   value: number | undefined;
   setState: UseStateSetter<NumberFieldHookState>;
   fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;
@@ -361,10 +353,12 @@ export function useNumberField(
     min,
     max,
     step,
+    form,
     onBlur = noop,
     onChange = noop,
     updateValue = "change",
     updateValueOnBlur = true,
+    disableReset,
     defaultValue,
     ...textOptions
   } = options;
@@ -374,6 +368,7 @@ export function useNumberField(
   const {
     value: _value,
     reset: resetTextField,
+    fieldRef,
     fieldProps,
     setState: setTextFieldState,
     ...remaining
@@ -381,6 +376,7 @@ export function useNumberField(
     ...textOptions,
     isNumber: true,
     defaultValue: `${number ?? ""}`,
+    disableReset: true,
     onBlur(event) {
       onBlur(event);
       if (event.isPropagationStopped()) {
@@ -482,11 +478,18 @@ export function useNumberField(
     [setTextFieldState]
   );
 
+  useFormReset({
+    form,
+    elementRef: fieldRef,
+    onReset: disableReset ? undefined : reset,
+  });
+
   return {
     ...remaining,
     reset,
     value: number,
     setState,
+    fieldRef,
     fieldProps: {
       ...fieldProps,
       min,

package/src/form/useSelectCombobox.ts

@@ -40,7 +40,7 @@ export function useSelectCombobox<
     ...comboboxOptions,
     searchable: true,
     extendKeyDown(movementData) {
-      const { event, show, focusLast, visible } = movementData;
+      const { event, show, focusLastRef, visible } = movementData;
       if (visible) {
         return;
       }
@@ -51,7 +51,7 @@ export function useSelectCombobox<
         case "End":
           event.preventDefault();
           event.stopPropagation();
-          focusLast.current = event.key === "End";
+          focusLastRef.current = event.key === "End";
           show();
           break;
       }