@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/src/theme/types.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties } from "react";
+import { type CSSProperties } from "react";
+import { type UseStateSetter } from "../types.js";
 
 /**
  * @since 6.0.0
@@ -36,3 +37,68 @@ export type DefinedCustomProperty<Property = keyof CSSProperties> =
  * @since 6.0.0
  */
 export type DefinedCSSVariableName = DefinedCustomProperty;
+
+/**
+ * @since 6.0.0
+ */
+export interface CSSVariable<
+  Name extends CSSVariableName = DefinedCSSVariableName,
+> {
+  name: Name;
+  value: string | number;
+}
+
+/**
+ * @since 6.0.0
+ */
+export type CSSVariablesProperties<
+  Name extends CSSVariableName = DefinedCSSVariableName,
+> = {
+  [key in Name]?: string | number;
+};
+
+/**
+ * @since 6.0.0
+ */
+export type ReadonlyCSSVariableList<
+  Name extends CSSVariableName = DefinedCSSVariableName,
+> = readonly Readonly<CSSVariable<Name>>[];
+
+/** @since 6.0.0 */
+export type ColorScheme = "light" | "dark";
+
+/** @since 6.0.0 */
+export type ColorSchemeMode = ColorScheme | "system";
+
+/**
+ * @since 6.0.0
+ */
+export interface ColorSchemeModeBehavior {
+  /**
+   * The current color scheme mode that is being used by your app that should
+   * default to the `$color-scheme` SCSS variable. If the
+   * {@link setColorSchemeMode} is called, this will update to that new value.
+   *
+   * TODO: Figure out how to document this
+   *
+   * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
+   * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
+   */
+  colorSchemeMode: ColorSchemeMode;
+
+  /**
+   * A function to update the color scheme.
+   *
+   * @see {@link useColorScheme} for an example usage
+   */
+  setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
+}
+
+/** @since 6.0.0 */
+export interface ColorSchemeContext extends ColorSchemeModeBehavior {
+  /**
+   * The current color scheme that is being used. This is only useful when the
+   * {@link colorSchemeMode} is set to `"system"`.
+   */
+  colorScheme: ColorScheme;
+}

package/src/theme/useCSSVariables.ts

@@ -1,33 +1,10 @@
 "use client";
-import type { RefObject } from "react";
-import { useEffect, useMemo } from "react";
-import type { CSSVariableName, DefinedCSSVariableName } from "./types.js";
-
-/**
- * @since 6.0.0
- */
-export interface CSSVariable<
-  Name extends CSSVariableName = DefinedCSSVariableName,
-> {
-  name: Name;
-  value: string | number;
-}
-
-/**
- * @since 6.0.0
- */
-export type CSSVariablesProperties<
-  Name extends CSSVariableName = DefinedCSSVariableName,
-> = {
-  [key in Name]?: string | number;
-};
-
-/**
- * @since 6.0.0
- */
-export type ReadonlyCSSVariableList<
-  Name extends CSSVariableName = DefinedCSSVariableName,
-> = readonly Readonly<CSSVariable<Name>>[];
+import { type RefObject, useEffect, useMemo } from "react";
+import {
+  type CSSVariableName,
+  type CSSVariablesProperties,
+  type ReadonlyCSSVariableList,
+} from "./types.js";
 
 /**
  * @example Applying Variables the root html element
@@ -110,7 +87,7 @@ export function useCSSVariables<Name extends CSSVariableName>(
 export function useCSSVariables<Name extends CSSVariableName>(
   variables: ReadonlyCSSVariableList<Name>,
   rootNodeOrInlineStyle?: RefObject<HTMLElement> | HTMLElement | boolean
-): CSSVariablesProperties<Name> | void {
+): CSSVariablesProperties<Name> | undefined {
   useEffect(() => {
     if (rootNodeOrInlineStyle === true || !variables.length) {
       return;

package/src/theme/useColorScheme.ts

@@ -1,45 +1,6 @@
 "use client";
 import { createContext, useContext } from "react";
-import type { UseStateSetter } from "../types.js";
-
-/** @since 6.0.0 */
-export type ColorScheme = "light" | "dark";
-
-/** @since 6.0.0 */
-export type ColorSchemeMode = ColorScheme | "system";
-
-/**
- * @since 6.0.0
- */
-export interface ColorSchemeModeBehavior {
-  /**
-   * The current color scheme mode that is being used by your app that should
-   * default to the `$color-scheme` SCSS variable. If the
-   * {@link setColorSchemeMode} is called, this will update to that new value.
-   *
-   * TODO: Figure out how to document this
-   *
-   * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
-   * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
-   */
-  colorSchemeMode: ColorSchemeMode;
-
-  /**
-   * A function to update the color scheme.
-   *
-   * @see {@link useColorScheme} for an example usage
-   */
-  setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
-}
-
-/** @since 6.0.0 */
-export interface ColorSchemeContext extends ColorSchemeModeBehavior {
-  /**
-   * The current color scheme that is being used. This is only useful when the
-   * {@link colorSchemeMode} is set to `"system"`.
-   */
-  colorScheme: ColorScheme;
-}
+import { type ColorSchemeContext } from "./types.js";
 
 const context = createContext<ColorSchemeContext>({
   colorScheme: "light",

package/src/theme/useColorSchemeMetaTag.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect } from "react";
-import { type ColorScheme } from "./useColorScheme.js";
+import { type ColorScheme } from "./types.js";
 
 /**
  * @since 6.0.0

package/src/theme/useColorSchemeProvider.ts

@@ -6,9 +6,9 @@ import {
   type ColorSchemeContext,
   type ColorSchemeMode,
   type ColorSchemeModeBehavior,
-} from "./useColorScheme.js";
+} from "./types.js";
 import { useColorSchemeMetaTag } from "./useColorSchemeMetaTag.js";
-import { usePrefersDarkTheme } from "./usePrefersColorScheme.js";
+import { usePrefersDarkTheme } from "./usePrefersDarkScheme.js";
 
 /**
  * @since 6.0.0

package/src/tooltip/useTooltip.ts

@@ -122,13 +122,13 @@ export interface TooltipPositioningOptions {
 export interface TooltippedElementEventHandlers<
   E extends HTMLElement = HTMLButtonElement,
 > {
-  onBlur?(event: FocusEvent<E>): void;
-  onFocus?(event: FocusEvent<E>): void;
-  onMouseEnter?(event: MouseEvent<E>): void;
-  onMouseLeave?(event: MouseEvent<E>): void;
-  onTouchStart?(event: TouchEvent<E>): void;
-  onTouchEnd?(event: TouchEvent<E>): void;
-  onContextMenu?(event: MouseEvent<E>): void;
+  onBlur?: (event: FocusEvent<E>) => void;
+  onFocus?: (event: FocusEvent<E>) => void;
+  onMouseEnter?: (event: MouseEvent<E>) => void;
+  onMouseLeave?: (event: MouseEvent<E>) => void;
+  onTouchStart?: (event: TouchEvent<E>) => void;
+  onTouchEnd?: (event: TouchEvent<E>) => void;
+  onContextMenu?: (event: MouseEvent<E>) => void;
 }
 
 /**
@@ -254,6 +254,12 @@ export interface TooltipOptions<
    * @since 6.0.0
    */
   overflowOnly?: boolean;
+
+  /**
+   * @see {@link FixedPositioningOptions.disabled}
+   * @defaultValue `false`
+   */
+  disableFixedPositioning?: boolean;
 }
 
 /**
@@ -265,7 +271,7 @@ export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
   id: string;
   ref: Ref<E>;
   dense: boolean;
-  style: CSSProperties;
+  style: CSSProperties | undefined;
   visible: boolean;
   position: SimplePosition;
 }
@@ -292,7 +298,7 @@ export interface TooltipImplementation<
    * This is a wrapper around the {@link setVisible} behavior that will also
    * clear any pending timeouts.
    */
-  hideTooltip(): void;
+  hideTooltip: () => void;
 
   /**
    * @since 6.0.0
@@ -422,6 +428,7 @@ export function useTooltip<
     onEntered = noop,
     onExited,
     overflowOnly,
+    disableFixedPositioning,
   } = options;
 
   const fallbackId = useId();
@@ -469,6 +476,7 @@ export function useTooltip<
     fixedTo: elementRef,
     anchor: getAnchor(position),
     disableSwapping: disableSwapping ?? !!determinedPosition,
+    disabled: disableFixedPositioning,
     getFixedPositionOptions() {
       let tooltipSpacing = dense ? denseSpacing : spacing;
       const tooltip = tooltipRef.current;

package/src/transition/types.ts

@@ -478,7 +478,7 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
    *
    * @param stage - The {@link TransitionStage} to set to
    */
-  transitionTo(stage: TransitionStage): void;
+  transitionTo: (stage: TransitionStage) => void;
 }
 
 /**

package/src/transition/useCarousel.ts

@@ -22,13 +22,13 @@ export interface CarouselImplementation extends CarouselState {
    * Increments the carousel slide active index by 1 ensuring it does not
    * advance past the {@link CarouselOptions.totalSlides} index.
    */
-  increment(): void;
+  increment: () => void;
 
   /**
    * Decrements the carousel slide active index by 1 and prevents decrementing
    * past 0.
    */
-  decrement(): void;
+  decrement: () => void;
 
   /**
    * This can be used to manually control the {@link paused} state.
@@ -38,7 +38,7 @@ export interface CarouselImplementation extends CarouselState {
   /**
    * Toggles the {@link paused} state.
    */
-  togglePaused(): void;
+  togglePaused: () => void;
 
   /**
    * A convenience wrapper for the {@link setCarouselSlideState} that will

package/src/transition/useTransition.ts

@@ -206,6 +206,7 @@ export function useTransition<E extends HTMLElement>(
 
     if (reflow && ref.current && stage !== "exited" && stage !== "entered") {
       // force reflow by accessing scrollTop
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       ref.current.scrollTop;
     }
 

package/src/tree/TreeItem.tsx

@@ -6,6 +6,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { ListItemChildren } from "../list/ListItemChildren.js";
@@ -27,7 +28,8 @@ import { type DefaultTreeItemNode } from "./types.js";
  */
 export interface TreeItemProps
   extends Omit<DefaultTreeItemNode, "parentId">,
-    HTMLAttributes<HTMLLIElement> {
+    HTMLAttributes<HTMLLIElement>,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"tree-item-" + useId()`
    */
@@ -140,6 +142,7 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     onTouchEnd,
     onTouchMove,
     contentRef,
+    disableRipple,
     ...remaining
   } = props;
 
@@ -179,15 +182,18 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     lookup.itemToElement[itemId] = id;
 
     return () => {
+      /* eslint-disable @typescript-eslint/no-dynamic-delete */
       delete lookup.disabledItems[itemId];
       delete lookup.expandable[itemId];
       delete lookup.elementToItem[id];
       delete lookup.itemToElement[itemId];
+      /* eslint-enable @typescript-eslint/no-dynamic-delete */
     };
   }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);
 
   const { pressedClassName, ripples, handlers } =
     useElementInteraction<HTMLLIElement>({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick(event) {
         onClick?.(event);

package/src/tree/TreeItemExpander.tsx

@@ -60,7 +60,7 @@ export function TreeItemExpander(props: TreeItemExpanderProps): ReactElement {
   }
 
   const isCloneable = isValidElement(icon);
-  let clickProps: { onClick: MouseEventHandler<Element> } | undefined;
+  let clickProps: { onClick: MouseEventHandler } | undefined;
   if (expansionMode === "manual" && !disabled) {
     clickProps = {
       onClick(event) {

package/src/tree/useTreeExpansion.ts

@@ -1,6 +1,6 @@
 "use client";
-import { useCallback, useState } from "react";
 import { type UseStateSetter } from "../types.js";
+import { useReadonlySet } from "../useReadonlySet.js";
 import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 
 /**
@@ -11,7 +11,7 @@ import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
  */
 export interface TreeExpansion {
   expandedIds: TreeItemIdSet;
-  toggleTreeItemExpansion(itemId: string): void;
+  toggleTreeItemExpansion: (itemId: string) => void;
   expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 
@@ -22,31 +22,13 @@ export interface TreeExpansion {
 export function useTreeExpansion(
   defaultExpandedIds?: TreeDefaultIds
 ): TreeExpansion {
-  const [expandedIds, setExpandedIds] = useState<TreeItemIdSet>(() => {
-    const defaultIds =
-      typeof defaultExpandedIds === "function"
-        ? defaultExpandedIds()
-        : defaultExpandedIds;
-
-    return new Set(defaultIds);
+  const { value, setValue, toggleValue } = useReadonlySet({
+    defaultValue: defaultExpandedIds,
   });
 
-  const toggleTreeItemExpansion = useCallback((itemId: string) => {
-    setExpandedIds((prevExpandedIds) => {
-      const expandedIds = new Set(prevExpandedIds);
-      if (expandedIds.has(itemId)) {
-        expandedIds.delete(itemId);
-      } else {
-        expandedIds.add(itemId);
-      }
-
-      return expandedIds;
-    });
-  }, []);
-
   return {
-    expandedIds,
-    toggleTreeItemExpansion,
-    expandMultipleTreeItems: setExpandedIds,
+    expandedIds: value,
+    toggleTreeItemExpansion: toggleValue,
+    expandMultipleTreeItems: setValue,
   };
 }

package/src/tree/useTreeSelection.ts

@@ -1,6 +1,6 @@
 "use client";
-import { useCallback, useState } from "react";
 import { type UseStateSetter } from "../types.js";
+import { useReadonlySet } from "../useReadonlySet.js";
 import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 
 /**
@@ -13,7 +13,7 @@ export interface TreeSelection {
   /** @defaultValue `false` */
   multiSelect?: boolean;
   selectedIds: ReadonlySet<string>;
-  toggleTreeItemSelection(itemId: string): void;
+  toggleTreeItemSelection: (itemId: string) => void;
   selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 
@@ -25,39 +25,15 @@ export function useTreeSelection(
   defaultSelectedIds?: TreeDefaultIds,
   multiSelect = false
 ): Required<TreeSelection> {
-  const [selectedIds, setSelectedIds] = useState<TreeItemIdSet>(() => {
-    const defaultIds =
-      typeof defaultSelectedIds === "function"
-        ? defaultSelectedIds()
-        : defaultSelectedIds;
-
-    return new Set(defaultIds);
+  const { value, setValue, toggleValue } = useReadonlySet({
+    toggleType: multiSelect ? "multiple" : "single-select",
+    defaultValue: defaultSelectedIds,
   });
 
-  const toggleTreeItemSelection = useCallback(
-    (itemId: string) => {
-      setSelectedIds((selectedIds) => {
-        if (!multiSelect) {
-          return selectedIds.has(itemId) ? selectedIds : new Set([itemId]);
-        }
-
-        const nextSelectedIds = new Set(selectedIds);
-        if (selectedIds.has(itemId)) {
-          nextSelectedIds.delete(itemId);
-        } else {
-          nextSelectedIds.add(itemId);
-        }
-
-        return nextSelectedIds;
-      });
-    },
-    [multiSelect]
-  );
-
   return {
-    selectedIds,
     multiSelect,
-    toggleTreeItemSelection,
-    selectMultipleTreeItems: setSelectedIds,
+    selectedIds: value,
+    toggleTreeItemSelection: toggleValue,
+    selectMultipleTreeItems: setValue,
   };
 }

package/src/tree/utils.ts

@@ -1,4 +1,8 @@
-import type { TreeItemNode, TreeData, DefaultTreeItemNode } from "./types.js";
+import {
+  type DefaultTreeItemNode,
+  type TreeData,
+  type TreeItemNode,
+} from "./types.js";
 
 /**
  * This will get all the items from the provided itemId up to the root of the
@@ -48,7 +52,7 @@ export function getChildTreeItems<T extends TreeItemNode = DefaultTreeItemNode>(
   parentId: string | null,
   recursive = false
 ): readonly T[] {
-  const items = Array.isArray(data) ? data : Object.values(data);
+  const items: readonly T[] = Array.isArray(data) ? data : Object.values(data);
 
   return items.reduce<T[]>((list, item) => {
     if (parentId !== item.parentId) {

package/src/types.ts

@@ -5,7 +5,7 @@ import type { Dispatch, ReactElement, Ref, SetStateAction } from "react";
  * object even though a `ref` isn't a real prop.
  */
 export type PropsWithRef<
-  Props extends {},
+  Props extends object,
   Element extends HTMLElement,
 > = Props & {
   /**
@@ -18,7 +18,7 @@ export type PropsWithRef<
  * A simple type that can be used for different components that clone a
  * `className` into a child component.
  */
-export type ClassNameCloneableChild<T = {}> = ReactElement<
+export type ClassNameCloneableChild<T = object> = ReactElement<
   T & { className?: string }
 >;
 
@@ -171,12 +171,28 @@ export type CssPosition = "fixed" | "sticky" | "static";
  * @since 6.0.0
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyFunction = (...args: any[]) => any | void;
+export type AnyFunction = (...args: any[]) => any;
 
 /**
  * @since 6.0.0
  */
-export type CancelableFunction<F extends AnyFunction> = F & { cancel(): void };
+export type CancelableFunction<F extends AnyFunction> = F & {
+  cancel: () => void;
+};
+
+/**
+ * @since 6.0.0
+ */
+export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<
+  (...args: Parameters<F>) => void
+>;
+
+/**
+ * @since 6.0.0
+ */
+export type ThrottledFunction<F extends AnyFunction> = CancelableFunction<
+  (...args: Parameters<F>) => ReturnType<F>
+>;
 
 /**
  * @since 6.0.0

package/src/typography/WritingDirectionProvider.tsx

@@ -34,7 +34,7 @@ export interface WritingDirectionContext {
   /**
    * Toggles the current writing direction for the first parent `Dir` component.
    */
-  toggleDir(): void;
+  toggleDir: () => void;
 }
 
 /** @internal */

package/src/useDebouncedFunction.ts

@@ -1,15 +1,8 @@
 "use client";
 import { useEffect, useMemo, useRef } from "react";
-import { type CancelableFunction, type AnyFunction } from "./types.js";
+import { type AnyFunction, type DebouncedFunction } from "./types.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 
-/**
- * @since 6.0.0
- */
-export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<
-  (...args: Parameters<F>) => void
->;
-
 /**
  * Creates a function that will only be called if it has not been called again
  * for X milliseconds.
@@ -109,7 +102,9 @@ export function useDebouncedFunction<F extends AnyFunction>(
         funcRef.current(...args);
       }, wait);
     };
-    debounced.cancel = () => window.clearTimeout(timeout.current);
+    debounced.cancel = () => {
+      window.clearTimeout(timeout.current);
+    };
 
     return debounced;
   }, [wait]);

package/src/useDropzone.ts

@@ -12,10 +12,10 @@ const noop = (): void => {
  * instead of the `DropzoneHandlers` type.
  */
 export interface DropzoneHandlers {
-  onDrop<E extends HTMLElement>(event: DragEvent<E>): void;
-  onDragEnter?<E extends HTMLElement>(event: DragEvent<E>): void;
-  onDragOver?<E extends HTMLElement>(event: DragEvent<E>): void;
-  onDragLeave?<E extends HTMLElement>(event: DragEvent<E>): void;
+  onDrop: <E extends HTMLElement>(event: DragEvent<E>) => void;
+  onDragEnter?: <E extends HTMLElement>(event: DragEvent<E>) => void;
+  onDragOver?: <E extends HTMLElement>(event: DragEvent<E>) => void;
+  onDragLeave?: <E extends HTMLElement>(event: DragEvent<E>) => void;
 }
 
 /**

package/src/useIntersectionObserver.ts

@@ -89,7 +89,7 @@ export interface BaseIntersectionObserverHookOptions {
    *     // pretend some expensive computation
    *     return [0, 0.25, 0.5, 0.75, 1];
    *   }, []),
-   *   OnUpdate: useCallback(() => {
+   *   onUpdate: useCallback(() => {
    *     // do something
    *   }, []),
    * });
@@ -97,7 +97,7 @@ export interface BaseIntersectionObserverHookOptions {
    *
    * If this option is provided, {@link threshold}'s value will be ignored.
    */
-  getThreshold?(): IntersectionObserverThreshold;
+  getThreshold?: () => IntersectionObserverThreshold;
 
   /**
    * **Must be wrapped in `useCallback` to prevent re-creating the
@@ -121,7 +121,7 @@ export interface BaseIntersectionObserverHookOptions {
    *
    * Note: If this option is provided, {@link rootMargin} will be ignored.
    */
-  getRootMargin?(): IntersectionObserverRootMargin;
+  getRootMargin?: () => IntersectionObserverRootMargin;
 }
 
 /**
@@ -156,7 +156,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement>
    * }
    * ```
    */
-  onUpdate(entries: readonly IntersectionObserverEntry[]): void;
+  onUpdate: (entries: readonly IntersectionObserverEntry[]) => void;
 
   /**
    * **Must be wrapped in `useCallback` to prevent re-creating the
@@ -185,7 +185,7 @@ export interface IntersectionObserverHookOptions<E extends HTMLElement>
    * }
    * ```
    */
-  getTargets?(): readonly Element[];
+  getTargets?: () => readonly Element[];
 }
 
 /**