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

package/src/_utils.scss

@@ -1,348 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-
-$disable-rtl: false !default;
-$disable-validation: false !default;
-// :has css selectors will arrive in firefox 121 so the browsers I support will
-// also support it by the time of the react-md release. allowing this to be
-// disabled just to be safe though
-$disable-has-selectors: false !default;
-// I'm reducing the required CSS for `:focus` styles by switching to
-// `:focus-visible` instead of `.keyboard-only .some-selector:focus` but there
-// are some things I don't like as much when switching from mouse to keyboard.
-// Defaulting to `:focus-visible`, but allowing the keyboard-only styles as well
-// if users are more familiar with it
-$disable-focus-visible: false !default;
-$temporary-element-z-index: 30 !default;
-
-$_swappable-positions: top right bottom left;
-$_swappable-position-prefixes: border margin padding;
-$_swappable-properties: text-align;
-
-@function scrollbar-size() {
-  @return var(--rmd-scrollbar-size, 0px);
-}
-
-/// Replace `$search` with `$replace` in `$string`
-///
-/// @author Hugo Giraudel
-/// @access private
-/// @param {String} string - Initial string
-/// @param {String} search - Substring to replace
-/// @param {String} replace - New value
-/// @return {String} - Updated string
-/// @link https://css-tricks.com/snippets/sass/str-replace-function Source from CSS Tricks
-@function str-replace($string, $search, $replace) {
-  $index: string.index($string, $search);
-
-  @if $index {
-    @return string.slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        string.slice($string, $index + string.length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}
-
-@function negate-var($css-variable) {
-  @return calc(-1 * #{$css-variable});
-}
-
-@function validate($list-or-map, $key-or-value, $error-message) {
-  $type: meta.type-of($list-or-map);
-  $is-map: $type == map;
-  $is-list: $type == list;
-
-  @if $disable-validation {
-    @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
-  }
-
-  @if not $is-map and not $is-list {
-    @error 'Unable to validate anything except for lists and maps at this time. Received: #{$list-or-map}.';
-  }
-
-  $choices: if($is-map, map.keys($list-or-map), $list-or-map);
-  @if not list.index($choices, $key-or-value) {
-    @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
-  }
-
-  @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
-}
-
-@function get-var-name($variables, $name, $group) {
-  @if $group == icon {
-    @if $name == symbol-grade {
-      @return --rmd-symbol-grad;
-    }
-    @if $name == symbol-weight {
-      @return --rmd-symbol-wght;
-    }
-    @if $name == optical-size {
-      @return --rmd-symbol-opsz;
-    }
-  }
-  @if $group == name and $name == fab-offset {
-    @return --rmd-fab-offset;
-  }
-
-  @if $group == form {
-    @if $name ==
-      addon-top or
-      $name ==
-      addon-margin-top or
-      $name ==
-      active-color or
-      $name ==
-      focus-color
-    {
-      @return --rmd-form-#{$name};
-    }
-  }
-  @if $group == interaction and $name == background-color {
-    @return --rmd-interaction-#{$name};
-  }
-
-  @if $group == list {
-    $updated: str-replace(
-      str-replace($name, "horizontal-padding", "padding-h"),
-      "vertical-padding",
-      "padding-v"
-    );
-    @if $updated != $name {
-      @return --rmd-list-#{$name};
-    }
-  }
-
-  @if $group == snackbar and $name != offset {
-    @return --rmd-toast-#{$name};
-  }
-
-  $prefix: "";
-  @if not list.index((theme, form, interaction, transition, typography), $group)
-  {
-    $prefix: $group + "-";
-  }
-
-  @return "--rmd-" + $prefix + validate($variables, $name, $group + " var");
-}
-
-@mixin map-to-styles($map) {
-  @each $property, $value in $map {
-    @if meta.type-of($value) == map {
-      #{$property} {
-        @include map-to-styles($value);
-      }
-    } @else {
-      #{$property}: $value;
-    }
-  }
-}
-
-@mixin map-to-animation($map) {
-  @each $percentage, $styles in $map {
-    #{$percentage} {
-      @include map-to-styles($styles);
-    }
-  }
-}
-
-@mixin pseudo-element(
-  $z-index: 0,
-  $fixed: false,
-  $inset: 0,
-  $border-radius: inherit
-) {
-  border-radius: $border-radius;
-  content: "";
-  inset: $inset;
-  pointer-events: none;
-  position: if($fixed, fixed, absolute);
-  z-index: $z-index;
-}
-
-@mixin _sr-only-focusable {
-  &:active,
-  &:focus {
-    clip: auto;
-    clip-path: none;
-    height: auto;
-    margin: auto;
-    overflow: visible;
-    white-space: normal;
-    width: auto;
-  }
-}
-
-@mixin sr-only($focusable: false, $focus-selector: "&--focusable") {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-
-  @if $focusable {
-    @if not $focus-selector {
-      @include _sr-only-focusable;
-    } @else {
-      #{$focus-selector} {
-        @include _sr-only-focusable;
-      }
-    }
-  }
-}
-
-@mixin hide-scrollbar {
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    height: 0;
-    width: 0;
-  }
-}
-
-@mixin optional-css-modules(
-  $class-name,
-  $css-modules: false,
-  $parent-selector: true
-) {
-  $selector: if($css-modules, ":global #{$class-name} :local", $class-name);
-  $selector: if($parent-selector, "#{$selector} &", $selector);
-
-  #{$selector} {
-    @content;
-  }
-}
-
-@mixin rtl {
-  @if not $disable-rtl {
-    [dir="rtl"] & {
-      @content;
-    }
-  }
-}
-
-@function _swap-position($property) {
-  $prefix: "";
-  $position: $property;
-  @each $valid-prefix in $_swappable-position-prefixes {
-    @if string.index($property, "#{$valid-prefix}-") {
-      $prefix: "#{$valid-prefix}-";
-      $position: str-replace($property, $prefix, "");
-    }
-  }
-
-  @if not list.index($_swappable-positions, $position) {
-    @error "Invalid swappable position: '#{$position}'. Choose one of #{$_swappable-positions}";
-  }
-
-  $next-position: bottom;
-  @if $position == left {
-    $next-position: right;
-  } @else if $position == right {
-    $next-position: left;
-  } @else if $position == bottom {
-    $next-position: top;
-  }
-
-  @return "#{$prefix}#{$next-position}";
-}
-
-@mixin auto-rtl-group($styles, $swapped-styles: ()) {
-  @include map-to-styles($styles);
-  @include rtl {
-    @each $property, $value in $styles {
-      $inversed-property: _swap-position($property);
-      $inversed-value: auto;
-      @if map.has-key($swapped-styles, $property) {
-        $inversed-value: map.get($swapped-styles, $property);
-      } @else if map.has-key($styles, $inversed-property) {
-        $inversed-value: map.get($swapped-styles, $inversed-property);
-      }
-
-      #{$property}: #{$inversed-value};
-      #{$inversed-property}: #{$value};
-
-      @content;
-    }
-  }
-}
-
-@mixin auto-rtl($property, $value, $swapped-value: null) {
-  @include rtl {
-    @if list.index($_swappable-properties, $property) {
-      $swapped-property-value: $swapped-value or _swap-position($value);
-      #{$property}: #{$swapped-property-value};
-    } @else {
-      $inversed-property: _swap-position($property);
-      @if not $swapped-value {
-        $swapped-value: auto;
-
-        @each $prefix in $_swappable-position-prefixes {
-          @if string.index($property, "#{$prefix}-") {
-            $swapped-value: 0;
-          }
-        }
-      }
-
-      #{$property}: #{$swapped-value};
-      #{$inversed-property}: #{$value};
-    }
-    @content;
-  }
-
-  #{$property}: #{$value};
-}
-
-@mixin keyboard-only($css-modules: false, $parent-selector: true) {
-  @include optional-css-modules(
-    ".keyboard-mode",
-    $css-modules,
-    $parent-selector
-  ) {
-    @content;
-  }
-}
-
-@mixin mouse-only($css-modules: false) {
-  @include optional-css-modules(".mouse-mode", $css-modules) {
-    @content;
-  }
-}
-
-@mixin touch-only($css-modules: false) {
-  @include optional-css-modules(".touch-mode", $css-modules) {
-    @content;
-  }
-}
-
-@mixin mouse-hover($wrap-in-hover: true) {
-  @media (hover: hover) and (pointer: fine) {
-    @if $wrap-in-hover {
-      &:hover {
-        @content;
-      }
-    } @else {
-      @content;
-    }
-  }
-}
-
-@mixin optional-layer($name, $disabled) {
-  @if $disabled {
-    @content;
-  } @else {
-    @layer #{$name} {
-      @content;
-    }
-  }
-}

package/src/app-bar/__tests__/AppBar.tsx

@@ -1,121 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import {
-  AppBar,
-  appBar,
-  type AppBarHeight,
-  type AppBarPosition,
-} from "../AppBar.js";
-import { AppBarTitle } from "../AppBarTitle.js";
-
-describe("AppBar", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "app-bar",
-      ref,
-      children: <AppBarTitle>My Title</AppBarTitle>,
-    } as const;
-
-    const { rerender } = render(<AppBar {...props} />);
-    let appBar = screen.getByTestId("app-bar");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(appBar);
-    expect(appBar).toMatchSnapshot();
-
-    rerender(
-      <AppBar
-        {...props}
-        style={{ backgroundColor: "orange" }}
-        className="custom-class-name"
-      />
-    );
-    appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} position="fixed" />);
-    appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} position="fixed" disableElevation />);
-    appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} position="sticky" />);
-    appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} position="sticky" disableElevation />);
-    appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} stacked />);
-    appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-  });
-
-  it("should allow for different theme colors", () => {
-    const props = {
-      "data-testid": "app-bar",
-    } as const;
-
-    const { rerender } = render(<AppBar {...props} />);
-    const appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} theme="secondary" />);
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} theme="surface" />);
-    expect(appBar).toMatchSnapshot();
-
-    rerender(<AppBar {...props} theme="clear" />);
-    expect(appBar).toMatchSnapshot();
-  });
-
-  it("should allow the app bar to be fixed to the top or bottom of the page", () => {
-    const positions: readonly AppBarPosition[] = ["top", "bottom"];
-    const props = {
-      "data-testid": "app-bar",
-      position: "fixed",
-    } as const;
-    const { rerender } = render(<AppBar {...props} />);
-    const appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    positions.forEach((position) => {
-      rerender(<AppBar {...props} pagePosition={position} />);
-      expect(appBar).toMatchSnapshot();
-    });
-  });
-
-  it("should allow for different heights", () => {
-    const heights: readonly AppBarHeight[] = [
-      "normal",
-      "prominent",
-      "prominent-dense",
-      "dense",
-      "auto",
-    ];
-    const props = {
-      "data-testid": "app-bar",
-    } as const;
-
-    const { rerender } = render(<AppBar {...props} />);
-    const appBar = screen.getByTestId("app-bar");
-    expect(appBar).toMatchSnapshot();
-
-    heights.forEach((height) => {
-      rerender(<AppBar {...props} height={height} />);
-      expect(appBar).toMatchSnapshot();
-    });
-  });
-
-  describe("styling utils", () => {
-    it("should be callback without any arguments", () => {
-      expect(appBar()).toMatchSnapshot();
-    });
-  });
-});

package/src/app-bar/__tests__/AppBarTitle.tsx

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { appBarTitle, AppBarTitle } from "../AppBarTitle.js";
-
-describe("AppBarTitle", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLHeadingElement>();
-    const { rerender } = render(<AppBarTitle ref={ref}>Title</AppBarTitle>);
-
-    const title = screen.getByRole("heading", { name: "Title" });
-    expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
-    expect(ref.current).toBe(title);
-    expect(title).toMatchSnapshot();
-
-    rerender(
-      <AppBarTitle style={{ color: "aqua" }} className="custom-class-name">
-        Title
-      </AppBarTitle>
-    );
-    expect(title).toMatchSnapshot();
-
-    rerender(<AppBarTitle keyline="nav">Title</AppBarTitle>);
-    expect(title).toMatchSnapshot();
-
-    rerender(<AppBarTitle keyline="list">Title</AppBarTitle>);
-    expect(title).toMatchSnapshot();
-
-    rerender(<AppBarTitle textOverflow="allow">Title</AppBarTitle>);
-    expect(title).toMatchSnapshot();
-  });
-
-  describe("styling utils", () => {
-    it("should be callable without any arguments", () => {
-      expect(appBarTitle()).toMatchSnapshot();
-    });
-  });
-});

package/src/app-bar/__tests__/__snapshots__/AppBar.tsx.snap

@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AppBar should allow for different heights 1`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different heights 2`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different heights 3`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--prominent rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different heights 4`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--prominent-dense rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different heights 5`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--dense rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different heights 6`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--auto rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different theme colors 1`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different theme colors 2`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-secondary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different theme colors 3`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--surface rmd-box rmd-box--padded rmd-box--full-width"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow for different theme colors 4`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 1`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 2`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 3`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--bottom rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
-/>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</div>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div
-  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container custom-class-name"
-  data-testid="app-bar"
-  style="background-color: orange;"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</div>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</header>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</header>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</header>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 6`] = `
-<header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</header>
-`;
-
-exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 7`] = `
-<div
-  class="rmd-app-bar rmd-app-bar--auto rmd-app-bar--stacked rmd-box rmd-box--padded rmd-box--column rmd-box--full-width rmd-background-container rmd-primary-container"
-  data-testid="app-bar"
->
-  <h6
-    class="rmd-typography rmd-typography--headline-6 rmd-nowrap rmd-ellipsis rmd-app-bar-title"
-  >
-    My Title
-  </h6>
-</div>
-`;
-
-exports[`AppBar styling utils should be callback without any arguments 1`] = `"rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"`;