@react-md/core 6.0.2 → 6.2.0

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;

package/src/theme/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { black, white } from "./colors.js";
 
 const RGB_REGEX = /^rgb\(((\b([01]?\d\d?|2[0-4]\d|25[0-5])\b),?){3}\)$/;
@@ -37,7 +38,7 @@ export function hexToRGB(hex: string): RGB {
 
 export function getRGB(color: string): RGB {
   // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`
-  // remove whitepsace to make it easy for supporting rgb or hex
+  // remove whitespace to make it easy for supporting rgb or hex
   color = color.replace(/\s/g, "");
   const rgbMatches = color.match(RGB_REGEX);
   if (rgbMatches) {

package/src/tree/TreeItem.tsx

@@ -48,12 +48,12 @@ export interface TreeItemProps
    * element. The top-level props are passed to the `<span>` or `<a>` element
    * instead.
    */
-  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;
 
   /**
    * Any additional props to pass to the `TreeGroup` component.
    */
-  groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;
+  groupProps?: PropsWithRef<OverridableTreeGroupProps>;
 
   /**
    * This should normally be the text/content to display within the tree item

package/src/types.ts

@@ -1,12 +1,25 @@
-import type { Dispatch, ReactElement, Ref, SetStateAction } from "react";
+import {
+  type Dispatch,
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+  type SetStateAction,
+} from "react";
 
 /**
  * A helper type that allows an optional `ref` to also be applied with a props
  * object even though a `ref` isn't a real prop.
+ *
+ * @since 6.2.0 Automatically infer the `Element` type param from the provided
+ * props.
  */
 export type PropsWithRef<
   Props extends object,
-  Element extends HTMLElement,
+  Element extends HTMLElement = Props extends HTMLAttributes<infer E>
+    ? E extends HTMLElement
+      ? E
+      : never
+    : never,
 > = Props & {
   /**
    * An optional ref that can be applied.
@@ -104,6 +117,18 @@ export type HtmlTagName = keyof JSX.IntrinsicElements;
  */
 export type TextExtractor<T> = (item: T) => string;
 
+/**
+ * - `"some value"` -&gt; `"some value"`
+ * - `{ label: "Hello, world", value: 300 }` -&gt; `"Hello, world!"`
+ * - `{ name: "Hello, world", value: 300 }` -&gt; `"Hello, world!"`
+ *
+ * @since 6.2.0
+ */
+export type AutomaticTextExtraction =
+  | string
+  | { label: string }
+  | { name: string };
+
 /**
  * @since 6.0.0
  * @internal
@@ -201,3 +226,20 @@ export interface ElementSize {
   height: number;
   width: number;
 }
+
+/**
+ * @since 6.2.0
+ */
+export type OverridableStringUnion<
+  Defaults extends string,
+  Overrides extends Partial<Record<string, boolean>>,
+> =
+  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>
+  | {
+      [K in keyof Overrides]: Overrides[K] extends false ? never : K;
+    }[keyof Overrides];
+
+/**
+ * @since 6.2.0
+ */
+export type IsEmptyObject<T> = keyof T extends never ? true : false;

package/src/utils/alphaNumericSort.ts

@@ -1,5 +1,11 @@
 import { defaultExtractor } from "../searching/utils.js";
-import { type TextExtractor } from "../types.js";
+import { type AutomaticTextExtraction, type TextExtractor } from "../types.js";
+
+/**
+ * @since 6.2.0
+ * @internal
+ */
+const DEFAULT_EXTRACTOR = defaultExtractor("alphaNumericSort");
 
 /** @since 6.0.0 */
 export const DEFAULT_COLLATOR_OPTIONS = {
@@ -26,13 +32,13 @@ export interface AlphaNumericSortOptions<T> {
    * @example Simple Example
    * ```ts
    * interface Item {
-   *   name: string;
+   *   nameField: string;
    * }
    *
-   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];
+   * const items: Item[] = [{ nameField: 'Hello' }, { nameField: 'World' }];
    *
    * alphaNumericSort(items, {
-   *   extractor: (item) => item.name,
+   *   extractor: (item) => item.nameField,
    * });
    * ```
    *
@@ -87,23 +93,23 @@ export interface AlphaNumericSortOptions<T> {
  * @param list - The list of strings to sort
  * @returns a new sorted list
  */
-export function alphaNumericSort<T extends string>(
+export function alphaNumericSort<T extends AutomaticTextExtraction>(
   list: readonly T[],
-  options?: Omit<AlphaNumericSortOptions<T>, "extractor">
+  options?: AlphaNumericSortOptions<T>
 ): readonly T[];
 /**
  * @example Simple Example
  * ```ts
  * interface Item {
- *   name: string;
+ *   nameField: string;
  * }
  *
- * const items: Item[] = [{ name: "World" }, { name: "Hello" }];
+ * const items: Item[] = [{ nameField: "World" }, { nameField: "Hello" }];
  *
  * const sorted = alphaNumericSort(items, {
- *   extractor: (item) => item.name,
+ *   extractor: (item) => item.nameField,
  * });
- * // sorted == [{ name: "Hello" }, { name: "World" }]
+ * // sorted == [{ nameField: "Hello" }, { nameField: "World" }]
  * ```
  *
  * @param list - The list of items to sort
@@ -119,7 +125,7 @@ export function alphaNumericSort<T>(
 ): readonly T[] {
   const {
     compare = DEFAULT_COLLATOR.compare,
-    extractor = defaultExtractor("alphaNumericSort"),
+    extractor = DEFAULT_EXTRACTOR,
     descending = false,
   } = options;
 

package/src/utils/bem.ts

@@ -8,7 +8,7 @@ function modify(base: string, modifier?: BEMModifier): string {
   const hasOwn = Object.prototype.hasOwnProperty;
   return Object.keys(modifier).reduce((s, mod) => {
     if (hasOwn.call(modifier, mod) && modifier[mod]) {
-      s = `${s} ${base}--${mod}`;
+      return `${s} ${base}--${mod}`;
     }
 
     return s;

package/src/utils/parseCssLengthUnit.ts

@@ -43,6 +43,10 @@ export function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {
     return value;
   }
 
+  if (value.includes("calc")) {
+    throw new Error(`Unable to parse a unit with \`calc\`: "${value}"`);
+  }
+
   const parsed = parseFloat(value);
   if (/px$/i.test(value)) {
     return parsed;