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

package/src/icon/__tests__/__snapshots__/MaterialIcon.tsx.snap

@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MaterialIcon should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons custom-class-name"
-  data-testid="icon"
-  style="color: white;"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should support overriding the icon family through the MATERIAL_CONFIG 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should support overriding the icon family through the MATERIAL_CONFIG 2`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons-round"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should support overriding the icon family through the MATERIAL_CONFIG 3`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons-two-tone"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should support overriding the icon family through the family prop 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should support overriding the icon family through the family prop 2`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons-round"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialIcon should support overriding the icon family through the family prop 3`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons-two-tone"
-  data-testid="icon"
->
-  air
-</span>
-`;

package/src/icon/__tests__/__snapshots__/MaterialSymbol.tsx.snap

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MaterialSymbol should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--symbol material-symbols-outlined"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialSymbol should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--symbol material-symbols-outlined custom-class-name"
-  data-testid="icon"
-  style="color: white;"
->
-  air
-</span>
-`;
-
-exports[`MaterialSymbol should support overriding the symbol configuration through the MATERIAL_CONFIG object 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--symbol material-symbols-outlined"
-  data-testid="icon"
->
-  air
-</span>
-`;
-
-exports[`MaterialSymbol should support overriding the symbol configuration through the MATERIAL_CONFIG object 2`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--symbol material-symbols-rounded"
-  data-testid="icon"
->
-  air
-</span>
-`;

package/src/icon/__tests__/__snapshots__/SVGIcon.tsx.snap

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SVGIcon should render correctly 1`] = `
-<div>
-  <svg
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--svg"
-    focusable="false"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-    />
-  </svg>
-</div>
-`;
-
-exports[`SVGIcon should render correctly 2`] = `
-<div>
-  <svg
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--svg rmd-icon--dense"
-    focusable="false"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-    />
-  </svg>
-</div>
-`;
-
-exports[`SVGIcon should support the use prop 1`] = `
-<div>
-  <svg
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--svg"
-    focusable="false"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <use
-      xlink:href="#some-sprite"
-    />
-  </svg>
-</div>
-`;

package/src/icon/__tests__/__snapshots__/TextIconSpacing.tsx.snap

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextIconSpacing should render the icon after the children if the iconAfter prop is enabled 1`] = `
-<div>
-  <span
-    data-testid="span"
-  />
-  <i
-    class="rmd-icon--after"
-    data-testid="icon"
-  />
-</div>
-`;
-
-exports[`TextIconSpacing should render the icon before the children by default 1`] = `
-<div>
-  <i
-    class="rmd-icon--before"
-    data-testid="icon"
-  />
-  <span
-    data-testid="span"
-  />
-</div>
-`;
-
-exports[`TextIconSpacing should return the children if no icon prop is provided 1`] = `
-<div>
-  <span />
-</div>
-`;
-
-exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 1`] = `
-<div>
-  <i
-    class="rmd-icon--after"
-    data-testid="icon"
-  />
-  <span>
-    children
-  </span>
-</div>
-`;
-
-exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 2`] = `
-<div>
-  <span>
-    children
-  </span>
-  <i
-    class="rmd-icon--before"
-    data-testid="icon"
-  />
-</div>
-`;
-
-exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 3`] = `
-<div>
-  <i
-    class="rmd-icon--below"
-    data-testid="icon"
-  />
-  <span>
-    children
-  </span>
-</div>
-`;
-
-exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 4`] = `
-<div>
-  <span>
-    children
-  </span>
-  <i
-    class="rmd-icon--above"
-    data-testid="icon"
-  />
-</div>
-`;
-
-exports[`TextIconSpacing should wrap the icon in a span with the required classNames if the icon is not a valid react element or the forceIconWrap prop is enabled 1`] = `
-<div>
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before"
-  >
-    Some text
-  </span>
-  <div />
-</div>
-`;
-
-exports[`TextIconSpacing should wrap the icon in a span with the required classNames if the icon is not a valid react element or the forceIconWrap prop is enabled 2`] = `
-<div>
-  <span
-    class="rmd-text-icon-spacing rmd-icon--before"
-  >
-    <i />
-  </span>
-  <div />
-</div>
-`;

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

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`icon styles should support rendering as all the theme colors 1`] = `"rmd-icon rmd-icon--svg rmd-primary-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 2`] = `"rmd-icon rmd-icon--svg rmd-secondary-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 3`] = `"rmd-icon rmd-icon--svg rmd-warning-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 4`] = `"rmd-icon rmd-icon--svg rmd-success-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 5`] = `"rmd-icon rmd-icon--svg rmd-error-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 6`] = `"rmd-icon rmd-icon--svg rmd-on-primary-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 7`] = `"rmd-icon rmd-icon--svg rmd-on-secondary-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 8`] = `"rmd-icon rmd-icon--svg rmd-on-warning-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 9`] = `"rmd-icon rmd-icon--svg rmd-on-success-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 10`] = `"rmd-icon rmd-icon--svg rmd-on-error-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 11`] = `"rmd-icon rmd-icon--svg rmd-text-primary-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 12`] = `"rmd-icon rmd-icon--svg rmd-text-secondary-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 13`] = `"rmd-icon rmd-icon--svg rmd-text-hint-color"`;
-
-exports[`icon styles should support rendering as all the theme colors 14`] = `"rmd-icon rmd-icon--svg rmd-text-disabled-color"`;

package/src/icon/__tests__/styles.ts

@@ -1,28 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { type TextColor, type ThemeColor } from "../../cssUtils.js";
-import { icon } from "../styles.js";
-
-describe("icon styles", () => {
-  it("should support rendering as all the theme colors", () => {
-    const themes: (ThemeColor | TextColor)[] = [
-      "primary",
-      "secondary",
-      "warning",
-      "success",
-      "error",
-      "on-primary",
-      "on-secondary",
-      "on-warning",
-      "on-success",
-      "on-error",
-      "text-primary",
-      "text-secondary",
-      "text-hint",
-      "text-disabled",
-    ];
-
-    themes.forEach((theme) => {
-      expect(icon({ type: "svg", theme })).toMatchSnapshot();
-    });
-  });
-});

package/src/icon/_icon.scss

@@ -1,213 +0,0 @@
-@use "sass:color";
-@use "../theme/theme";
-@use "../transition/transition";
-@use "../utils";
-
-$disable-font: false !default;
-$disable-svg: false !default;
-$disable-symbol: false !default;
-$disable-dense: false !default;
-$disable-inline: false !default;
-$disable-spacing-before: false !default;
-$disable-spacing-after: false !default;
-$disable-spacing-above: false !default;
-$disable-spacing-below: false !default;
-$disable-rotator: false !default;
-
-$light-theme-color: color.adjust(#000, $lightness: 46%) !default;
-$dark-theme-color: color.adjust(#fff, $lightness: -30%) !default;
-
-$color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
-
-$size: 1.5rem !default;
-$dense-size: 1.25rem !default;
-
-$symbol-fill: 0 !default;
-$symbol-weight: 400 !default;
-$symbol-grade: 0 !default;
-$symbol-optical-size: 48 !default;
-
-$_validated-fill: utils.validate((0, 1), $symbol-fill, "$symbol-fill");
-$_validated_weight: utils.validate(
-  (100 200 300 400 500 600 700),
-  $symbol-weight,
-  "$symbol-weight"
-);
-$_validated_grade: utils.validate((-25 0 200), $symbol-grade, "$symbol-grade");
-$_validated_optical-size: utils.validate(
-  (20 24 40 48),
-  $symbol-optical-size,
-  "$symbol-optical-size"
-);
-
-$spacing: 0.5rem !default;
-
-$rotate-from: 0deg !default;
-$rotate-to: 180deg !default;
-$rotate-duration: transition.$linear-duration !default;
-
-$variables: (
-  color,
-  size,
-  spacing,
-  rotate-from,
-  rotate-to,
-  symbol-fill,
-  symbol-grade,
-  symbol-weight,
-  symbol-optical-size
-);
-
-// shouldn't really use react-md without icons though...
-$_disable-icons: $disable-font and $disable-svg and $disable-symbol;
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "icon");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "icon")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin use-light-theme {
-  @if not $_disable-icons {
-    @include set-var(color, $light-theme-color);
-  }
-}
-
-@mixin use-dark-theme {
-  @if not $_disable-icons {
-    @include set-var(color, $dark-theme-color);
-  }
-}
-
-@mixin dense {
-  @if $dense-size {
-    @include set-var(size, $dense-size);
-  }
-}
-
-@mixin variables {
-  @if not $_disable-icons {
-    @include set-var(color, $color);
-    @include set-var(size, $size);
-    @include set-var(spacing, $spacing);
-  }
-
-  @if not $disable-symbol {
-    @include set-var(symbol-fill, $symbol-fill);
-    @include set-var(symbol-grade, $symbol-grade);
-    @include set-var(symbol-weight, $symbol-weight);
-    @include set-var(symbol-optical-size, $symbol-optical-size);
-  }
-
-  @if not $disable-rotator {
-    @include set-var(rotate-from, $rotate-from);
-    @include set-var(rotate-to, $rotate-to);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $_disable-icons {
-    @include utils.optional-layer(icon, $disable-layer) {
-      @include theme.default-system-theme {
-        @include use-dark-theme;
-      }
-
-      .rmd-icon {
-        @include use-var(font-size, size);
-        @include use-var(color);
-
-        // you normally don't want icons to shrink in flex containers.
-        // update the icon manually instead.
-        flex-shrink: 0;
-        user-select: none;
-
-        @if not $disable-font {
-          &--font {
-            text-align: center;
-          }
-        }
-
-        @if not $disable-svg {
-          &--svg {
-            fill: currentcolor;
-            height: 1em;
-            width: 1em;
-          }
-        }
-
-        @if not $disable-symbol {
-          &--symbol {
-            font-variation-settings:
-              "FILL" get-var(symbol-fill),
-              "wght" get-var(symbol-weight),
-              "GRAD" get-var(symbol-grade),
-              "opsz" get-var(symbol-optical-size);
-          }
-        }
-
-        @if not $disable-inline {
-          &--vab {
-            vertical-align: bottom;
-          }
-        }
-
-        @if not $disable-spacing-before {
-          &--before {
-            @include utils.auto-rtl(margin-right, get-var(spacing), 0);
-          }
-        }
-
-        @if not $disable-spacing-after {
-          &--after {
-            @include utils.auto-rtl(margin-left, get-var(spacing), 0);
-          }
-        }
-
-        @if not $disable-spacing-above {
-          &--above {
-            @include use-var(margin-bottom, spacing);
-          }
-        }
-
-        @if not $disable-spacing-below {
-          &--below {
-            @include use-var(margin-top, spacing);
-          }
-        }
-
-        @if not $disable-dense {
-          &--dense {
-            @include set-var(size, $dense-size);
-          }
-        }
-      }
-    }
-
-    @if not $disable-rotator {
-      .rmd-icon-rotator {
-        transform: rotate(get-var(rotate-from));
-
-        &--animate {
-          transition: transform $rotate-duration linear;
-        }
-
-        &--rotated {
-          transform: rotate(get-var(rotate-to));
-        }
-      }
-    }
-  }
-}

package/src/interaction/__tests__/UserInteractionModeProvider.tsx

@@ -1,121 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { type ReactElement } from "react";
-import { fireEvent, render, screen } from "../../test-utils/index.js";
-
-import {
-  UserInteractionModeProvider,
-  useUserInteractionMode,
-} from "../UserInteractionModeProvider.js";
-
-describe("UserInteractionModeProvider", () => {
-  it("should throw an error if multiple instances are mounted", () => {
-    const error = jest.spyOn(console, "error");
-    error.mockImplementation(() => {});
-    expect(() =>
-      render(
-        <UserInteractionModeProvider>
-          <UserInteractionModeProvider>
-            <span />
-          </UserInteractionModeProvider>
-        </UserInteractionModeProvider>
-      )
-    ).toThrow(
-      "The `UserInteractionModeProvider` cannot be mounted multiple times."
-    );
-
-    error.mockRestore();
-  });
-
-  it("should update the document.body's className appropriately", () => {
-    render(
-      <UserInteractionModeProvider>
-        <span />
-      </UserInteractionModeProvider>
-    );
-
-    expect(document.body.className).toContain("mouse-mode");
-
-    fireEvent.keyDown(window);
-    expect(document.body.className).toContain("keyboard-mode");
-
-    fireEvent.mouseDown(window);
-    expect(document.body.className).toContain("mouse-mode");
-
-    fireEvent.touchStart(window);
-    expect(document.body.className).toContain("touch-mode");
-  });
-
-  it("should swap from touch back to mouse only when the mousemove event has not been triggered after a touchstart event", async () => {
-    // this is really a test that should be done in a browser.
-    const now = jest
-      .spyOn(Date, "now")
-      // first touchstart
-      .mockImplementationOnce(() => 0)
-      // "fake" mousemove after touchstart
-      .mockImplementationOnce(() => 9)
-      // "real" mousemove
-      .mockImplementationOnce(() => 1300)
-      // second touchstart
-      .mockImplementationOnce(() => 1500)
-      // forth touchstart ("mousemove" after contextmenu never calls Date.now()
-      // due to short circuiting)
-      .mockImplementationOnce(() => 4000)
-      // "fake" mousemove after touchstart
-      .mockImplementationOnce(() => 4003)
-      // "real" mousemove
-      .mockImplementationOnce(() => 6000);
-
-    render(
-      <UserInteractionModeProvider>
-        <span />
-      </UserInteractionModeProvider>
-    );
-    expect(document.body.className).toContain("mouse-mode");
-
-    fireEvent.touchStart(window);
-    fireEvent.mouseMove(window);
-    expect(document.body.className).toContain("touch-mode");
-
-    fireEvent.mouseMove(window);
-    expect(document.body.className).toContain("mouse-mode");
-
-    fireEvent.touchStart(window);
-    expect(document.body.className).toContain("touch-mode");
-
-    fireEvent.contextMenu(window);
-    fireEvent.mouseMove(window);
-    expect(document.body.className).toContain("touch-mode");
-
-    fireEvent.touchStart(window);
-    fireEvent.mouseMove(window);
-    expect(document.body.className).toContain("touch-mode");
-
-    fireEvent.mouseMove(window);
-    expect(document.body.className).toContain("mouse-mode");
-
-    now.mockRestore();
-  });
-
-  it("should allow for a child component to access the UserInteractionMode with the useUserInteractionMode hook", () => {
-    function Test(): ReactElement {
-      const mode = useUserInteractionMode();
-
-      return <span data-testid="mode">{mode}</span>;
-    }
-
-    render(
-      <UserInteractionModeProvider>
-        <Test />
-      </UserInteractionModeProvider>
-    );
-
-    const mode = screen.getByTestId("mode");
-    expect(mode.textContent).toBe("mouse");
-
-    fireEvent.keyDown(window);
-    expect(mode.textContent).toBe("keyboard");
-
-    fireEvent.touchStart(window);
-    expect(mode.textContent).toBe("touch");
-  });
-});