@react-md/core 1.0.0-next.6 → 1.0.0-next.8

package/dist/typography/_typography.scss

@@ -4,6 +4,18 @@
 @use "../utils";
 
 $disable-text-container: false !default;
+$disable-headline-1: false !default;
+$disable-headline-2: false !default;
+$disable-headline-3: false !default;
+$disable-headline-4: false !default;
+$disable-headline-5: false !default;
+$disable-headline-6: false !default;
+$disable-subtitle-1: false !default;
+$disable-subtitle-2: false !default;
+$disable-body-1: false !default;
+$disable-body-2: false !default;
+$disable-caption: false !default;
+$disable-overline: false !default;
 
 /// A small utility function to get the letter spacing based on tracking and
 /// font-size
@@ -216,9 +228,13 @@ $button-recommended-styles: map.merge(
   $base-font-styles,
   (
     font-size: 0.875rem,
-    line-height: 2.25rem,
     font-weight: map.get($font-weights, medium),
     letter-spacing: get-letter-spacing(1.25, 0.875),
+    line-height: 2.25rem,
+    // buttons with multiple lines of text look terrible because of the large
+    // line-height. You normally want to use a different component if the
+    // clickable area has so much content to line-wrap
+    line-wrap: nowrap,
   )
 );
 $button-custom-styles: () !default;
@@ -276,52 +292,76 @@ $typography-variables: (line-length, text-container-padding);
     .rmd-typography {
       @include utils.map-to-styles($base-font-styles);
 
-      &--headline-1 {
-        @include utils.map-to-styles($headline-1-styles);
+      @if not $disable-headline-1 {
+        &--headline-1 {
+          @include utils.map-to-styles($headline-1-styles);
+        }
       }
 
-      &--headline-2 {
-        @include utils.map-to-styles($headline-2-styles);
+      @if not $disable-headline-2 {
+        &--headline-2 {
+          @include utils.map-to-styles($headline-2-styles);
+        }
       }
 
-      &--headline-3 {
-        @include utils.map-to-styles($headline-3-styles);
+      @if not $disable-headline-3 {
+        &--headline-3 {
+          @include utils.map-to-styles($headline-3-styles);
+        }
       }
 
-      &--headline-4 {
-        @include utils.map-to-styles($headline-4-styles);
+      @if not $disable-headline-4 {
+        &--headline-4 {
+          @include utils.map-to-styles($headline-4-styles);
+        }
       }
 
-      &--headline-5 {
-        @include utils.map-to-styles($headline-5-styles);
+      @if not $disable-headline-5 {
+        &--headline-5 {
+          @include utils.map-to-styles($headline-5-styles);
+        }
       }
 
-      &--headline-6 {
-        @include utils.map-to-styles($headline-6-styles);
+      @if not $disable-headline-6 {
+        &--headline-6 {
+          @include utils.map-to-styles($headline-6-styles);
+        }
       }
 
-      &--subtitle-1 {
-        @include utils.map-to-styles($subtitle-1-styles);
+      @if not $disable-subtitle-1 {
+        &--subtitle-1 {
+          @include utils.map-to-styles($subtitle-1-styles);
+        }
       }
 
-      &--subtitle-2 {
-        @include utils.map-to-styles($subtitle-2-styles);
+      @if not $disable-subtitle-2 {
+        &--subtitle-2 {
+          @include utils.map-to-styles($subtitle-2-styles);
+        }
       }
 
-      &--body-1 {
-        @include utils.map-to-styles($body-1-styles);
+      @if not $disable-body-1 {
+        &--body-1 {
+          @include utils.map-to-styles($body-1-styles);
+        }
       }
 
-      &--body-2 {
-        @include utils.map-to-styles($body-2-styles);
+      @if not $disable-body-2 {
+        &--body-2 {
+          @include utils.map-to-styles($body-2-styles);
+        }
       }
 
-      &--caption {
-        @include utils.map-to-styles($caption-styles);
+      @if not $disable-caption {
+        &--caption {
+          @include utils.map-to-styles($caption-styles);
+        }
       }
 
-      &--overline {
-        @include utils.map-to-styles($overline-styles);
+      @if not $disable-overline {
+        &--overline {
+          @include utils.map-to-styles($overline-styles);
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.8",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -60,15 +60,15 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.1.63",
-    "@swc/core": "1.3.105",
+    "@swc/cli": "^0.3.2",
+    "@swc/core": "1.3.106",
     "@swc/jest": "^0.2.31",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.6",
+    "@types/node": "^20.11.7",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "chokidar": "^3.5.3",
@@ -90,12 +90,12 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@jest/globals": "^29.6.1",
-    "@jest/types": "^29.6.1",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@jest/globals": "^29.7.0",
+    "@jest/types": "^29.6.3",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
@@ -132,7 +132,7 @@
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
     "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",
-    "build-esm": "swc src -d ./dist",
+    "build-esm": "swc -d ./dist --strip-leading-paths src",
     "build-esm-watch": "pnpm run build-esm --watch",
     "build-types": "tsc -P tsconfig.types.json",
     "build-types-watch": "pnpm run build-types --watch",

package/src/_core.scss

@@ -13,6 +13,7 @@
 @forward "icon/icon" as icon-*;
 @forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
+@forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;
 @forward "badge/badge" as badge-*;
 @forward "tabs/tabs" as tabs-*;
@@ -21,7 +22,6 @@
 @forward "table/table" as table-*;
 @forward "app-bar/app-bar" as app-bar-*;
 @forward "responsive-item/responsive-item" as responsive-item-*;
-@forward "overlay/overlay" as overlay-*;
 @forward "card/card" as card-*;
 @forward "link/link" as link-*;
 @forward "list/list" as list-*;
@@ -361,53 +361,59 @@ $_layer-order: (
   @include typography.typography-variables;
 }
 
-@mixin styles {
-  @include css-reset;
-
-  @layer #{$_layer-order};
-  @include css-utils;
-
-  @include app-bar.styles;
-  @include avatar.styles;
-  @include badge.styles;
-  @include box.styles;
-  @include button.styles;
-  @include card.styles;
-  @include chip.styles;
-  @include dialog.styles;
-  @include divider.styles;
-  @include draggable.styles;
-  @include expansion-panel.styles;
-  @include form.styles;
-  @include icon.styles;
-  @include interaction.styles;
-  @include layout.styles;
-  @include link.styles;
-  @include list.styles;
-  @include menu.styles;
-  @include overlay.styles;
-  @include progress.styles;
-  @include responsive-item.styles;
-  @include segmented-button.styles;
-  @include sheet.styles;
-  @include snackbar.styles;
-  @include table.styles;
-  @include tabs.styles;
-  @include tooltip.styles;
-  @include transition.transition-styles;
-  @include tree.styles;
-  @include typography.typography-styles;
-  @include window-splitter.styles;
+@mixin styles(
+  $disable-layer: false,
+  $disable-layer-order: $disable-layer,
+  $disable-reset: false,
+  $disable-css-utils: false
+) {
+  @if not $disable-layer-order {
+    @layer #{$_layer-order};
+  }
+  @if not $disable-reset {
+    @include css-reset;
+  }
+  @if not $disable-css-utils {
+    @include css-utils($disable-layer);
+  }
+
+  @include app-bar.styles($disable-layer);
+  @include avatar.styles($disable-layer);
+  @include badge.styles($disable-layer);
+  @include box.styles($disable-layer);
+  @include button.styles($disable-layer);
+  @include card.styles($disable-layer);
+  @include chip.styles($disable-layer);
+  @include dialog.styles($disable-layer);
+  @include divider.styles($disable-layer);
+  @include draggable.styles($disable-layer);
+  @include expansion-panel.styles($disable-layer);
+  @include form.styles($disable-layer);
+  @include icon.styles($disable-layer);
+  @include interaction.styles($disable-layer);
+  @include layout.styles($disable-layer);
+  @include link.styles($disable-layer);
+  @include list.styles($disable-layer);
+  @include menu.styles($disable-layer);
+  @include overlay.styles($disable-layer);
+  @include progress.styles($disable-layer);
+  @include responsive-item.styles($disable-layer);
+  @include segmented-button.styles($disable-layer);
+  @include sheet.styles($disable-layer);
+  @include snackbar.styles($disable-layer);
+  @include table.styles($disable-layer);
+  @include tabs.styles($disable-layer);
+  @include tooltip.styles($disable-layer);
+  @include transition.transition-styles($disable-layer);
+  @include tree.styles($disable-layer);
+  @include typography.typography-styles($disable-layer);
+  @include window-splitter.styles($disable-layer);
 
   @if not theme.$disable-default-root-theme {
     :root {
       @include variables;
 
-      @if not
-        theme.$disable-default-system-theme and
-        theme.$color-scheme ==
-        system
-      {
+      @if theme.$color-scheme == system {
         @media (prefers-color-scheme: dark) {
           @include use-dark-theme;
         }

package/src/badge/_badge.scss

@@ -69,31 +69,35 @@ $variables: (
 }
 
 @mixin use-light-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
-      $light-theme-greyscale-background-color
-    );
-  }
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $light-theme-greyscale-color);
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
+      $dark-theme-greyscale-background-color
+    {
+      @include set-var(
+        greyscale-background-color,
+        $light-theme-greyscale-background-color
+      );
+    }
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $light-theme-greyscale-color);
+    }
   }
 }
 
 @mixin use-dark-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
       $dark-theme-greyscale-background-color
-    );
-  }
+    {
+      @include set-var(
+        greyscale-background-color,
+        $dark-theme-greyscale-background-color
+      );
+    }
 
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    }
   }
 }
 

package/src/button/__tests__/__snapshots__/Button.tsx.snap

@@ -25,7 +25,7 @@ exports[`Button floating action buttons should allow for responsive icon with la
     favorite
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-phone-sr-only"
+    class="rmd-phone-sr-only"
   >
     Label
   </span>

package/src/form/MenuItemInputToggle.tsx

@@ -11,11 +11,11 @@ import { ListItem } from "../list/ListItem.js";
 import {
   type ListItemAddonPosition,
   type ListItemAddonType,
+  type ListItemChildrenTextProps,
   type ListItemHeight,
 } from "../list/types.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import {
   type IndeterminateCheckboxProps,
   type InputToggleIconProps,
@@ -23,31 +23,16 @@ import {
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { SwitchTrack } from "./SwitchTrack.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
+import {
+  menuItemInputToggle,
+  menuItemInputToggleBall,
+  menuItemInputToggleIcon,
+  menuItemInputToggleTrack,
+} from "./menuItemInputToggleStyles.js";
 
 const noop = (): void => {
   // do nothing
 };
-const styles = bem("rmd-menu-item-input-toggle");
-
-/** @remarks \@since 6.0.0 */
-export interface MenuItemInputToggleClassNameOptions {
-  className?: string;
-  type: "radio" | "checkbox" | "switch";
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function menuItemInputToggle(
-  options: MenuItemInputToggleClassNameOptions
-): string {
-  const { className, type } = options;
-  return cnb(
-    `rmd-${type}-menu-item`,
-    styles({ switch: type === "switch" }),
-    className
-  );
-}
 
 /**
  * @remarks \@since 6.0.0
@@ -60,7 +45,8 @@ export type MenuItemInputToggleCheckedCallback = (
 /** @remarks \@since 2.8.0 */
 export interface BaseMenuItemInputToggleProps
   extends HTMLAttributes<HTMLLIElement>,
-    InputToggleIconProps {
+    InputToggleIconProps,
+    ListItemChildrenTextProps {
   checked: boolean;
   onCheckedChange: MenuItemInputToggleCheckedCallback;
 
@@ -95,12 +81,6 @@ export interface BaseMenuItemInputToggleProps
   /** @defaultValue `"auto"` */
   height?: ListItemHeight;
 
-  /** @defaultValue `false` */
-  multiline?: boolean;
-
-  /** @defaultValue `false` */
-  disableTextChildren?: boolean;
-
   /** @defaultValue `false` */
   iconAfter?: boolean;
 
@@ -199,41 +179,43 @@ export const MenuItemInputToggle = forwardRef<
   const id = useEnsuredId(propId, "menu-item");
 
   let icon = propIcon;
-  if (typeof propIcon === "undefined") {
-    if (type === "switch") {
-      icon = (
-        <SwitchTrack
-          style={trackStyle}
-          {...trackProps}
-          className={cnb(
-            styles("track"),
-            trackClassName,
-            trackProps?.className
-          )}
-          active={checked}
-          ballProps={ballProps}
-          ballStyle={ballStyle}
-          ballClassName={cnb(styles("ball"), ballClassName)}
-        />
-      );
-    } else {
-      icon = (
-        <InputToggleIcon
-          style={iconStyle}
-          disableEm
-          {...iconProps}
-          className={cnb(styles("icon"), iconClassName, iconProps?.className)}
-          size={size}
-          type={type}
-          checked={checked}
-          disabled={disabled}
-          icon={propIcon}
-          checkedIcon={checkedIcon}
-          indeterminate={indeterminate}
-          indeterminateIcon={indeterminateIcon}
-        />
-      );
-    }
+  if (type === "switch") {
+    icon = (
+      <SwitchTrack
+        style={trackStyle}
+        {...trackProps}
+        className={cnb(
+          menuItemInputToggleTrack(),
+          trackClassName,
+          trackProps?.className
+        )}
+        active={checked}
+        ballProps={ballProps}
+        ballStyle={ballStyle}
+        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}
+      />
+    );
+  } else {
+    icon = (
+      <InputToggleIcon
+        style={iconStyle}
+        disableEm
+        {...iconProps}
+        className={cnb(
+          menuItemInputToggleIcon(),
+          iconClassName,
+          iconProps?.className
+        )}
+        size={size}
+        type={type}
+        checked={checked}
+        disabled={disabled}
+        icon={propIcon}
+        checkedIcon={checkedIcon}
+        indeterminate={indeterminate}
+        indeterminateIcon={indeterminateIcon}
+      />
+    );
   }
 
   let leftAddon: ReactNode;

package/src/form/__tests__/MenuItemCheckbox.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef } from "react";
+import { rmdRender, screen } from "../../test-utils/index.js";
+import { type MenuItemCheckboxProps } from "../MenuItemInputToggle.js";
+import { MenuItemCheckbox } from "../MenuItemCheckbox.js";
+
+describe("MenuItemCheckbox", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLLIElement>();
+    const props = {
+      ref,
+      checked: false,
+      onCheckedChange: jest.fn(),
+      children: "Checkbox",
+    } as const;
+
+    const { rerender } = rmdRender(<MenuItemCheckbox {...props} />);
+
+    const element = screen.getByRole("menuitemcheckbox", { name: "Checkbox" });
+    expect(ref.current).toBeInstanceOf(HTMLLIElement);
+    expect(ref.current).toBe(element);
+    expect(element).toMatchSnapshot();
+
+    rerender(
+      <MenuItemCheckbox
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(element).toMatchSnapshot();
+  });
+
+  it("should allow for a custom unchecked and checked icon", async () => {
+    const props: MenuItemCheckboxProps = {
+      icon: null,
+      checkedIcon: <span data-testid="checked" />,
+      iconAfter: true,
+      children: "Checkbox",
+      checked: false,
+      onCheckedChange: jest.fn(),
+    };
+
+    const { rerender } = rmdRender(<MenuItemCheckbox {...props} />);
+
+    const element = screen.getByRole("menuitemcheckbox", { name: "Checkbox" });
+    expect(element).toMatchSnapshot();
+    expect(element.querySelector(".rmd-icon")).toBeNull();
+
+    rerender(<MenuItemCheckbox {...props} checked />);
+    expect(element).toMatchSnapshot();
+  });
+});

package/src/form/__tests__/MenuItemRadio.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef } from "react";
+import { rmdRender, screen } from "../../test-utils/index.js";
+import { type MenuItemRadioProps } from "../MenuItemInputToggle.js";
+import { MenuItemRadio } from "../MenuItemRadio.js";
+
+describe("MenuItemRadio", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLLIElement>();
+    const props = {
+      ref,
+      checked: false,
+      onCheckedChange: jest.fn(),
+      children: "Radio",
+    } as const;
+
+    const { rerender } = rmdRender(<MenuItemRadio {...props} />);
+
+    const element = screen.getByRole("menuitemradio", { name: "Radio" });
+    expect(ref.current).toBeInstanceOf(HTMLLIElement);
+    expect(ref.current).toBe(element);
+    expect(element).toMatchSnapshot();
+
+    rerender(
+      <MenuItemRadio
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(element).toMatchSnapshot();
+  });
+
+  it("should allow for a custom unchecked and checked icon", async () => {
+    const props: MenuItemRadioProps = {
+      icon: null,
+      checkedIcon: <span data-testid="checked" />,
+      iconAfter: true,
+      children: "Radio",
+      checked: false,
+      onCheckedChange: jest.fn(),
+    };
+
+    const { rerender } = rmdRender(<MenuItemRadio {...props} />);
+
+    const element = screen.getByRole("menuitemradio", { name: "Radio" });
+    expect(element).toMatchSnapshot();
+    expect(element.querySelector(".rmd-icon")).toBeNull();
+
+    rerender(<MenuItemRadio {...props} checked />);
+    expect(element).toMatchSnapshot();
+  });
+});