@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/src/form/useEditableCombobox.ts

@@ -2,33 +2,63 @@
 import { useRef } from "react";
 import { isTypeEvent } from "../movement/utils.js";
 import {
-  useCombobox,
-  type BaseComboboxOptions,
   type ComboboxImplementation,
+  type ComboboxWidgetProps,
+  type ConfigurableComboboxOptions,
+  useCombobox,
 } from "./useCombobox.js";
-import { isChangeableHTMLElement, triggerManualChangeEvent } from "./utils.js";
+import {
+  type EditableHTMLElement,
+  isChangeableHTMLElement,
+  triggerManualChangeEvent,
+} from "./utils.js";
 
 /**
  * @since 6.0.0
  */
-export interface EditableComboboxOptions<
+export type EditableComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends BaseComboboxOptions<ComboboxEl, PopupEl> {}
+> = ConfigurableComboboxOptions<ComboboxEl, PopupEl>;
+
+/**
+ * @since 6.0.0
+ */
+export interface EditableComboboxWidgetProps<
+  ComboboxEl extends EditableHTMLElement = HTMLInputElement,
+> extends ComboboxWidgetProps<ComboboxEl> {
+  /**
+   * This is set to `off` to prevent browser from providing their own
+   * suggestions.
+   *
+   * @defaultValue `"off"`
+   */
+  autoComplete: string;
+
+  /**
+   * This is set to `"none"` to prevent browsers from automatically capitalizing
+   * the first letter.
+   *
+   * @defaultValue `"none"`
+   */
+  autoCapitalize: string;
+}
 
 /**
  * @since 6.0.0
  */
 export interface EditableComboboxImplementation<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
+  ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxImplementation<ComboboxEl, PopupEl> {}
+> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+  comboboxProps: EditableComboboxWidgetProps<ComboboxEl>;
+}
 
 /**
  * @since 6.0.0
  */
 export function useEditableCombobox<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
+  ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
 >(
   options: EditableComboboxOptions<ComboboxEl, PopupEl> = {}
@@ -129,6 +159,11 @@ export function useEditableCombobox<
 
   return {
     ...combobox,
+    comboboxProps: {
+      ...combobox.comboboxProps,
+      autoCapitalize: "none",
+      autoComplete: "off",
+    },
     getMenuProps(props) {
       return {
         // override the inherited renderAsSheet context since the sheet makes it

package/src/form/useRadioGroup.ts

@@ -91,7 +91,7 @@ export type GetRadioGroupProps<V extends string | number> = (
 
 /** @since 6.0.0 */
 export interface RadioGroupImplementation<V extends string | number> {
-  reset(): void;
+  reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
   getRadioProps: GetRadioGroupProps<V>;
@@ -99,11 +99,11 @@ export interface RadioGroupImplementation<V extends string | number> {
 
 export type GetMenuItemRadioGroupProps<V extends string | number> = (
   value: V
-) => Readonly<{ checked: boolean; onCheckedChange(): void }>;
+) => Readonly<{ checked: boolean; onCheckedChange: () => void }>;
 
 /** @since 6.0.0 */
 export interface MenuItemRadioGroupImplementation<V extends string | number> {
-  reset(): void;
+  reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
   getRadioProps: GetMenuItemRadioGroupProps<V>;
@@ -111,17 +111,17 @@ export interface MenuItemRadioGroupImplementation<V extends string | number> {
 
 /** @since 6.0.0 */
 export interface CombinedRadioGroupReturnValue<V extends string | number> {
-  reset(): void;
+  reset: () => void;
   value: V;
   setValue: UseStateSetter<V>;
-  getRadioProps?(value: V): {
+  getRadioProps?: (value: V) => {
     name?: string;
     value?: V;
     checked: boolean;
     error?: boolean;
     required?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
-    onCheckedChange?(): void;
+    onCheckedChange?: () => void;
     onInvalid?: FormEventHandler<HTMLInputElement>;
   };
 }

package/src/form/useSelectCombobox.ts

@@ -1,8 +1,8 @@
 "use client";
 import {
   useCombobox,
-  type BaseComboboxOptions,
   type ComboboxImplementation,
+  type ConfigurableComboboxOptions,
 } from "./useCombobox.js";
 
 /**
@@ -11,7 +11,7 @@ import {
 export interface SelectComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+> extends ConfigurableComboboxOptions<ComboboxEl, PopupEl> {
   value: string;
   values: readonly string[];
 }
@@ -19,10 +19,10 @@ export interface SelectComboboxOptions<
 /**
  * @since 6.0.0
  */
-export interface SelectComboboxImplementation<
+export type SelectComboboxImplementation<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxImplementation<ComboboxEl, PopupEl> {}
+> = ComboboxImplementation<ComboboxEl, PopupEl>;
 
 /**
  * @since 6.0.0

package/src/form/useTextField.ts

@@ -317,7 +317,7 @@ export interface TextFieldImplementation<
   E extends HTMLInputElement | HTMLTextAreaElement,
 > extends TextFieldHookState {
   fieldRef: RefObject<E>;
-  reset(): void;
+  reset: () => void;
   setState: UseStateSetter<Readonly<TextFieldHookState>>;
   fieldProps: ProvidedTextFieldProps<E>;
 }

package/src/hoverMode/useHoverMode.ts

@@ -34,9 +34,9 @@ export interface ControlledHoverModeOptions
  * @since 6.0.0
  */
 export interface ControlledHoverModeImplementation {
-  startShowFlow(id?: string | MouseEvent): void;
-  startHideFlow(): void;
-  clearVisibilityTimeout(): void;
+  startShowFlow: (id?: string | MouseEvent) => void;
+  startHideFlow: () => void;
+  clearVisibilityTimeout: () => void;
 }
 
 /**

package/src/hoverMode/useHoverModeProvider.ts

@@ -53,23 +53,23 @@ export interface SimpleHoverModeContext {
    *
    * @see {@link hoverTimeoutRef} for an example.
    */
-  enableHoverMode(activeId: string): void;
+  enableHoverMode: (activeId: string) => void;
 
   /**
    * Disables all hover mode behavior by clearing all timeouts and resetting
    * internal state.
    */
-  disableHoverMode(): void;
+  disableHoverMode: () => void;
 
   /**
    * @see {@link leaveTimeoutRef} for an example.
    */
-  startDisableTimer(): void;
+  startDisableTimer: () => void;
 
   /**
    * @see {@link hoverTimeoutRef} for an example.
    */
-  clearDisableTimer(): void;
+  clearDisableTimer: () => void;
 }
 
 /**

package/src/icon/FontIcon.tsx

@@ -26,8 +26,6 @@ export interface FontIconProps
 }
 
 /**
- * **Server Component**
- *
  * The `FontIcon` component is used for rendering a font-icon library's icon.
  * The default is to use the `material-icons` library, but others can be used as
  * well.

package/src/icon/IconRotator.tsx

@@ -42,8 +42,6 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
 }
 
 /**
- * **Server Component**
- *
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  */

package/src/icon/MaterialIcon.tsx

@@ -21,8 +21,6 @@ export interface MaterialIconProps
 }
 
 /**
- * **Server Component**
- *
  * The `MaterialIcon` component is used for rendering a material icon using the
  * Google Fonts stylesheet (handled separately). This is mostly a convenience
  * wrapper around the `FontIcon` that will catch typos for the supported icon

package/src/icon/MaterialSymbol.tsx

@@ -33,7 +33,6 @@ export interface MaterialSymbolProps
 }
 
 /**
- * **Server Component**
  * This is a convenience component that provides autocomplete for all the
  * available material symbols via the `name` prop.
  *

package/src/icon/SVGIcon.tsx

@@ -73,8 +73,6 @@ export interface SVGIconProps
 }
 
 /**
- * **Server Component**
- *
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  */

package/src/icon/TextIconSpacing.tsx

@@ -104,8 +104,6 @@ export interface TextIconSpacingProps {
 }
 
 /**
- * **Server Component**
- *
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *

package/src/icon/iconConfig.tsx

@@ -122,6 +122,13 @@ export interface ConfigurableIcons {
    */
   radioChecked?: ReactNode;
 
+  /**
+   * The icon to use when removing elements.
+   *
+   * @defaultValue `<FontIcon>cancel</FontIcon>`
+   */
+  remove?: ReactNode;
+
   /**
    * The icon to use for showing that something has been selected that is not a
    * radio or checkbox. This is used internally for the `Chip` in the
@@ -168,6 +175,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * import { ICON_CONFIG } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -198,6 +206,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ICON_CONFIG.password = <RemoveRedEyeIcon />;
  * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;
  * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;
+ * ICON_CONFIG.remove = <CancelIcon />;
  * ICON_CONFIG.selected = <CheckIcon />;
  * ICON_CONFIG.sort = <ArrowUpwardIcon />;
  * ICON_CONFIG.upload = <FileUploadIcon />;
@@ -222,6 +231,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
   password: <FontIcon>remove_red_eye</FontIcon>,
   radio: <FontIcon>radio_button_unchecked</FontIcon>,
   radioChecked: <FontIcon>radio_button_checked</FontIcon>,
+  remove: <FontIcon>cancel</FontIcon>,
   selected: <FontIcon>check</FontIcon>,
   sort: <FontIcon>arrow_upward</FontIcon>,
   upload: <FontIcon>file_upload</FontIcon>,
@@ -236,6 +246,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -267,6 +278,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  *   password: <RemoveRedEyeIcon />,
  *   radio: <RadioButtonUncheckedIcon />,
  *   radioChecked: <RadioButtonCheckedIcon />,
+ *   remove: <CancelIcon />,
  *   selected: <CheckIcon />,
  *   sort: <ArrowUpwardIcon />,
  *   upload: <FileUploadIcon />,

package/src/icon/styles.ts

@@ -117,7 +117,7 @@ export function icon(options: IconClassNameOptions): string {
       svg: isSvg,
       font: isFont || isMaterial,
       symbol: isSymbol,
-      vab: inline,
+      vam: inline,
       dense,
     }),
     isSymbol && `material-symbols-${family}`,

package/src/interaction/RippleContainer.tsx

@@ -16,8 +16,6 @@ export interface RippleContainerProps extends ProvidedRippleContainerProps {
 }
 
 /**
- * **Server Component**
- *
  * This component should generally only be used internally within `react-md`
  * unless you are implementing a custom component interaction with
  * `useElementInteraction`.

package/src/interaction/UserInteractionModeProvider.tsx

@@ -53,13 +53,13 @@ export interface UserInteractionModeProviderProps {
  * to update component functionality and applying the following class names to
  * the `document.body`:
  *
- * - `"mouse-mode"`
- * - `"keyboard-mode"`
- * - `"touch-mode"`
+ * - `"rmd-mouse-mode"`
+ * - `"rmd-keyboard-mode"`
+ * - `"rmd-touch-mode"`
  *
  * Within `react-md`, these classes are used for the following behavior:
- * - only display `:focus` outlines while in `"keyboard-mode"`
- * - do not display `:hover` effects while in `"touch-mode"`
+ * - only display `:focus` outlines while in `"rmd-keyboard-mode"`
+ * - do not display `:hover` effects while in `"rmd-touch-mode"`
  *
  * @example Mount at the root of your app
  * ```tsx
@@ -136,8 +136,12 @@ export function UserInteractionModeProvider(
    * and I have no experience using them.
    */
   useEffect(() => {
-    const enableMouseMode = (): void => setMode("mouse");
-    const enableKeyboardMode = (): void => setMode("keyboard");
+    const enableMouseMode = (): void => {
+      setMode("mouse");
+    };
+    const enableKeyboardMode = (): void => {
+      setMode("keyboard");
+    };
 
     const handleTouchStart = (): void => {
       lastTouchTime.current = Date.now();
@@ -160,7 +164,7 @@ export function UserInteractionModeProvider(
       isTouchContextMenu.current = true;
     };
 
-    const className = `${mode}-mode`;
+    const className = `rmd-${mode}-mode`;
     document.body.classList.add(className);
     window.addEventListener("touchstart", handleTouchStart, true);
     if (mode === "mouse") {

package/src/interaction/types.ts

@@ -19,6 +19,25 @@ declare module "react" {
   }
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface ComponentWithRippleProps {
+  /**
+   * Set this to `true` to disable the ripple behavior for this single component
+   * only. If all components should have the ripple disabled:
+   *
+   * ```ts
+   * INTERACTION_CONFIG.mode = "none";
+   * // or
+   * INTERACTION_CONFIG.mode = "press";
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  disableRipple?: boolean;
+}
+
 /**
  * This is used to provide feedback to the user that they are interacting with
  * elements on the page. It is recommended to not set this to `"none"` unless
@@ -156,8 +175,8 @@ export type RippleStateList = readonly RippleState[];
  * @internal
  */
 export interface RippleTransitionCallbacks {
-  onEntered(ripple: RippleState): void;
-  onExited(ripple: RippleState): void;
+  onEntered: (ripple: RippleState) => void;
+  onExited: (ripple: RippleState) => void;
 }
 
 /**

package/src/interaction/useElementInteraction.tsx

@@ -12,6 +12,7 @@ import { useUserInteractionMode } from "./UserInteractionModeProvider.js";
 import { INTERACTION_CONFIG } from "./config.js";
 import type {
   ElementInteractionHandlers,
+  ElementInteractionMode,
   ElementInteractionState,
   RippleState,
   RippleStyle,
@@ -31,6 +32,13 @@ export const PRESSED_CLASS_NAME = "rmd-pressed";
 /** @since 6.0.0 */
 export interface ElementInteractionOptions<E extends HTMLElement>
   extends Partial<ElementInteractionHandlers<E>> {
+  /**
+   * This can be used to override the {@link INTERACTION_CONFIG.mode}
+   *
+   * @defaultValue `INTERACTION_CONFIG.mode`
+   */
+  mode?: ElementInteractionMode;
+
   /**
    * Boolean if the element is currently disabled which will prevent any of the
    * element interaction states from happening.
@@ -165,11 +173,10 @@ export function useElementInteraction<E extends HTMLElement>(
     onTouchEnd = noop,
     onTouchMove = noop,
     onDragStart = noop,
+    mode = INTERACTION_CONFIG.mode,
     disabled = false,
   } = options;
 
-  const { mode } = INTERACTION_CONFIG;
-
   const holding = useRef(false);
   const disableClick = useRef(false);
   const userMode = useUserInteractionMode();

package/src/interaction/utils.ts

@@ -1,9 +1,9 @@
-import type { KeyboardEvent, MouseEvent, TouchEvent } from "react";
+import { type KeyboardEvent, type MouseEvent, type TouchEvent } from "react";
 import { findSizingContainer } from "../positioning/utils.js";
-import type {
-  ElementInteractionState,
-  RippleState,
-  RippleStyle,
+import {
+  type ElementInteractionState,
+  type RippleState,
+  type RippleStyle,
 } from "./types.js";
 
 /** @internal */
@@ -61,8 +61,8 @@ export function getRippleStyle(
       ({ pageX, pageY } = event);
     }
 
-    x = pageX - (left + window.pageXOffset);
-    y = pageY - (top + window.pageYOffset);
+    x = pageX - (left + window.scrollX);
+    y = pageY - (top + window.scrollY);
   }
 
   const radius = getRadius(x, y, width, height);

package/src/layout/LayoutNav.tsx

@@ -4,8 +4,9 @@ import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import {
   DEFAULT_SHEET_CLASSNAMES,
   DEFAULT_SHEET_TIMEOUT,
-} from "../sheet/Sheet.js";
-import { sheet, type BaseSheetClassNameOptions } from "../sheet/styles.js";
+  sheet,
+  type BaseSheetClassNameOptions,
+} from "../sheet/styles.js";
 import {
   type CSSTransitionClassNames,
   type TransitionActions,

package/src/layout/useExpandableLayout.ts

@@ -94,9 +94,9 @@ export interface ExpandableLayoutImplementation
   temporary: boolean;
   persistent: boolean;
   expanded: boolean;
-  expandNavigation(): void;
-  collapseNavigation(): void;
-  toggleNavigation(): void;
+  expandNavigation: () => void;
+  collapseNavigation: () => void;
+  toggleNavigation: () => void;
   appBarProps: ProvidedLayoutAppBarProps;
   mainProps: ProvidedLayoutMainProps;
   navToggleProps: ProvidedExpandableLayoutNavToggleProps;

package/src/layout/useHorizontalLayoutTransition.ts

@@ -1,6 +1,6 @@
 "use client";
 import { cnb } from "cnbuilder";
-import { DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
+import { DEFAULT_SHEET_TIMEOUT } from "../sheet/styles.js";
 import {
   type CSSTransitionClassNames,
   type CSSTransitionHookReturnValue,

package/src/layout/useLayoutAppBarHeight.ts

@@ -1,7 +1,6 @@
 "use client";
 import { useMemo, type Ref, type RefCallback } from "react";
-import { type DefinedCSSVariableName } from "../theme/types.js";
-import { type CSSVariable } from "../theme/useCSSVariables.js";
+import { type CSSVariable } from "../theme/types.js";
 import { useElementSize } from "../useElementSize.js";
 
 declare module "react" {
@@ -16,7 +15,7 @@ declare module "react" {
  */
 export interface LayoutAppBarHeightResult {
   height: number | undefined;
-  variables: readonly CSSVariable<DefinedCSSVariableName>[];
+  variables: readonly CSSVariable[];
   appBarRef: RefCallback<HTMLDivElement>;
 }
 
@@ -75,7 +74,7 @@ export function useLayoutAppBarHeight(
     ref,
     disableWidth: true,
   });
-  const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
+  const variables = useMemo<CSSVariable[]>(() => {
     if (Number.isNaN(height) || !observedOnce) {
       return [];
     }

package/src/layout/useLayoutTree.ts

@@ -4,7 +4,7 @@ import { type TreeProps } from "../tree/Tree.js";
 import {
   type DefaultTreeItemNode,
   type TreeData,
-  type TreeItemDefaultIds,
+  type TreeDefaultIds,
   type TreeItemNode,
 } from "../tree/types.js";
 import { type TreeImplementation } from "../tree/useTree.js";
@@ -75,7 +75,7 @@ export interface LayoutTreeOptions<
   /**
    * @defaultValue `getParentIds(pathname, navItems)`
    */
-  defaultExpandedIds?: TreeItemDefaultIds;
+  defaultExpandedIds?: TreeDefaultIds;
 }
 
 /**

package/src/layout/useTemporaryLayout.ts

@@ -56,8 +56,8 @@ export type ProvidedTemporaryLayoutAppBarProps = Required<
  */
 export interface TemporaryLayoutImplementation {
   visible: boolean;
-  showTemporaryNav(): void;
-  hideTemporaryNav(): void;
+  showTemporaryNav: () => void;
+  hideTemporaryNav: () => void;
   appBarProps: ProvidedTemporaryLayoutAppBarProps;
   mainProps: ProvidedTemporaryLayoutMainProps;
   navToggleProps: ProvidedLayoutNavToggleProps;

package/src/link/Link.tsx

@@ -48,8 +48,6 @@ export interface LinkProps
 }
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Link, Typography } from "@react-md/core";

package/src/list/List.tsx

@@ -1,35 +1,5 @@
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-padding-h"?: string | number;
-    "--rmd-list-padding-v"?: string | number;
-  }
-}
-
-const styles = bem("rmd-list");
-
-/** @since 6.0.0 */
-export interface ListClassNameOptions {
-  className?: string;
-
-  /** @defaultValue `false` */
-  dense?: boolean;
-
-  /** @defaultValue `false` */
-  horizontal?: boolean;
-}
-
-/**
- * @since 6.0.0
- */
-export function list(options: ListClassNameOptions = {}): string {
-  const { dense = false, horizontal = false, className } = options;
-
-  return cnb(styles({ dense, horizontal }), className);
-}
+import { list } from "./listStyles.js";
 
 export type ListElement = HTMLUListElement | HTMLOListElement;
 
@@ -64,8 +34,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
 }
 
 /**
- * **Server Component**
- *
  * The `List` component is used to render a collection of clickable actions
  * vertically or horizontally and does not include the default `ol`/`ul` styles.
  *