@react-md/core 6.2.1 → 6.3.0

package/src/form/FormMessageContainer.tsx

@@ -2,14 +2,18 @@ import { type HTMLAttributes, forwardRef } from "react";
 
 import { type PropsWithRef } from "../types.js";
 import { FormMessage } from "./FormMessage.js";
-import { formMessageContainer } from "./formMessageContainerStyles.js";
+import {
+  type FormMessageContainerClassNameOptions,
+  formMessageContainer,
+} from "./formMessageContainerStyles.js";
 import { type FormMessageProps } from "./types.js";
 
 /**
  * @since 2.5.0
  */
 export interface FormMessageContainerProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends HTMLAttributes<HTMLDivElement>,
+    FormMessageContainerClassNameOptions {
   /**
    * If the extension doesn't actually want to render the `FormMessage`
    * component, these props are optional. It kind of eliminates the whole
@@ -29,7 +33,7 @@ export const FormMessageContainer = forwardRef<
   HTMLDivElement,
   FormMessageContainerProps
 >(function FormMessageContainer(props, ref) {
-  const { className, children, messageProps, ...remaining } = props;
+  const { className, children, inline, messageProps, ...remaining } = props;
   if (!messageProps) {
     return <>{children}</>;
   }
@@ -38,7 +42,7 @@ export const FormMessageContainer = forwardRef<
     <div
       {...remaining}
       ref={ref}
-      className={formMessageContainer({ className })}
+      className={formMessageContainer({ className, inline })}
     >
       {children}
       <FormMessage {...messageProps} />

package/src/form/FormMessageCounter.tsx

@@ -1,4 +1,9 @@
-import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  forwardRef,
+} from "react";
 
 import { formMessageCounter } from "./formMessageStyles.js";
 
@@ -44,15 +49,21 @@ export interface FormMessageCounterProps
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @see {@link https://react-md.dev/components/text-field | TextField Demos}
  * @since 2.9.0
+ * @since 6.3.0 Supports refs.
  */
-export function FormMessageCounter(
-  props: FormMessageCounterProps
-): ReactElement {
+export const FormMessageCounter = forwardRef<
+  HTMLSpanElement,
+  FormMessageCounterProps
+>(function FormMessageCounter(props, ref): ReactElement {
   const { children, className, ...remaining } = props;
 
   return (
-    <span {...remaining} className={formMessageCounter({ className })}>
+    <span
+      ref={ref}
+      {...remaining}
+      className={formMessageCounter({ className })}
+    >
       {children}
     </span>
   );
-}
+});

package/src/form/Listbox.tsx

@@ -1,21 +1,15 @@
-import {
-  type Dispatch,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-  useMemo,
-} from "react";
+"use client";
+
+import { type ReactElement, type ReactNode, type Ref } 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 | object;
+import {
+  ListboxProvider,
+  type ListboxProviderOptions,
+  type ListboxValue,
+  useListboxProvider,
+} from "./ListboxProvider.js";
 
 /**
  * @since 6.0.0
@@ -23,11 +17,8 @@ export type ListboxValue = string | number | null | object;
  */
 export interface ListboxProps<Value extends ListboxValue>
   extends MenuProps,
-    OptionSelectedIconProps {
+    ListboxProviderOptions<Value> {
   nodeRef?: Ref<HTMLDivElement>;
-
-  value: Value | readonly NonNullable<ListboxValue>[];
-  setValue: Dispatch<NonNullable<Value>>;
   children: ReactNode;
 }
 
@@ -49,36 +40,17 @@ export function Listbox<T extends ListboxValue>(
     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,
-        ]
-      )}
+      value={useListboxProvider({
+        value,
+        setValue,
+        selectedIcon,
+        selectedIconAfter,
+        disableSelectedIcon,
+        unselectedIcon,
+      })}
     >
       <Menu {...remaining} ref={nodeRef}>
         {children}

package/src/form/ListboxProvider.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext } from "react";
+import { type Dispatch, createContext, useContext, useMemo } from "react";
 
 import { type OptionSelectedIconProps } from "./Option.js";
 
@@ -37,3 +37,63 @@ export function useListboxContext(): ListboxContext {
 
   return value;
 }
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export type ListboxValue = string | number | null | object;
+
+/**
+ * @since 6.3.0
+ */
+export interface ListboxProviderOptions<Value extends ListboxValue>
+  extends OptionSelectedIconProps {
+  value: ListboxValue | readonly NonNullable<ListboxValue>[];
+  setValue: Dispatch<NonNullable<Value>>;
+}
+
+/**
+ * @since 6.3.0
+ */
+export function useListboxProvider<Value extends ListboxValue>(
+  options: ListboxProviderOptions<Value>
+): ListboxContext {
+  const {
+    value,
+    setValue,
+    selectedIconAfter,
+    selectedIcon,
+    unselectedIcon,
+    disableSelectedIcon,
+  } = options;
+
+  const values = useMemo(() => {
+    if (Array.isArray(value)) {
+      return new Set(value);
+    }
+
+    return new Set([value]);
+  }, [value]);
+
+  return useMemo(
+    () => ({
+      selectOption: setValue,
+      isOptionSelected(option) {
+        return values.has(option);
+      },
+      selectedIcon,
+      unselectedIcon,
+      selectedIconAfter,
+      disableSelectedIcon,
+    }),
+    [
+      disableSelectedIcon,
+      selectedIcon,
+      selectedIconAfter,
+      setValue,
+      unselectedIcon,
+      values,
+    ]
+  );
+}

package/src/form/NativeSelect.tsx

@@ -161,6 +161,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
 
     return (
       <FormMessageContainer
+        inline={inline}
         {...messageContainerProps}
         messageProps={
           messageProps && {

package/src/form/TextArea.tsx

@@ -250,6 +250,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/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

@@ -255,6 +255,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;
       }