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

package/src/segmented-button/_segmented-button.scss

@@ -1,208 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@use "../utils";
-@use "../icon/icon";
-@use "../interaction/interaction";
-@use "../typography/typography";
-@use "../transition/transition";
-@use "../theme/a11y";
-@use "../theme/colors";
-@use "../theme/theme";
-
-$disable-everything: false !default;
-$disable-selected-icon: false !default;
-
-$light-theme-color: colors.$black !default;
-$light-theme-outline-color: #79747e !default;
-$light-theme-selected-background-color: theme.get-swatch(
-  theme.$secondary-color,
-  700,
-  false,
-  color.adjust(theme.$secondary-color, $lightness: -20%)
-) !default;
-$light-theme-selected-color: a11y.contrast-color(
-  $light-theme-selected-background-color
-) !default;
-
-$dark-theme-color: colors.$white !default;
-$dark-theme-outline-color: #938f99 !default;
-$dark-theme-selected-background-color: theme.get-swatch(
-  theme.$secondary-color,
-  300,
-  false,
-  color.adjust(theme.$secondary-color, $lightness: 20%)
-) !default;
-$dark-theme-selected-color: a11y.contrast-color(
-  $dark-theme-selected-background-color
-) !default;
-
-$gap: icon.$spacing !default;
-$border-radius: 2.5rem !default;
-$min-height: 2.5rem !default;
-$min-width: 3rem !default;
-$horizontal-padding: 0.75rem !default;
-$vertical-padding: 0 !default;
-$outline-width: 0.0625rem !default;
-$outline-color: theme.get-default-color(
-  $light-theme-outline-color,
-  $dark-theme-outline-color
-) !default;
-$color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
-$selected-color: theme.get-default-color(
-  $light-theme-selected-color,
-  $dark-theme-selected-color
-) !default;
-$selected-background-color: theme.get-default-color(
-  $light-theme-selected-background-color,
-  $dark-theme-selected-background-color
-) !default;
-
-$typography-styles: typography.$button-styles !default;
-
-$variables: (
-  outline-width,
-  outline-color,
-  color,
-  selected-background-color,
-  selected-color
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "segmented-button");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin use-light-theme {
-  @if not $disable-everything {
-    @if $light-theme-outline-color != $dark-theme-outline-color {
-      @include set-var(outline-color, $light-theme-outline-color);
-    }
-
-    @if $light-theme-selected-background-color !=
-      $dark-theme-selected-background-color
-    {
-      @include set-var(
-        selected-background-color,
-        $light-theme-selected-background-color
-      );
-    }
-
-    @if $light-theme-selected-color != $dark-theme-selected-color {
-      @include set-var(selected-color, $light-theme-selected-color);
-    }
-  }
-}
-
-@mixin use-dark-theme {
-  @if not $disable-everything {
-    @if $light-theme-outline-color != $dark-theme-outline-color {
-      @include set-var(outline-color, $dark-theme-outline-color);
-    }
-
-    @if $light-theme-selected-background-color !=
-      $dark-theme-selected-background-color
-    {
-      @include set-var(
-        selected-background-color,
-        $dark-theme-selected-background-color
-      );
-    }
-
-    @if $light-theme-selected-color != $dark-theme-selected-color {
-      @include set-var(selected-color, $dark-theme-selected-color);
-    }
-  }
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(outline-width, $outline-width);
-    @include set-var(outline-color, $outline-color);
-    @include set-var(color, currentcolor);
-    @include set-var(selected-background-color, $selected-background-color);
-    @include set-var(selected-color, $selected-color);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(segmented-button, $disable-layer) {
-      .rmd-segmented-button-container {
-        display: grid;
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-
-        &--full-width {
-          width: 100%;
-        }
-      }
-
-      .rmd-segmented-button {
-        @include theme.theme-use-var(color, text-primary-color);
-        @include icon.set-var(color, currentcolor);
-        @include icon.set-var(size, 1.125rem);
-        @include utils.map-to-styles($typography-styles);
-
-        align-items: center;
-        background-color: transparent;
-        border: 0;
-        box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
-        display: inline-flex;
-        gap: $gap;
-        justify-content: center;
-        min-height: $min-height;
-        min-width: $min-width;
-        padding: $vertical-padding $horizontal-padding;
-
-        &:first-child {
-          @include utils.rtl {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: $border-radius;
-            border-top-left-radius: 0;
-            border-top-right-radius: $border-radius;
-          }
-
-          border-bottom-left-radius: $border-radius;
-          border-top-left-radius: $border-radius;
-        }
-
-        &:last-child {
-          @include utils.rtl {
-            border-bottom-left-radius: $border-radius;
-            border-bottom-right-radius: 0;
-            border-top-left-radius: $border-radius;
-            border-top-right-radius: 0;
-          }
-
-          border-bottom-right-radius: $border-radius;
-          border-top-right-radius: $border-radius;
-        }
-
-        &--selected {
-          @if not $disable-selected-icon {
-            @include transition.transition-set-var(
-              max-width,
-              icon.get-var(size)
-            );
-          }
-          @include use-var(background-color, selected-background-color);
-          @include use-var(color, selected-color);
-        }
-      }
-    }
-  }
-}

package/src/sheet/_sheet.scss

@@ -1,189 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../box-shadows";
-@use "../media-queries/media-queries";
-@use "../transition/transition";
-
-$disable-everything: false !default;
-$disable-position-left: false !default;
-$disable-position-right: false !default;
-$disable-position-bottom: false !default;
-$disable-position-top: false !default;
-
-$elevation: 2 !default;
-$raised-elevation: 16 !default;
-
-$enter-duration: transition.$enter-duration !default;
-$enter-timing-function: transition.$deceleration-timing-function !default;
-$leave-duration: transition.$leave-duration !default;
-$leave-timing-function: transition.$acceleration-timing-function !default;
-
-$z-index: 5 !default;
-$raised-z-index: utils.$temporary-element-z-index !default;
-
-$static-width: 16rem !default;
-$touch-margin: 3.5rem !default;
-$touch-width: calc(100vw - #{$touch-margin}) !default;
-
-$max-height: 100% !default;
-$touch-max-height: calc(100% - #{$touch-margin}) !default;
-$recommended-min-height: 3.5rem !default;
-$recommended-max-height: 50% !default;
-
-$variables: (
-  height,
-  width,
-  max-height,
-  touch-width,
-  touch-max-height,
-  static-width,
-  transform-offscreen,
-  z-index
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "sheet");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "sheet")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(touch-width, $touch-width);
-    @include set-var(touch-max-height, $touch-max-height);
-    @include set-var(static-width, $static-width);
-    @include set-var(z-index, $z-index);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(sheet, $disable-layer) {
-      .rmd-sheet {
-        @include box-shadows.box-shadow($elevation);
-        @include use-var(height);
-        @include use-var(max-height);
-        @include use-var(width);
-        @include use-var(z-index);
-
-        overflow: auto;
-        position: fixed;
-
-        @if not $disable-position-left or not $disable-position-right {
-          &--horizontal {
-            bottom: 0;
-            top: 0;
-          }
-        }
-
-        @if not $disable-position-bottom or not $disable-position-top {
-          &--vertical {
-            left: 0;
-            right: 0;
-          }
-        }
-
-        &--raised {
-          @include set-var(z-index, $raised-z-index);
-          @include box-shadows.box-shadow($raised-elevation);
-        }
-
-        @if not $disable-position-left {
-          &--left {
-            @include utils.auto-rtl(left, 0) {
-              @include set-var(transform-offscreen, translate3d(100%, 0, 0));
-            }
-            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
-          }
-        }
-
-        @if not $disable-position-right {
-          &--right {
-            @include utils.auto-rtl(right, 0) {
-              @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
-            }
-            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
-          }
-        }
-
-        @if not $disable-position-bottom {
-          &--bottom {
-            @include set-var(transform-offscreen, translate3d(0, 100%, 0));
-
-            bottom: 0;
-          }
-        }
-
-        @if not $disable-position-top {
-          &--top {
-            @include set-var(transform-offscreen, translate3d(0, -100%, 0));
-
-            top: 0;
-          }
-        }
-
-        &--touch-width {
-          @include set-var(width, get-var(touch-width));
-        }
-
-        &--static-width {
-          @include set-var(width, get-var(static-width));
-        }
-
-        &--media-width {
-          @include media-queries.tablet-media {
-            @include set-var(width, get-var(static-width));
-          }
-
-          @include set-var(width, get-var(touch-width));
-        }
-
-        &--viewport-height {
-          @include set-var(max-height, $max-height);
-        }
-
-        &--touchable-height {
-          @include set-var(max-height, get-var(touch-max-height));
-        }
-
-        &--recommended-height {
-          max-height: $recommended-max-height;
-          min-height: $recommended-min-height;
-        }
-
-        &--offscreen {
-          @include use-var(transform, transform-offscreen);
-        }
-
-        &--hidden {
-          box-shadow: none;
-        }
-
-        &--visible {
-          transform: translate3d(0, 0, 0);
-        }
-
-        &--enter {
-          transition: transform $enter-duration $enter-timing-function;
-        }
-
-        &--exit {
-          transition: transform $leave-duration $leave-timing-function;
-        }
-      }
-    }
-  }
-}

package/src/snackbar/__tests__/Snackbar.tsx

@@ -1,85 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef, type ReactElement } from "react";
-import {
-  rmdRender,
-  screen,
-  type ReactMDRenderOptions,
-  type RenderResult,
-} from "../../test-utils/index.js";
-
-import { Snackbar } from "../Snackbar.js";
-import { ToastManager } from "../ToastManager.js";
-import { ToastManagerProvider } from "../ToastManagerProvider.js";
-import { type SnackbarPosition } from "../snackbarStyles.js";
-
-const render = (
-  ui: ReactElement,
-  options?: ReactMDRenderOptions
-): RenderResult => {
-  const manager = new ToastManager();
-  manager.addToast({ children: "Toast" });
-
-  return rmdRender(ui, {
-    ...options,
-    wrapper: ({ children }) => (
-      <ToastManagerProvider manager={manager}>{children}</ToastManagerProvider>
-    ),
-  });
-};
-
-describe("Snackbar", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "snackbar",
-      ref,
-    } as const;
-    const { rerender } = render(<Snackbar {...props} />);
-
-    const snackbar = screen.getByTestId("snackbar");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(snackbar);
-    expect(snackbar).toMatchSnapshot();
-
-    rerender(
-      <Snackbar
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(snackbar).toMatchSnapshot();
-  });
-
-  it("should support different positions within the viewport", () => {
-    const positions: SnackbarPosition[] = [
-      "bottom",
-      "bottom-left",
-      "bottom-right",
-      "top",
-      "top-left",
-      "top-right",
-    ];
-
-    const { rerender } = render(<Snackbar data-testid="snackbar" />);
-    const snackbar = screen.getByTestId("snackbar");
-    expect(snackbar).toMatchSnapshot();
-
-    positions.forEach((position) => {
-      rerender(<Snackbar position={position} />);
-
-      expect(snackbar).toMatchSnapshot();
-    });
-  });
-
-  it("should allow the portal behavior to be disabled", () => {
-    const { container, rerender } = render(<Snackbar data-testid="snackbar" />);
-    let snackbar = screen.getByTestId("snackbar");
-    expect(container).not.toContainElement(snackbar);
-    expect(snackbar).toBeInTheDocument();
-
-    rerender(<Snackbar data-testid="snackbar" disablePortal />);
-    snackbar = screen.getByTestId("snackbar");
-    expect(container).toContainElement(snackbar);
-  });
-});

package/src/snackbar/__tests__/Toast.tsx

@@ -1,105 +0,0 @@
-import { beforeEach, describe, expect, it, jest } from "@jest/globals";
-import { createRef, type ReactElement } from "react";
-import {
-  rmdRender as baseRender,
-  screen,
-  userEvent,
-  type RenderResult,
-} from "../../test-utils/index.js";
-
-import { FontIcon } from "../../icon/FontIcon.js";
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { Typography } from "../../typography/Typography.js";
-import { Toast } from "../Toast.js";
-import { CurrentToastActionsProvider } from "../useCurrentToastActions.js";
-
-const render = (ui: ReactElement): RenderResult =>
-  baseRender(ui, {
-    wrapper: ({ children }) => (
-      <CurrentToastActionsProvider
-        value={{
-          clearTimer: jest.fn(),
-          pauseRemoveTimeout: jest.fn(),
-          removeToast: jest.fn(),
-          resumeRemoveTimeout: jest.fn(),
-          startRemoveTimeout: jest.fn(),
-        }}
-      >
-        {children}
-      </CurrentToastActionsProvider>
-    ),
-  });
-
-describe("Toast", () => {
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "toast",
-      ref,
-      visible: true,
-    } as const;
-    const { rerender } = render(<Toast {...props} />);
-    const toast = screen.getByTestId("toast");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(toast);
-    expect(toast).toMatchSnapshot();
-
-    rerender(
-      <Toast
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(toast).toMatchSnapshot();
-  });
-
-  it("should render any valid element within the ToastActionButton", async () => {
-    const user = userEvent.setup();
-    const props = {
-      children: <Typography>Hello, world!</Typography>,
-      visible: true,
-    } as const;
-    const { rerender } = render(<Toast {...props} />);
-
-    expect(() => screen.getByRole("button")).toThrow();
-
-    rerender(<Toast {...props} action={<span>Action</span>} />);
-    const action = screen.getByRole("button", { name: "Action" });
-    expect(action).toBeInTheDocument();
-    expect(action).toMatchSnapshot();
-
-    const onClick = jest.fn();
-    rerender(
-      <Toast
-        {...props}
-        action={{
-          onClick,
-          children: <FontIcon>favorite</FontIcon>,
-          buttonType: "icon",
-          "aria-label": "New Action",
-        }}
-      />
-    );
-
-    const newAction = screen.getByRole("button", { name: "New Action" });
-    expect(newAction).toMatchSnapshot();
-
-    await user.click(newAction);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it("should not be in the dom while not visible", () => {
-    render(
-      <Toast data-testid="toast" visible={false}>
-        Hello
-      </Toast>
-    );
-
-    expect(() => screen.getByTestId("toast")).toThrow();
-  });
-});

package/src/snackbar/__tests__/ToastActionButton.tsx

@@ -1,112 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef, type MouseEvent } from "react";
-import {
-  render,
-  rmdRender,
-  screen,
-  userEvent,
-} from "../../test-utils/index.js";
-
-import { ToastActionButton } from "../ToastActionButton.js";
-import {
-  CurrentToastActionsProvider,
-  type CurrentToastActions,
-} from "../useCurrentToastActions.js";
-
-describe("ToastActionButton", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLButtonElement>();
-    const props = {
-      ref,
-      children: "Button",
-    } as const;
-    const actions: CurrentToastActions = {
-      clearTimer: jest.fn(),
-      removeToast: jest.fn(),
-      pauseRemoveTimeout: jest.fn(),
-      startRemoveTimeout: jest.fn(),
-      resumeRemoveTimeout: jest.fn(),
-    };
-    const { rerender } = render(
-      <CurrentToastActionsProvider value={actions}>
-        <ToastActionButton {...props} />
-      </CurrentToastActionsProvider>
-    );
-
-    const button = screen.getByRole("button", { name: "Button" });
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    expect(ref.current).toBe(button);
-    expect(button).toMatchSnapshot();
-
-    rerender(
-      <CurrentToastActionsProvider value={actions}>
-        <ToastActionButton
-          {...props}
-          style={{ color: "white" }}
-          className="custom-class-name"
-        />
-      </CurrentToastActionsProvider>
-    );
-    expect(button).toMatchSnapshot();
-
-    rerender(
-      <CurrentToastActionsProvider value={actions}>
-        <ToastActionButton {...props} reordered />
-      </CurrentToastActionsProvider>
-    );
-    expect(button).toMatchSnapshot();
-  });
-
-  it("should not call removeToast if event.stopPropagation() is called", async () => {
-    const user = userEvent.setup();
-    const removeToast = jest.fn();
-    const handleClick = jest.fn((_event: MouseEvent<HTMLButtonElement>) => {
-      // do nothing
-    });
-    const actions: CurrentToastActions = {
-      clearTimer: jest.fn(),
-      removeToast,
-      pauseRemoveTimeout: jest.fn(),
-      startRemoveTimeout: jest.fn(),
-      resumeRemoveTimeout: jest.fn(),
-    };
-    const { rerender } = rmdRender(
-      <ToastActionButton onClick={handleClick}>Button</ToastActionButton>,
-      {
-        wrapper: ({ children }) => (
-          <CurrentToastActionsProvider value={actions}>
-            {children}
-          </CurrentToastActionsProvider>
-        ),
-      }
-    );
-
-    const button = screen.getByRole("button", { name: "Button" });
-
-    await user.click(button);
-    expect(removeToast).toHaveBeenCalledTimes(1);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-
-    handleClick.mockImplementation((event) => {
-      event?.stopPropagation();
-    });
-    await user.click(button);
-    expect(removeToast).toHaveBeenCalledTimes(1);
-    expect(handleClick).toHaveBeenCalledTimes(2);
-
-    rerender(<ToastActionButton>Button</ToastActionButton>);
-    await user.click(button);
-    expect(removeToast).toHaveBeenCalledTimes(2);
-  });
-
-  it("should throw an error if mounted without a parent CurrentToastActionsProvider", () => {
-    const error = jest.spyOn(console, "error").mockImplementation(() => {
-      // do nothing
-    });
-    expect(() => render(<ToastActionButton />)).toThrow(
-      "The `CurrentToastActionsProvider` has not been initialized"
-    );
-
-    error.mockRestore();
-  });
-});