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

package/src/form/useCombobox.ts

@@ -2,6 +2,8 @@
 import {
   useRef,
   type FocusEventHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type InputHTMLAttributes,
   type KeyboardEventHandler,
   type MouseEventHandler,
   type Ref,
@@ -44,7 +46,7 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const getNonDisabledOptions = (
   container: HTMLElement
@@ -55,12 +57,12 @@ export const getNonDisabledOptions = (
 ];
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type SupportedComboboxPopup = "listbox" | "grid" | "dialog";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxKeyboardMovementData<
   E extends HTMLElement = HTMLInputElement,
@@ -72,14 +74,14 @@ export interface ComboboxKeyboardMovementData<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ExtendComboboxKeyDown<E extends HTMLElement = HTMLInputElement> = (
   movementData: ComboboxKeyboardMovementData<E>
 ) => void;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ComboboxKeyboardMovementOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -96,7 +98,7 @@ export type ComboboxKeyboardMovementOptions<
 >;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BaseComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -141,7 +143,7 @@ export interface BaseComboboxOptions<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -155,7 +157,7 @@ export interface ComboboxOptions<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxWidgetProps<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -173,7 +175,7 @@ export interface ComboboxWidgetProps<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxWidgetPopupProps<
   PopupEl extends HTMLElement = HTMLElement,
@@ -184,7 +186,7 @@ export interface ComboboxWidgetPopupProps<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ComboboxTransitionCallbacks = Pick<
   TransitionCallbacks,
@@ -192,27 +194,23 @@ export type ComboboxTransitionCallbacks = Pick<
 >;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {
   disableTransition?: boolean;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type ConfigurableComboboxMenuProps = Partial<
-  Omit<
-    MenuProps,
-    "fixedTo" | "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps
-  >
+  Omit<MenuProps, "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>
 >;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedComboboxMenuProps<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLDivElement,
 > extends Required<ComboboxTransitionCallbacks>,
     ComboboxWidgetPopupProps<PopupEl> {
@@ -225,35 +223,29 @@ export interface ProvidedComboboxMenuProps<
   /** @defaultValue `BELOW_CENTER_ANCHOR` */
   anchor: PositionAnchor;
 
-  fixedTo: RefObject<ComboboxEl>;
+  fixedTo: RefObject<HTMLElement>;
 
   sheetProps: MenuSheetConfigurableProps &
     Required<ComboboxTransitionCallbacks>;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface ComboboxMenuProps<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
-  PopupEl extends HTMLElement = HTMLDivElement,
-> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
-    ProvidedComboboxMenuProps<ComboboxEl, PopupEl> {}
+export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
+  extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
+    ProvidedComboboxMenuProps<PopupEl> {}
 
 /**
  * Since the combobox usually uses the `Menu` as a popup element, this is a
  * helper util to create the required props and merge any additional props
  * with reasonable defaults.
  */
-export type ComboboxGetMenuProps<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
-  PopupEl extends HTMLElement = HTMLDivElement,
-> = (
-  props?: ConfigurableComboboxMenuProps
-) => ComboboxMenuProps<ComboboxEl, PopupEl>;
+export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =
+  (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -269,14 +261,14 @@ export interface ComboboxImplementation<
   comboboxRef: RefObject<ComboboxEl>;
   comboboxProps: ComboboxWidgetProps<ComboboxEl>;
 
-  getMenuProps: ComboboxGetMenuProps<ComboboxEl, PopupEl>;
+  getMenuProps: ComboboxGetMenuProps<PopupEl>;
   getTransitionCallbacks(
     options: ComboboxTransitionOptions
   ): Required<ComboboxTransitionCallbacks>;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useCombobox<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -503,9 +495,9 @@ export function useCombobox<
       return {
         anchor: BELOW_CENTER_ANCHOR,
         width: "min",
+        fixedTo: comboboxRef,
         ...props,
         ...popupProps,
-        fixedTo: comboboxRef,
         visible,
         onRequestClose: hide,
         ...getTransitionCallbacks(props),

package/src/form/useEditableCombobox.ts

@@ -9,7 +9,7 @@ import {
 import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface EditableComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -17,7 +17,7 @@ export interface EditableComboboxOptions<
 > extends BaseComboboxOptions<ComboboxEl, PopupEl> {}
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface EditableComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -25,7 +25,7 @@ export interface EditableComboboxImplementation<
 > extends ComboboxImplementation<ComboboxEl, PopupEl> {}
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useEditableCombobox<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -131,6 +131,9 @@ export function useEditableCombobox<
     ...combobox,
     getMenuProps(props) {
       return {
+        // override the inherited renderAsSheet context since the sheet makes it
+        // so the user can't actually type in the combobox
+        renderAsSheet: false,
         preventOverlap: true,
         ...getMenuProps(props),
       };

package/src/form/useFileUpload.ts

@@ -31,7 +31,7 @@ const noop = (): void => {
  *
  * @typeParam CustomError - An optional error type that gets returned from the
  * {@link FilesValidator}.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export interface FileUploadState<CustomError = never> {
   /**
@@ -60,7 +60,7 @@ export interface FileUploadState<CustomError = never> {
  *
  * @typeParam CustomError - An optional error type that gets returned from the
  * {@link FilesValidator}.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  * @internal
  */
 export interface FileUploadHookState<CustomError = never>
@@ -79,7 +79,7 @@ export interface FileUploadHookState<CustomError = never>
  * {@link FileUploadHandlers}.
  * @typeParam CustomError - An optional error type that gets returned from the
  * {@link FilesValidator}.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export interface FileUploadOptions<E extends HTMLElement, CustomError = never>
   extends FileUploadHandlers<E>,
@@ -114,7 +114,7 @@ type Action<E = never> =
   | { type: "complete"; key: string; result: FileReaderResult }
   | { type: "clearErrors" };
 
-/** @remarks \@since 2.9.0 */
+/** @since 2.9.0 */
 export interface FileUploadActions {
   /**
    * Reset everything related to uploads ensuring that all file readers have
@@ -144,7 +144,7 @@ export interface FileUploadActions {
  * {@link FileUploadHandlers}.
  * @typeParam CustomError - An optional error type that gets returned from the
  * {@link FilesValidator}.
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export interface FileUploadHookReturnValue<
   E extends HTMLElement = HTMLElement,
@@ -177,8 +177,7 @@ export interface FileUploadHookReturnValue<
    * when the {@link FileValidationOptions.extensions} list has been provided to
    * limit which files the OS will _attempt_ to allow access to.
    *
-   * @example
-   * Simple example
+   * @example Simple example
    * ```ts
    * const extensions = ['pdf', 'docx', 'ppt'];
    * const { accept } = useFileUpload({ extensions, ...others });
@@ -211,7 +210,7 @@ const EMPTY_OBJECT = {} as const;
  * {@link FilesValidator}.
  * @param options - All the {@link FileUploadOptions}
  * @returns the {@link FileUploadHookReturnValue}
- * @remarks \@since 2.9.0
+ * @since 2.9.0
  */
 export function useFileUpload<E extends HTMLElement, CustomError = never>({
   maxFiles = -1,

package/src/form/useFormReset.ts

@@ -6,7 +6,7 @@ import {
 } from "./utils.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface FormResetOptions {
@@ -16,7 +16,7 @@ export interface FormResetOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export function useFormReset(options: FormResetOptions): void {

package/src/form/useListboxProvider.ts

@@ -4,7 +4,7 @@ import { type ChangeableHTMLElement } from "./utils.js";
 
 /**
  * @internal
- * \@remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ListboxContext {
   /**
@@ -28,13 +28,13 @@ const context = createContext<ListboxContext | null>(null);
  * **Client Component**
  *
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const { Provider: ListboxProvider } = context;
 
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useListboxContext(): ListboxContext {
   const value = useContext(context);

package/src/form/useNumberField.ts

@@ -16,7 +16,7 @@ const noop = (): void => {
   // do nothing
 };
 
-/** @remarks \@since 2.5.0 */
+/** @since 2.5.0 */
 export interface NumberFieldConstraints {
   /**
    * An optional min value for the number field.
@@ -38,9 +38,8 @@ export interface NumberFieldConstraints {
 }
 
 /**
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0
+ * @since 2.5.0
+ * @since 6.0.0
  * - Removed `updateOnChange` in favor of `updateValue`
  * - Renamed `fixOnBlur` to `updateValueOnBlur`
  */
@@ -61,8 +60,7 @@ export interface NumberFieldHookOptions
    * other components, keep this as the default of `"change"`. Otherwise, set
    * this to `"blur"`.
    *
-   * @example
-   * Deferring Updates on Blur
+   * @example Deferring Updates on Blur
    * ```tsx
    * import { TextField, useNumberField } from "@react-md/core";
    * import type { ReactElement } from "react";
@@ -106,33 +104,33 @@ export interface NumberFieldHookOptions
    * fix any min/max errors manually and maintain weird formatting.
    *
    * @defaultValue `true`
-   * @remarks \@since 6.0.0 This was renamed from `fixOnBlur` and removed the
+   * @since 6.0.0 This was renamed from `fixOnBlur` and removed the
    * `"min"` and `"max"` behavior.
    */
   updateValueOnBlur?: boolean;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NumberFieldHookState
   extends Omit<TextFieldHookState, "value"> {
   value: number | undefined;
 }
 
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface ProvidedNumberFieldProps
   extends ProvidedTextFieldProps<HTMLInputElement>,
     NumberFieldConstraints {
   type: "number";
 }
 
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface ProvidedNumberFieldMessageProps
   extends ProvidedTextFieldMessageProps<HTMLInputElement>,
     NumberFieldConstraints {
   type: "number";
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NumberFieldImplementation
   extends Omit<
     TextFieldImplementation<HTMLInputElement>,
@@ -143,13 +141,13 @@ export interface NumberFieldImplementation
   fieldProps: ProvidedNumberFieldProps;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NumberFieldWithMessageImplementation
   extends NumberFieldImplementation {
   fieldProps: ProvidedNumberFieldMessageProps;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ValidatedNumberFieldImplementation
   extends Omit<
     ValidatedTextFieldImplementation<HTMLInputElement>,
@@ -161,8 +159,7 @@ export interface ValidatedNumberFieldImplementation
 }
 
 /**
- * @example
- * Enforce Number Value and No Error Messages
+ * @example Enforce Number Value and No Error Messages
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -199,8 +196,7 @@ export function useNumberField(
 };
 
 /**
- * @example
- * No Error Messages
+ * @example No Error Messages
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -231,8 +227,7 @@ export function useNumberField(
 ): NumberFieldImplementation;
 
 /**
- * @example
- * Enforce Number Value
+ * @example Enforce Number Value
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -254,8 +249,7 @@ export function useNumberField(
  * }
  * ```
  *
- * @example
- * Enforce Number Value and Deferring Updates
+ * @example Enforce Number Value and Deferring Updates
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -294,8 +288,7 @@ export function useNumberField(
  * The `useNumberField` hook is used to control the state of a `TextField` or
  * `<input type="number">`
  *
- * @example
- * Default Implementation
+ * @example Default Implementation
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -317,8 +310,7 @@ export function useNumberField(
  * }
  * ```
  *
- * @example
- * Adding Constraints
+ * @example Adding Constraints
  * ```tsx
  * import { TextField, useNumberField } from "@react-md/core";
  * import type { ReactElement } from "react";

package/src/form/useRadioGroup.ts

@@ -12,7 +12,7 @@ const noop = (): void => {
   // do nothing
 };
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface RadioGroupOptions<T extends string | number> {
   /**
    * A `name` to apply to all the radios within the group. This is required if
@@ -50,7 +50,7 @@ export interface RadioGroupOptions<T extends string | number> {
 
   /**
    * If you need to prevent the default behavior in a radio group for some
-   * reason, you can provide a custom `onCHange` event handler and call
+   * reason, you can provide a custom `onChange` event handler and call
    * `event.stopPropagation()`. This will be called whenever a new radio button
    * is checked.
    *
@@ -73,7 +73,7 @@ export interface RadioGroupOptions<T extends string | number> {
   onInvalid?: FormEventHandler<HTMLInputElement>;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ProvidedRadioGroupProps<V extends string | number> {
   name: string;
   value: V;
@@ -84,12 +84,12 @@ export interface ProvidedRadioGroupProps<V extends string | number> {
   onInvalid: FormEventHandler<HTMLInputElement>;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type GetRadioGroupProps<V extends string | number> = (
   value: V
 ) => Readonly<ProvidedRadioGroupProps<V>>;
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface RadioGroupImplementation<V extends string | number> {
   reset(): void;
   value: V;
@@ -101,7 +101,7 @@ export type GetMenuItemRadioGroupProps<V extends string | number> = (
   value: V
 ) => Readonly<{ checked: boolean; onCheckedChange(): void }>;
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface MenuItemRadioGroupImplementation<V extends string | number> {
   reset(): void;
   value: V;
@@ -109,7 +109,7 @@ export interface MenuItemRadioGroupImplementation<V extends string | number> {
   getRadioProps: GetMenuItemRadioGroupProps<V>;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CombinedRadioGroupReturnValue<V extends string | number> {
   reset(): void;
   value: V;
@@ -130,8 +130,7 @@ export interface CombinedRadioGroupReturnValue<V extends string | number> {
 // string.
 
 /**
- * @example
- * Generic Number Example
+ * @example Generic Number Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup<number>({
  *   name: "group",
@@ -147,7 +146,7 @@ export interface CombinedRadioGroupReturnValue<V extends string | number> {
  *   </>
  * );
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useRadioGroup<V extends number>(
   options: RadioGroupOptions<V> & {
@@ -167,8 +166,7 @@ export function useRadioGroup<V extends number>(
   }
 ): MenuItemRadioGroupImplementation<V>;
 /**
- * @example
- * Generic String Example
+ * @example Generic String Example
  * ```tsx
  * const { value, getRadioProps } = useRadioGroup({ name: "group" });
  *
@@ -181,8 +179,7 @@ export function useRadioGroup<V extends number>(
  * );
  * ```
  *
- * @example
- * String Union Example
+ * @example String Union Example
  * ```tsx
  * const values = [
  *   { label: "First", value: "a" },
@@ -207,7 +204,7 @@ export function useRadioGroup<V extends number>(
  *   </>
  * );
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useRadioGroup<V extends string>(
   options: RadioGroupOptions<V> & {
@@ -227,8 +224,7 @@ export function useRadioGroup<V extends string>(
   }
 ): MenuItemRadioGroupImplementation<V>;
 /**
- * @example
- * Strict Union Example
+ * @example Strict Union Example
  * ```tsx
  * type ValidValues = 1 | 2 | 3 | 4 | "" | "a" | "b";
  *
@@ -250,7 +246,7 @@ export function useRadioGroup<V extends string>(
  *   </>
  * );
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useRadioGroup<V extends string | number>(
   options: RadioGroupOptions<V>

package/src/form/useRangeSlider.ts

@@ -4,14 +4,13 @@ import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { type SliderValueOptions } from "./useSlider.js";
 
 /**
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Updated to use labeled tuple.
+ * @since 2.5.0
+ * @since 6.0.0 Updated to use labeled tuple.
  */
 export type RangeSliderValue = readonly [minValue: number, maxValue: number];
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface RangeSliderState {
   rangeValue: RangeSliderValue;
@@ -19,22 +18,21 @@ export interface RangeSliderState {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface RangeSliderOptions extends SliderValueOptions {
   defaultValue?: UseStateInitializer<RangeSliderValue>;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface RangeSliderImplementation
   extends Required<SliderValueOptions>,
     RangeSliderState {}
 
 /**
- * @example
- * Range Slider Example
+ * @example Range Slider Example
  * ```tsx
  * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -66,9 +64,8 @@ export interface RangeSliderImplementation
  * ```
  *
  * @see The `Slider` component for additional examples.
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Now returns an object instead of an ordered tuple and only
+ * @since 2.5.0
+ * @since 6.0.0 Now returns an object instead of an ordered tuple and only
  * return the `rangeValue` and `setRangeValue` instead of all the slider
  * functionality. In addition, the hook only accepts a single object argument.
  */

package/src/form/useSelectCombobox.ts

@@ -6,7 +6,7 @@ import {
 } from "./useCombobox.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SelectComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -17,7 +17,7 @@ export interface SelectComboboxOptions<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SelectComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
@@ -25,7 +25,7 @@ export interface SelectComboboxImplementation<
 > extends ComboboxImplementation<ComboboxEl, PopupEl> {}
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useSelectCombobox<
   ComboboxEl extends HTMLElement = HTMLInputElement,