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

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();
+  });
+});

package/src/form/__tests__/__snapshots__/FileInput.tsx.snap

@@ -12,7 +12,7 @@ exports[`FileInput should apply the correct styling, HTMLAttributes, and allow a
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -37,7 +37,7 @@ exports[`FileInput should apply the correct styling, HTMLAttributes, and allow a
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -63,7 +63,7 @@ exports[`FileInput should render as an icon button unless children are provided
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -87,7 +87,7 @@ exports[`FileInput should render as an icon button unless children are provided
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -165,7 +165,7 @@ exports[`FileInput should support all the  button themes 1`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -189,7 +189,7 @@ exports[`FileInput should support all the  button themes 2`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -213,7 +213,7 @@ exports[`FileInput should support all the  button themes 3`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -237,7 +237,7 @@ exports[`FileInput should support all the  button themes 4`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -261,7 +261,7 @@ exports[`FileInput should support all the  button themes 5`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -285,7 +285,7 @@ exports[`FileInput should support all the  button themes 6`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -309,7 +309,7 @@ exports[`FileInput should support all the  button themes 7`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -333,7 +333,7 @@ exports[`FileInput should support all the  button themes 8`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -357,7 +357,7 @@ exports[`FileInput should support all the  button themes 9`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -381,7 +381,7 @@ exports[`FileInput should support all the  button themes 10`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -405,7 +405,7 @@ exports[`FileInput should support all the  button themes 11`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -429,7 +429,7 @@ exports[`FileInput should support all the  button themes 12`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -453,7 +453,7 @@ exports[`FileInput should support all the  button themes 13`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -477,7 +477,7 @@ exports[`FileInput should support all the  button themes 14`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -501,7 +501,7 @@ exports[`FileInput should support all the  button themes 15`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -525,7 +525,7 @@ exports[`FileInput should support all the  button themes 16`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -549,7 +549,7 @@ exports[`FileInput should support all the  button themes 17`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -573,7 +573,7 @@ exports[`FileInput should support all the  button themes 18`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -598,7 +598,7 @@ exports[`FileInput should update the default SrOnly text to be phoneOnly when th
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-phone-sr-only"
+    class="rmd-phone-sr-only"
   >
     Upload
   </span>

package/src/form/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemCheckbox should allow for a custom unchecked and checked icon 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemcheckbox"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  />
+</li>
+`;
+
+exports[`MenuItemCheckbox should allow for a custom unchecked and checked icon 2`] = `
+<li
+  aria-checked="true"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemcheckbox"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-input-toggle--active rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      data-testid="checked"
+    />
+  </span>
+</li>
+`;
+
+exports[`MenuItemCheckbox should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r0:"
+  role="menuitemcheckbox"
+  tabindex="-1"
+>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      check_box_outline_blank
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+</li>
+`;
+
+exports[`MenuItemCheckbox should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle custom-class-name"
+  id="menu-item-:r0:"
+  role="menuitemcheckbox"
+  style="color: white;"
+  tabindex="-1"
+>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      check_box_outline_blank
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+</li>
+`;

package/src/form/__tests__/__snapshots__/MenuItemRadio.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemRadio should allow for a custom unchecked and checked icon 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemradio"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  />
+</li>
+`;
+
+exports[`MenuItemRadio should allow for a custom unchecked and checked icon 2`] = `
+<li
+  aria-checked="true"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemradio"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-input-toggle--active rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      data-testid="checked"
+    />
+  </span>
+</li>
+`;
+
+exports[`MenuItemRadio should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r0:"
+  role="menuitemradio"
+  tabindex="-1"
+>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      radio_button_unchecked
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+</li>
+`;
+
+exports[`MenuItemRadio should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle custom-class-name"
+  id="menu-item-:r0:"
+  role="menuitemradio"
+  style="color: white;"
+  tabindex="-1"
+>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      radio_button_unchecked
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+</li>
+`;