@react-md/core 7.0.1 → 7.0.3

package/src/icon/getMaterialSymbolOption.ts

@@ -0,0 +1,20 @@
+import { type GoogleFontsAPIValueOrRange } from "./getMaterialSymbolsUrl.js";
+
+/**
+ * @internal
+ * @since 7.1.0
+ */
+export function getMaterialSymbolOption<T extends number>(
+  value: GoogleFontsAPIValueOrRange<T> | undefined,
+  fallback: T
+): string {
+  if (!value) {
+    return `${fallback}`;
+  }
+
+  if (typeof value === "number") {
+    return `${value}`;
+  }
+
+  return `${value.min}..${value.max}`;
+}

package/src/icon/getMaterialSymbolsUrl.ts

@@ -0,0 +1,112 @@
+import { alphaNumericSort } from "../utils/alphaNumericSort.js";
+import { getMaterialSymbolOption } from "./getMaterialSymbolOption.js";
+import {
+  type MaterialSymbolFamily,
+  type MaterialSymbolName,
+} from "./material.js";
+import {
+  MATERIAL_CONFIG,
+  type MaterialSymbolFill,
+  type MaterialSymbolGrade,
+  type MaterialSymbolOpticalSize,
+  type MaterialSymbolWeight,
+} from "./materialConfig.js";
+import { DEFAULT_MATERIAL_SYMBOL_NAMES } from "./symbols.js";
+
+/**
+ * @since 7.1.0
+ */
+export type GoogleFontsAPIValueOrRange<T extends number> =
+  | T
+  | { min: T; max: T };
+
+/**
+ * @since 7.1.0
+ */
+export interface MaterialSymbolsGoogleFontUrlOptions {
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.family` is not the default.
+   *
+   * @defaultValue `"outlined"`
+   */
+  family?: MaterialSymbolFamily | readonly MaterialSymbolFamily[];
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.fill` is not the default.
+   *
+   * @defaultValue `0`
+   */
+  fill?: GoogleFontsAPIValueOrRange<MaterialSymbolFill>;
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.grade` is not the default.
+   *
+   * @defaultValue `0`
+   */
+  grade?: GoogleFontsAPIValueOrRange<MaterialSymbolGrade>;
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.weight` is not the default.
+   *
+   * @defaultValue `400`
+   */
+  weight?: GoogleFontsAPIValueOrRange<MaterialSymbolWeight>;
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.opticalSize` is not the default.
+   *
+   * @defaultValue `48`
+   */
+  opticalSize?: GoogleFontsAPIValueOrRange<MaterialSymbolOpticalSize>;
+}
+
+/**
+ * @since 7.1.0
+ */
+export interface MaterialSymbolsUrlOptions extends MaterialSymbolsGoogleFontUrlOptions {
+  /**
+   * @see {@link DEFAULT_MATERIAL_SYMBOL_NAMES}
+   * @defaultValue `DEFAULT_MATERIAL_SYMBOL_NAMES`
+   */
+  names?: readonly MaterialSymbolName[];
+}
+
+/**
+ * @since 7.1.0
+ */
+export function getMaterialSymbolsUrl(
+  options: MaterialSymbolsUrlOptions = {}
+): string {
+  // the names have to be sorted for the google fonts api
+  const names = alphaNumericSort([
+    ...new Set(options.names ?? DEFAULT_MATERIAL_SYMBOL_NAMES),
+  ]);
+  const fill = getMaterialSymbolOption(options.fill, MATERIAL_CONFIG.fill);
+  const grade = getMaterialSymbolOption(options.grade, MATERIAL_CONFIG.grade);
+  const weight = getMaterialSymbolOption(
+    options.weight,
+    MATERIAL_CONFIG.weight
+  );
+  const opticalSize = getMaterialSymbolOption(
+    options.opticalSize,
+    MATERIAL_CONFIG.opticalSize
+  );
+  const specs = `:opsz,wght,FILL,GRAD@${opticalSize},${weight},${fill},${grade}`;
+
+  const families =
+    typeof options.family === "string" || options.family === undefined
+      ? [options.family ?? MATERIAL_CONFIG.family]
+      : options.family;
+  let familiesQs = "";
+  for (const [i, family] of families.entries()) {
+    const variant = family.charAt(0).toUpperCase() + family.slice(1);
+    familiesQs += (i === 0 ? "" : "&") + "family=Material+Symbols+" + variant;
+  }
+
+  let iconNames = "";
+  if (names.length > 0) {
+    iconNames = `&icon_names=${names.join(",")}`;
+  }
+
+  return `https://fonts.googleapis.com/css2?${familiesQs}${specs}${iconNames}`;
+}

package/src/icon/symbols.ts

@@ -0,0 +1,26 @@
+import { type MaterialSymbolName } from "./material.js";
+
+/**
+ * @since 7.1.0
+ */
+export const DEFAULT_MATERIAL_SYMBOL_NAMES = [
+  "keyboard_arrow_left",
+  "close_small",
+  "close",
+  "check_box_outline_blank",
+  "check_box",
+  "indeterminate_check_box",
+  "arrow_drop_down",
+  "error",
+  "keyboard_arrow_down",
+  "keyboard_arrow_right",
+  "menu",
+  "notifications",
+  "visibility",
+  "radio_button_unchecked",
+  "radio_button_checked",
+  "cancel",
+  "check",
+  "arrow_upward",
+  "upload",
+] satisfies readonly MaterialSymbolName[];

package/src/layout/useExpandableLayout.ts

@@ -9,7 +9,11 @@ import { type AppSize } from "../media-queries/appSize.js";
 import { MEDIA_QUERY_CONFIG } from "../media-queries/config.js";
 import { useMediaQuery } from "../media-queries/useMediaQuery.js";
 import { type CSSTransitionElementProps } from "../transition/types.js";
-import { type CssPosition, type UseStateInitializer } from "../types.js";
+import {
+  type CssPosition,
+  type LiteralStringUnion,
+  type UseStateInitializer,
+} from "../types.js";
 import { useToggle } from "../useToggle.js";
 import { useDevEffect } from "../utils/useDevEffect.js";
 import { type LayoutNavProps } from "./LayoutNav.js";
@@ -75,7 +79,7 @@ export interface ExpandableLayoutOptions extends TemporaryLayoutOptions {
    *
    * @defaultValue `"tablet"`
    */
-  temporaryUntil?: "tablet" | "desktop" | (string & {});
+  temporaryUntil?: LiteralStringUnion<"tablet" | "desktop">;
 }
 
 /**

package/src/menu/MenuItemButton.tsx

@@ -120,6 +120,7 @@ export function MenuItemButton(props: MenuItemButtonProps): ReactElement {
       aria-expanded={visible || undefined}
       id={id}
       ref={ref}
+      height={height}
       rightAddon={rightAddon}
       onClick={(event) => {
         onClick(event);

package/src/menu/MenuItemFileInput.tsx

@@ -98,7 +98,7 @@ export function MenuItemFileInput(props: MenuItemFileInputProps): ReactElement {
         // elements to be removed from the DOM, a normal `<input type="file" />`
         // can't be used. Instead, create a temporary file input element and
         // click it to trigger the file upload behavior.
-        let input: HTMLInputElement | null = document.createElement("input");
+        const input = document.createElement("input");
         input.type = "file";
         if (accept) {
           input.accept = accept;
@@ -114,7 +114,6 @@ export function MenuItemFileInput(props: MenuItemFileInputProps): ReactElement {
         // @ts-expect-error
         input.addEventListener("change", onChange);
         input.click();
-        input = null;
       }}
     >
       {children}

package/src/menu/MenuItemInputToggle.tsx

@@ -181,7 +181,7 @@ export function MenuItemInputToggle(
     MenuItemCheckboxProps & { type: "checkbox" | "radio" | "switch" };
   const id = useEnsuredId(propId, "menu-item");
 
-  let icon = propIcon;
+  let icon: ReactElement;
   if (type === "switch") {
     icon = (
       <SwitchTrack

package/src/positioning/utils.ts

@@ -228,8 +228,6 @@ export function getTransformOrigin(options: TransformOriginOptions): string {
     case "inner-right":
       x = "100%";
       break;
-    default:
-      x = "0";
   }
 
   let y = "0";
@@ -248,8 +246,6 @@ export function getTransformOrigin(options: TransformOriginOptions): string {
       case "top":
         y = "0";
         break;
-      default:
-        y = "0";
     }
   }
 

package/src/transition/useMaxWidthTransition.ts

@@ -7,7 +7,7 @@ import { Children, cloneElement, isValidElement } from "react";
 import { maxWidthTransition } from "./maxWidthTransition.js";
 
 declare module "react" {
-  interface CSSProperites {
+  interface CSSProperties {
     "--rmd-max-width"?: string | number;
     "--rmd-max-width-gap"?: string | number;
   }

package/src/types.ts

@@ -240,6 +240,12 @@ export type OverridableStringUnion<
       [K in keyof Overrides]: Overrides[K] extends false ? never : K;
     }[keyof Overrides];
 
+/**
+ * @see https://github.com/microsoft/TypeScript/issues/29729#issuecomment-471566609
+ * @since 7.1.0
+ */
+export type LiteralStringUnion<T extends U, U = string> = T | (U & {});
+
 /**
  * @since 6.2.0
  */

package/src/window-splitter/styles.ts

@@ -12,8 +12,8 @@ declare module "react" {
     "--rmd-window-splitter-y"?: string | number;
     "--rmd-window-splitter-z"?: string | number;
     "--rmd-window-splitter-position"?: string | number;
-    "--rmd-window-splitter-backgrond-color"?: string;
-    "--rmd-window-splitter-inactive-backgrond-color"?: string;
+    "--rmd-window-splitter-background-color"?: string;
+    "--rmd-window-splitter-inactive-background-color"?: string;
     "--rmd-window-splitter-opacity"?: string | number;
   }
 }