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

package/scripts/getExportMap.ts

@@ -0,0 +1,66 @@
+import { writeFile } from "fs/promises";
+import { glob } from "glob";
+import { resolve } from "node:path";
+import { format } from "prettier";
+import { Node, Project } from "ts-morph";
+import { alphaNumericSort } from "../src/utils/alphaNumericSort.js";
+
+const files = await glob("src/**/*.{ts,tsx}", {
+  cwd: process.cwd(),
+  ignore: ["**/__tests__/**", "**/test-utils/**"],
+});
+const project = new Project({
+  tsConfigFilePath: "./tsconfig.types.json",
+  skipLoadingLibFiles: true,
+  skipAddingFilesFromTsConfig: true,
+});
+
+const types = new Set<string>();
+const variables = new Set<string>();
+const exportMap: Record<string, string> = {};
+files.forEach((file) => {
+  const exportPath = file
+    .replace("src", "@react-md/core")
+    .replace(/\.tsx?$/, "");
+  project.addSourceFileAtPath(file);
+  const sourceFile = project.getSourceFileOrThrow(file);
+  const exportDeclarations = sourceFile.getExportedDeclarations();
+
+  for (const [name, declarations] of exportDeclarations) {
+    if (
+      declarations.find(
+        (decl) =>
+          Node.isTypeAliasDeclaration(decl) || Node.isInterfaceDeclaration(decl)
+      )
+    ) {
+      types.add(name);
+    } else {
+      variables.add(name);
+    }
+
+    exportMap[name] = exportPath;
+  }
+});
+
+const sortedExports = Object.fromEntries(
+  alphaNumericSort(Object.entries(exportMap), {
+    extractor: ([name]) => name,
+  })
+);
+const sortedTypes = alphaNumericSort([...types]);
+const sortedVariables = alphaNumericSort([...variables]);
+
+await writeFile(
+  resolve("../codemod/transforms/v5-to-v6/coreExportMap.ts"),
+  await format(
+    `// THIS FILE WAS GENERATED BY A SCRIPT AND SHOULD NOT BE UPDATED MANUALLY
+
+export const TYPES: ReadonlySet<string> = new Set(${JSON.stringify(sortedTypes)});
+export const VARIABLES: ReadonlySet<string> = new Set(${JSON.stringify(sortedVariables)});
+export const EXPORT_MAP: Record<string, string> = ${JSON.stringify(sortedExports, null, 2)};
+
+`,
+    { parser: "typescript" }
+  ),
+  "utf8"
+);

package/scripts/tsconfig.json

@@ -13,6 +13,6 @@
     "forceConsistentCasingInFileNames": true,
     "lib": ["esnext"]
   },
-  "include": ["**/*.ts"],
+  "include": ["**/*.ts", "../src/utils/alphaNumericSort.ts"],
   "exclude": ["node_modules"]
 }

package/src/app-bar/AppBarTitle.tsx

@@ -48,8 +48,11 @@ export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
 }
 
 /**
- * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
- * `AppBarTitle` does not line wrap by default.
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
+ * union of different keylines: {@link AppBarTitleKeyline}
+ * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`
+ * prop inherited through the base `Typography` component. The `textOverflow`
+ * will default to `"ellipsis"` which is new as well.
  */
 export interface AppBarTitleProps
   extends TypographyProps,
@@ -82,10 +85,11 @@ export interface AppBarTitleProps
  * }
  * ```
  *
- * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
- * does not line wrap by default.
  * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}
+ * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`
+ * prop inherited through the base `Typography` component. The `textOverflow`
+ * will default to `"ellipsis"` which is new as well.
  */
 export const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(
   function AppBarTitle(props, ref) {

package/src/autocomplete/defaults.ts

@@ -4,7 +4,7 @@ import { defaultExtractor } from "../searching/utils.js";
 import { type AutocompleteFilterOptions } from "./types.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export const defaultAutocompleteExtractor = <T>(item: T): string => {
@@ -21,7 +21,7 @@ export const defaultAutocompleteExtractor = <T>(item: T): string => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 const isProbablyMenuItemProps = (
@@ -29,7 +29,7 @@ const isProbablyMenuItemProps = (
 ): item is Partial<MenuItemProps> => !!item && typeof item === "object";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export const defaultAutocompleteOptionProps = <T>(options: {

package/src/avatar/Avatar.tsx

@@ -97,8 +97,7 @@ export interface AvatarProps
  * }
  * ```
  *
- * @since 6.0.0 `aria-hidden` is set to `true` by default and removed
- * the `role="presentation"`.
+ * @since 6.0.0 `aria-hidden` is set to `true` by default.
  */
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
   function Avatar(props, ref) {

package/src/card/Card.tsx

@@ -10,7 +10,8 @@ declare module "react" {
 }
 
 /**
- * @since 6.0.0 Extends the {@link CardClassNameOptions}.
+ * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
+ * deprecated `raiseable` prop
  */
 export interface CardProps
   extends HTMLAttributes<HTMLDivElement>,

package/src/card/CardSubtitle.tsx

@@ -19,6 +19,13 @@ export interface CardSubtitleProps extends TypographyProps {
 
   /** @defaultValue `"none"` */
   margin?: TypographyProps["margin"];
+
+  /**
+   * Set this to `null` to inherit the current color.
+   *
+   * @defaultValue `"text-secondary"`
+   */
+  textColor?: TypographyProps["textColor"];
 }
 
 /**
@@ -36,6 +43,7 @@ export const CardSubtitle = forwardRef<
     as = "h6",
     type = "subtitle-2",
     margin = "none",
+    textColor = "text-secondary",
     className,
     ...remaining
   } = props;
@@ -47,6 +55,7 @@ export const CardSubtitle = forwardRef<
       as={as}
       type={type}
       margin={margin}
+      textColor={textColor}
       className={cardSubtitle({ className })}
     >
       {children}

package/src/card/__tests__/__snapshots__/CardHeader.tsx.snap

@@ -18,7 +18,7 @@ exports[`CardHeader should allow addons before and after the children 1`] = `
       Elizabeth Park
     </h5>
     <h6
-      class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color"
+      class="rmd-typography rmd-typography--subtitle-2 rmd-text-secondary-color rmd-no-margin rmd-card__subtitle"
     >
       Work contact
     </h6>

package/src/card/__tests__/__snapshots__/CardSubtitle.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`CardSubtitle should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <h6
-  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color"
+  class="rmd-typography rmd-typography--subtitle-2 rmd-text-secondary-color rmd-no-margin rmd-card__subtitle"
 >
   Subtitle
 </h6>
@@ -10,7 +10,7 @@ exports[`CardSubtitle should apply the correct styling, HTML attributes, and all
 
 exports[`CardSubtitle should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <h6
-  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color custom-class-name"
+  class="rmd-typography rmd-typography--subtitle-2 rmd-text-secondary-color rmd-no-margin rmd-card__subtitle custom-class-name"
   style="color: white;"
 >
   Subtitle

package/src/card/__tests__/__snapshots__/styles.ts.snap

@@ -8,6 +8,6 @@ exports[`cardHeader should be callable without any arguments 1`] = `"rmd-card__h
 
 exports[`cardHeaderContent should be callable without any arguments 1`] = `"rmd-card__header-content"`;
 
-exports[`cardSubtitle should be callable without any arguments 1`] = `"rmd-card__subtitle rmd-text-secondary-color"`;
+exports[`cardSubtitle should be callable without any arguments 1`] = `"rmd-card__subtitle"`;
 
 exports[`cardTitle should be callable without any arguments 1`] = `"rmd-card__title"`;

package/src/card/styles.ts

@@ -1,6 +1,6 @@
 import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
 import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
 
 const cardStyles = bem("rmd-card");
 
@@ -130,11 +130,7 @@ export function cardSubtitle(
 ): string {
   const { className } = options;
 
-  return cnb(
-    cardStyles("subtitle"),
-    cssUtils({ textColor: "text-secondary" }),
-    className
-  );
+  return cnb(cardStyles("subtitle"), className);
 }
 
 /** @since 6.0.0 */

package/src/cssUtils.ts

@@ -86,7 +86,7 @@ export type TextOverflow = "allow" | "nowrap" | "ellipsis";
 
 /** @since 6.0.0 */
 export interface TextCssUtilsOptions {
-  textColor?: ThemeColor | TextColor;
+  textColor?: ThemeColor | TextColor | null;
 
   textAlign?: TextAlign;
 

package/src/icon/FontIcon.tsx

@@ -1,12 +1,26 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import {
+  forwardRef,
+  type AriaAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 import { icon, type FontIconClassNameOptions } from "./styles.js";
 
+/**
+ * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the
+ * `inline` and `theme` props.
+ */
 export interface FontIconProps
-  extends HTMLAttributes<HTMLElement>,
+  extends HTMLAttributes<HTMLSpanElement>,
     FontIconClassNameOptions {
+  /** @defaultValue `true` */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
+
   /**
    * Any children to render to create the font icon. This is required for
    * material-icons.
+   *
+   * @example `<FontIcon>clear</FontIcon>`
    */
   children?: ReactNode;
 }
@@ -18,22 +32,18 @@ export interface FontIconProps
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
- * If you are using another font icon library that does not always create icons
- * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
- * `forceSize` and `forceFontSize` props to fix the sizing issues.
- *
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
 export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
   function FontIcon(props, ref) {
     const {
-      className,
-      children,
       "aria-hidden": ariaHidden = true,
+      iconClassName = "material-icons",
       dense = false,
       theme,
-      iconClassName = "material-icons",
+      className,
+      children,
       ...remaining
     } = props;
 

package/src/icon/MaterialIcon.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
-import { type MaterialIconName } from "./material.js";
+import { type MaterialIconFamily, type MaterialIconName } from "./material.js";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 
@@ -7,15 +7,34 @@ import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 export interface MaterialIconProps
   extends HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
+  /**
+   * The icon name to use
+   */
+  name: MaterialIconName;
+
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
-  name: MaterialIconName;
+
+  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */
+  family?: MaterialIconFamily;
   children?: never;
 }
 
 /**
  * **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
+ * names.
+ *
+ * @example Simple Example
+ * ```tsx
+ * <MaterialIcon name="3k" />
+ * <MaterialIcon name="favorite" theme="primary" />
+ * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
+ * ```
+ *
  * @since 6.0.0
  */
 export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
@@ -32,9 +51,9 @@ export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
 
     return (
       <span
-        ref={ref}
-        aria-hidden={ariaHidden}
         {...remaining}
+        aria-hidden={ariaHidden}
+        ref={ref}
         className={icon({
           type: "material",
           family,

package/src/icon/SVGIcon.tsx

@@ -1,6 +1,9 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { icon, type SVGIconClassNameOptions } from "./styles.js";
 
+/**
+ * @since 6.0.0 Added the `inline` and `theme` props.
+ */
 export interface SVGIconProps
   extends HTMLAttributes<SVGSVGElement>,
     SVGIconClassNameOptions {

package/src/icon/iconConfig.tsx

@@ -232,6 +232,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  *
  * @example Using SVG Material Icons
  * ```tsx
+ * "use client";
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";