@react-md/core 6.1.0 → 6.2.0

package/src/menu/MenuSheet.tsx

@@ -43,7 +43,7 @@ export interface MenuSheetConvenienceProps {
    * />
    * ```
    */
-  sheetProps?: PropsWithRef<MenuSheetConfigurableProps, HTMLDivElement>;
+  sheetProps?: PropsWithRef<MenuSheetConfigurableProps>;
 
   /**
    * Convenience prop to apply custom style to the `Sheet` component when the

package/src/navigation/CollapsibleNavGroup.tsx

@@ -25,8 +25,8 @@ const noop = (): void => {
 export interface CollapsibleNavGroupProps
   extends NavGroupProps,
     NavItemButtonRotatorProps {
-  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
+  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;
+  buttonProps?: PropsWithRef<ButtonProps>;
   collapseOptions?: Omit<
     CollapseTransitionHookOptions<HTMLUListElement>,
     "nodeRef" | "className" | "transitionIn"

package/src/navigation/NavItemLink.tsx

@@ -36,7 +36,7 @@ export interface NavItemLinkProps
    * Any additional props to provide the wrapping `<li>` element such as
    * `style`, `className`, and `ref`.
    */
-  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;
 
   /**
    * Set this to `true` if the link matches the current `pathname`. This will

package/src/progress/CircularProgress.tsx

@@ -1,4 +1,3 @@
-import { cnb } from "cnbuilder";
 import {
   type CSSProperties,
   type HTMLAttributes,
@@ -6,11 +5,15 @@ import {
   useMemo,
 } from "react";
 
-import { cssUtils } from "../cssUtils.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import { getPercentage } from "../utils/getPercentage.js";
+import {
+  type CircularProgressClassNameOptions,
+  circularProgress,
+  circularProgressCircle,
+  circularProgressSvg,
+} from "./circularProgressStyles.js";
 import { type ProgressProps } from "./types.js";
 
 /**
@@ -22,7 +25,8 @@ import { type ProgressProps } from "./types.js";
  */
 export interface CircularProgressProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "id">,
-    ProgressProps {
+    ProgressProps,
+    CircularProgressClassNameOptions {
   /**
    * An optional style to apply to the svg within the circular progress. The
    * values of this style object will be merged with the current determinate
@@ -84,24 +88,6 @@ export interface CircularProgressProps
    */
   dashoffset?: number;
 
-  /**
-   * Boolean if the circular progress should be centered using left and right
-   * margins.
-   *
-   * @defaultValue `false`
-   * @since 6.0.0 Renamed from `centered`
-   */
-  disableCentered?: boolean;
-
-  /**
-   * Set to `true` to render as a smaller size.
-   *
-   * @defaultValue `false`
-   * @since 2.3.0
-   * @since 6.0.0 Renamed from `small`
-   */
-  dense?: boolean;
-
   /**
    * Set this to `true` to update the indeterminate behavior to only rotate
    * which will increase performance during CPU-intensive tasks or when many
@@ -113,8 +99,6 @@ export interface CircularProgressProps
   disableShrink?: boolean;
 }
 
-const styles = bem("rmd-circular-progress");
-
 /**
  * @example Indeterminate Example
  * ```tsx
@@ -160,12 +144,12 @@ export const CircularProgress = forwardRef<
     radius = 30,
     center = 33,
     viewBox = "0 0 66 66",
-    theme = "primary",
-    dense = false,
+    theme,
+    dense,
     dashoffset = 187,
-    disableShrink = false,
-    disableCentered = false,
-    disableTransition = false,
+    disableShrink,
+    disableCentered,
+    disableTransition,
     ...remaining
   } = props;
 
@@ -186,8 +170,7 @@ export const CircularProgress = forwardRef<
     };
   }, [progress, propCircleStyle, dashoffset]);
 
-  const determinate = typeof progress === "number";
-  const indeterminate = !determinate;
+  const indeterminate = typeof progress !== "number";
   return (
     <span
       {...remaining}
@@ -197,35 +180,30 @@ export const CircularProgress = forwardRef<
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={value}
-      className={cnb(
-        styles({ dense, centered: !disableCentered }),
-        theme !== "current-color" && cssUtils({ textColor: theme }),
-        className
-      )}
+      className={circularProgress({
+        theme,
+        dense,
+        disableCentered,
+        className,
+      })}
     >
       <svg
         style={svgStyle}
-        className={cnb(
-          styles("svg", {
-            determinate,
-            indeterminate: indeterminate && !disableShrink,
-            "rotate-only": indeterminate && disableShrink,
-          }),
-          svgClassName
-        )}
+        className={circularProgressSvg({
+          className: svgClassName,
+          indeterminate,
+          disableShrink,
+        })}
         viewBox={viewBox}
       >
         <circle
           style={circleStyle}
-          className={cnb(
-            styles("circle", {
-              animate: !disableTransition && determinate,
-              determinate,
-              indeterminate: indeterminate && !disableShrink,
-              "rotate-only": indeterminate && disableShrink,
-            }),
-            circleClassName
-          )}
+          className={circularProgressCircle({
+            className: circleClassName,
+            indeterminate,
+            disableShrink,
+            disableTransition,
+          })}
           r={radius}
           cx={center}
           cy={center}

package/src/progress/LinearProgress.tsx

@@ -1,4 +1,3 @@
-import { cnb } from "cnbuilder";
 import {
   type CSSProperties,
   type HTMLAttributes,
@@ -6,11 +5,10 @@ import {
   useMemo,
 } from "react";
 
-import { cssUtils } from "../cssUtils.js";
-import { type LabelRequiredForA11y } from "../types.js";
+import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import { getPercentage } from "../utils/getPercentage.js";
+import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
 import { type ProgressProps } from "./types.js";
 
 /**
@@ -31,6 +29,11 @@ export interface LinearProgressProps
    */
   barClassName?: string;
 
+  /**
+   * @since 6.1.0
+   */
+  barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
+
   /**
    * Boolean if the progress should be reversed. This will change the progress
    * direction from `left-to-right` to be `right-to-left`. If the current
@@ -61,8 +64,6 @@ export interface LinearProgressProps
   verticalHeight?: number | null;
 }
 
-const styles = bem("rmd-linear-progress");
-
 /**
  * @example Indeterminate Example
  * ```tsx
@@ -101,13 +102,14 @@ export const LinearProgress = forwardRef<
     className,
     barStyle: propBarStyle,
     barClassName,
+    barProps,
     min = 0,
     max = 100,
     value,
-    reverse = false,
-    theme = "primary",
-    disableTransition = false,
-    vertical = false,
+    reverse,
+    theme,
+    disableTransition,
+    vertical,
     verticalHeight = 240,
     ...remaining
   } = props;
@@ -140,8 +142,7 @@ export const LinearProgress = forwardRef<
     };
   }, [progress, propBarStyle, vertical]);
 
-  const determinate = typeof progress === "number";
-  const indeterminate = !determinate;
+  const indeterminate = typeof progress !== "number";
   return (
     <span
       {...remaining}
@@ -152,37 +153,23 @@ export const LinearProgress = forwardRef<
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={value}
-      className={cnb(
-        styles({
-          vertical,
-          horizontal: !vertical,
-          determinate,
-          indeterminate,
-        }),
-        theme !== "current-color" && cssUtils({ textColor: theme }),
-        className
-      )}
+      className={linearProgress({
+        className,
+        theme,
+        vertical,
+        indeterminate,
+      })}
     >
       <span
+        {...barProps}
         style={barStyle}
-        className={cnb(
-          styles("bar", {
-            vertical,
-            "vertical-reverse": vertical && reverse,
-            horizontal: !vertical,
-            "horizontal-reverse": !vertical && reverse,
-            animate: !disableTransition && determinate,
-            determinate,
-            indeterminate,
-            "determinate-reverse": determinate && reverse && !vertical,
-            "determinate-vertical-reverse": determinate && reverse && vertical,
-            "indeterminate-reverse": indeterminate && reverse && !vertical,
-            "indeterminate-vertical": indeterminate && vertical,
-            "indeterminate-vertical-reverse":
-              indeterminate && reverse && vertical,
-          }),
-          barClassName
-        )}
+        className={linearProgressBar({
+          className: barClassName,
+          reverse,
+          vertical,
+          indeterminate,
+          disableTransition,
+        })}
       />
     </span>
   );

package/src/progress/circularProgressStyles.ts

@@ -0,0 +1,114 @@
+import { cnb } from "cnbuilder";
+
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+import { type ProgressTheme } from "./types.js";
+
+const styles = bem("rmd-circular-progress");
+
+/**
+ * @since 6.2.0
+ */
+export interface CircularProgressClassNameOptions {
+  className?: string;
+
+  /**
+   * @defaultValue `"primary"`
+   * @since 6.0.0
+   */
+  theme?: ProgressTheme;
+
+  /**
+   * Set to `true` to render as a smaller size.
+   *
+   * @defaultValue `false`
+   * @since 2.3.0
+   * @since 6.0.0 Renamed from `small`
+   */
+  dense?: boolean;
+
+  /**
+   * Boolean if the circular progress should be centered using left and right
+   * margins.
+   *
+   * @defaultValue `false`
+   * @since 6.0.0 Renamed from `centered`
+   */
+  disableCentered?: boolean;
+}
+
+/**
+ * @since 6.2.0
+ */
+export function circularProgress(
+  options: CircularProgressClassNameOptions = {}
+): string {
+  const { className, theme = "primary", dense, disableCentered } = options;
+
+  return cnb(
+    styles({ dense, centered: !disableCentered }),
+    theme !== "current-color" && cssUtils({ textColor: theme }),
+    className
+  );
+}
+
+/**
+ * @since 6.2.0
+ */
+export interface CircularProgressSvgClassNameOptions {
+  className?: string;
+  /** @defaultValue `false` */
+  indeterminate?: boolean;
+  /** @defaultValue `false` */
+  disableShrink?: boolean;
+}
+
+/**
+ * @since 6.2.0
+ */
+export function circularProgressSvg(
+  options: CircularProgressSvgClassNameOptions = {}
+): string {
+  const { className, indeterminate, disableShrink } = options;
+
+  return cnb(
+    styles("svg", {
+      determinate: !indeterminate,
+      indeterminate: indeterminate && !disableShrink,
+      "rotate-only": indeterminate && disableShrink,
+    }),
+    className
+  );
+}
+/**
+ * @since 6.2.0
+ */
+export interface CircularProgressCircleClassNameOptions {
+  className?: string;
+  /** @defaultValue `false` */
+  indeterminate?: boolean;
+  /** @defaultValue `false` */
+  disableShrink?: boolean;
+  /** @defaultValue `false` */
+  disableTransition?: boolean;
+}
+
+/**
+ * @since 6.2.0
+ */
+export function circularProgressCircle(
+  options: CircularProgressCircleClassNameOptions = {}
+): string {
+  const { className, indeterminate, disableShrink, disableTransition } =
+    options;
+
+  return cnb(
+    styles("circle", {
+      animate: !disableTransition && !indeterminate,
+      determinate: !indeterminate,
+      indeterminate: indeterminate && !disableShrink,
+      "rotate-only": indeterminate && disableShrink,
+    }),
+    className
+  );
+}

package/src/progress/linearProgressStyles.ts

@@ -0,0 +1,90 @@
+import { cnb } from "cnbuilder";
+
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+import { type ProgressTheme } from "./types.js";
+
+const styles = bem("rmd-linear-progress");
+
+/**
+ * @since 6.2.0
+ */
+export interface LinearProgressClassNameOptions {
+  className?: string;
+
+  /**
+   * @defaultValue `"primary"`
+   * @since 6.0.0
+   */
+  theme?: ProgressTheme;
+
+  /** @defaultValue `false` */
+  vertical?: boolean;
+
+  /** @defaultValue `false` */
+  indeterminate?: boolean;
+}
+
+/**
+ * @since 6.2.0
+ */
+export function linearProgress(
+  options: LinearProgressClassNameOptions = {}
+): string {
+  const { className, theme = "primary", vertical, indeterminate } = options;
+
+  return cnb(
+    styles({
+      vertical,
+      horizontal: !vertical,
+      determinate: !indeterminate,
+      indeterminate,
+    }),
+    theme !== "current-color" && cssUtils({ textColor: theme }),
+    className
+  );
+}
+
+/**
+ * @since 6.2.0
+ */
+export interface LinearProgressBarClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `false` */
+  reverse?: boolean;
+  /** @defaultValue `false` */
+  vertical?: boolean;
+  /** @defaultValue `false` */
+  indeterminate?: boolean;
+  /** @defaultValue `false` */
+  disableTransition?: boolean;
+}
+
+/**
+ * @since 6.2.0
+ */
+export function linearProgressBar(
+  options: LinearProgressBarClassNameOptions = {}
+): string {
+  const { className, reverse, vertical, indeterminate, disableTransition } =
+    options;
+
+  return cnb(
+    styles("bar", {
+      vertical,
+      "vertical-reverse": vertical && reverse,
+      horizontal: !vertical,
+      "horizontal-reverse": !vertical && reverse,
+      animate: !disableTransition && !indeterminate,
+      determinate: !indeterminate,
+      indeterminate,
+      "determinate-reverse": !indeterminate && reverse && !vertical,
+      "determinate-vertical-reverse": !indeterminate && reverse && vertical,
+      "indeterminate-reverse": indeterminate && reverse && !vertical,
+      "indeterminate-vertical": indeterminate && vertical,
+      "indeterminate-vertical-reverse": indeterminate && reverse && vertical,
+    }),
+    className
+  );
+}

package/src/searching/caseInsensitive.ts

@@ -1,7 +1,13 @@
-import { type TextExtractor } from "../types.js";
+import { type AutomaticTextExtraction, type TextExtractor } from "../types.js";
 import { type BaseSearchOptions } from "./types.js";
 import { defaultExtractor, search } from "./utils.js";
 
+/**
+ * @since 6.2.0
+ * @internal
+ */
+const DEFAULT_EXTRACTOR = defaultExtractor("caseInsensitiveSearch");
+
 /**
  * @since 6.0.0
  */
@@ -142,18 +148,34 @@ export interface CaseInsensitiveOptions<T>
  * caseInsensitiveSearch({
  *   list: fruits,
  *   query: "ap",
- *   extractor: (item) => item.name,
  * });
  * // [{ name: "Apple", value: 0 }, { name: "Grape", value: 2 }]
  * ```
  *
+ * @example Objects With Custom Names
+ * ```ts
+ * const fruits = [
+ *   { nameField: "Apple", value: 0 },
+ *   { nameField: "Banana", value: 1 },
+ *   { nameField: "Grape", value: 2 },
+ *   { nameField: "Orange", value: 3 },
+ * ];
+ *
+ * caseInsensitiveSearch({
+ *   list: fruits,
+ *   query: "ap",
+ *   extractor: (item) => item.nameField,
+ * });
+ * // [{ nameField: "Apple", value: 0 }, { nameField: "Grape", value: 2 }]
+ * ```
+ *
  * @since 6.0.0
  */
-export function caseInsensitiveSearch<T extends string>(
-  options: Omit<CaseInsensitiveOptions<T>, "extractor"> & { type?: "filter" }
+export function caseInsensitiveSearch<T extends AutomaticTextExtraction>(
+  options: CaseInsensitiveOptions<T> & { type?: "filter" }
 ): readonly T[];
-export function caseInsensitiveSearch<T extends string>(
-  options: Omit<CaseInsensitiveOptions<T>, "extractor"> & { type: "search" }
+export function caseInsensitiveSearch<T extends AutomaticTextExtraction>(
+  options: CaseInsensitiveOptions<T> & { type: "search" }
 ): T | undefined;
 export function caseInsensitiveSearch<T>(
   options: CaseInsensitiveOptions<T> & {
@@ -174,7 +196,7 @@ export function caseInsensitiveSearch<T>(
     list,
     type = "filter",
     query,
-    extractor = defaultExtractor("caseInsensitiveSearch"),
+    extractor = DEFAULT_EXTRACTOR,
     startsWith,
     whitespace,
   } = options;

package/src/searching/fuzzy.ts

@@ -1,7 +1,13 @@
-import { type TextExtractor } from "../types.js";
+import { type AutomaticTextExtraction, type TextExtractor } from "../types.js";
 import { type BaseSearchOptions } from "./types.js";
 import { defaultExtractor, search } from "./utils.js";
 
+/**
+ * @since 6.2.0
+ * @internal
+ */
+const DEFAULT_EXTRACTOR = defaultExtractor("fuzzySearch");
+
 /**
  * @example
  * ```tsx
@@ -126,11 +132,11 @@ export type FuzzySearchOptions<T> = BaseSearchOptions<T>;
  *
  * @since 6.0.0
  */
-export function fuzzySearch<T extends string>(
-  options: Omit<FuzzySearchOptions<T>, "extractor"> & { type?: "filter" }
+export function fuzzySearch<T extends AutomaticTextExtraction>(
+  options: FuzzySearchOptions<T> & { type?: "filter" }
 ): readonly T[];
-export function fuzzySearch<T extends string>(
-  options: Omit<FuzzySearchOptions<T>, "extractor"> & { type?: "search" }
+export function fuzzySearch<T extends AutomaticTextExtraction>(
+  options: FuzzySearchOptions<T> & { type?: "search" }
 ): T | undefined;
 export function fuzzySearch<T>(
   option: FuzzySearchOptions<T> & {
@@ -151,7 +157,7 @@ export function fuzzySearch<T>(
     list,
     type = "filter",
     query,
-    extractor = defaultExtractor("fuzzySearch"),
+    extractor = DEFAULT_EXTRACTOR,
     whitespace,
   } = options;
 

package/src/searching/utils.ts

@@ -4,17 +4,28 @@ import { type BaseSearchOptions } from "./types.js";
 
 /**
  * @since 6.0.0
+ * @since 6.2.0 Added support for `item.name` and `item.label`.
  * @internal
  */
 export const defaultExtractor =
-  (name: string) =>
+  (usageName: string, propName = "extractor") =>
   (item: unknown): string => {
     if (typeof item === "string") {
       return item;
     }
 
+    if (item && typeof item === "object") {
+      if ("label" in item && typeof item.label === "string") {
+        return item.label;
+      }
+
+      if ("name" in item && typeof item.name === "string") {
+        return item.name;
+      }
+    }
+
     throw new Error(
-      `A \`TextExtractor\` must be provided to \`${name}\` for lists that do not contain strings`
+      `\`${usageName}\` requires the \`${propName}\` prop for lists that do not contain strings or known object types.`
     );
   };
 

package/src/snackbar/Toast.tsx

@@ -104,7 +104,7 @@ export interface ConfigurableToastProps
    * Any additional props that should be provided to the `<div>` that surrounds
    * the toast `children`.
    */
-  contentProps?: PropsWithRef<ToastContentProps, HTMLDivElement>;
+  contentProps?: PropsWithRef<ToastContentProps>;
 
   /**
    * Set this to `true` if the `children` for the toast should no longer be

package/src/table/TableCell.tsx

@@ -119,10 +119,7 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
    *
    * @since 6.0.0
    */
-  contentProps?: PropsWithRef<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >;
+  contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>>;
 
   /**
    * Any additional props to pass to the `IconRotator` when the `aria-sort` prop

package/src/table/TableCheckbox.tsx

@@ -73,7 +73,7 @@ export interface TableCheckboxProps
    * @see {@link TableCheckboxSupportedCheckboxProps}
    * @since 6.0.0
    */
-  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;
+  checkboxProps?: PropsWithRef<CheckboxProps>;
 }
 
 /**

package/src/table/TableRadio.tsx

@@ -68,7 +68,7 @@ export interface TableRadioProps
    * @see {@link TableRadioSupportedRadioProps}
    * @since 6.0.0
    */
-  radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;
+  radioProps?: PropsWithRef<RadioProps>;
 }
 
 /**

package/src/tabs/TabListScrollButton.tsx

@@ -31,7 +31,7 @@ import {
 export interface BaseTabListScrollButtonProps
   extends HTMLAttributes<HTMLDivElement>,
     ButtonClassNameThemeOptions {
-  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
+  buttonProps?: PropsWithRef<ButtonProps>;
 
   /** @defaultValue `false` */
   disableTransition?: boolean;