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

package/src/chip/_chip.scss

@@ -1,324 +0,0 @@
-@use "sass:color";
-@use "sass:map";
-@use "../utils";
-@use "../box-shadows";
-@use "../theme/a11y";
-@use "../theme/colors";
-@use "../theme/theme";
-@use "../typography/typography";
-@use "../transition/transition";
-@use "../interaction/interaction";
-@use "../icon/icon";
-@use "../avatar/avatar";
-@use "../progress/progress";
-
-$disable-everything: false !default;
-$disable-icon: false !default;
-$disable-avatar: false !default;
-$disable-progress: false !default;
-$disable-content: false !default;
-$disable-solid-theme: $disable-everything !default;
-$disable-solid-raisable: false !default;
-$disable-outline-theme: $disable-everything !default;
-$disable-outline-raisable: false !default;
-$disable-left-addon: false !default;
-$disable-right-addon: false !default;
-$disable-selected-theme: false !default;
-$disable-selected-icon-transition: false !default;
-
-$gap: icon.$spacing !default;
-$height: 2rem !default;
-$border-radius: 1rem !default;
-$icon-size: 1.125rem !default;
-$avatar-size: 1.5rem !default;
-$progress-size: $icon-size !default;
-$progress-width: 12 !default;
-$typography: map.merge(
-  typography.$base-font-styles,
-  typography.$body-2-styles
-) !default;
-$horizontal-padding: 0.75rem !default;
-$vertical-padding: 0 !default;
-$addon-left-padding: 0.25rem !default;
-$addon-right-padding: 0.5rem !default;
-
-$selected-transition-duration: transition.$linear-duration;
-$selected-transition-timing-function: transition.$linear-timing-function !default;
-$theme-background-color: theme.get-swatch(
-  theme.$primary-color,
-  300,
-  false,
-  color.adjust(theme.$primary-color, $lightness: -20%)
-) !default;
-$theme-color: a11y.contrast-color($theme-background-color) !default;
-
-$solid-light-background-color: colors.$grey-300 !default;
-$solid-light-disabled-background-color: colors.$grey-100 !default;
-$solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
-$solid-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  colors.$grey-900,
-  map.get(theme.$dark-elevation-colors, 12)
-) !default;
-$solid-dark-disabled-background-color: color.adjust(
-  colors.$grey-900,
-  $lightness: 2%
-) !default;
-$solid-dark-color: a11y.contrast-color($solid-dark-background-color) !default;
-$solid-background-color: theme.get-default-color(
-  $solid-light-background-color,
-  $solid-dark-background-color
-) !default;
-$solid-disabled-background-color: theme.get-default-color(
-  $solid-light-disabled-background-color,
-  $solid-dark-disabled-background-color
-) !default;
-$solid-color: theme.get-default-color(
-  $solid-light-color,
-  $solid-dark-color
-) !default;
-$solid-raisable-box-shadow-z-value: 4 !default;
-$solid-raisable-transition-duration: transition.$linear-duration !default;
-
-$outline-width: 0.0625rem !default;
-$outline-light-color: colors.$grey-300 !default;
-$outline-light-background-color: theme.$light-theme-surface-color !default;
-$outline-light-text-color: a11y.contrast-color(
-  $outline-light-background-color
-) !default;
-$outline-dark-color: $outline-light-color !default;
-$outline-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, 8)
-) !default;
-$outline-dark-text-color: a11y.contrast-color(
-  $outline-dark-background-color
-) !default;
-
-$outline-color: theme.get-default-color(
-  $outline-light-color,
-  $outline-dark-color
-) !default;
-$outline-background-color: theme.get-default-color(
-  $outline-light-background-color,
-  $outline-dark-background-color
-) !default;
-$outline-text-color: theme.get-default-color(
-  $outline-light-text-color,
-  $outline-dark-text-color
-) !default;
-$outline-raisable-box-shadow-z-value: 8 !default;
-$outline-raisable-transition-duration: transition.$linear-duration !default;
-
-$variables: (
-  solid-background-color,
-  solid-disabled-background-color,
-  solid-color,
-  theme-background-color,
-  theme-color,
-  outline-color,
-  outline-width,
-  outline-background-color,
-  outline-text-color
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "chip");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "chip")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin use-light-theme {
-  @if not $disable-solid-theme {
-    @include set-var(solid-background-color, $solid-light-background-color);
-    @include set-var(solid-color, $solid-light-color);
-  }
-
-  @if not $disable-outline-theme {
-    @if $outline-light-color != $outline-dark-color {
-      @include set-var(outline-color, $outline-light-color);
-    }
-    @include set-var(outline-background-color, $outline-light-background-color);
-    @include set-var(outline-text-color, $outline-light-text-color);
-  }
-}
-
-@mixin use-dark-theme {
-  @if not $disable-solid-theme {
-    @include set-var(solid-background-color, $solid-dark-background-color);
-    @include set-var(solid-color, $solid-dark-color);
-  }
-
-  @if not $disable-outline-theme {
-    @if $outline-light-color != $outline-dark-color {
-      @include set-var(outline-color, $outline-dark-color);
-    }
-    @include set-var(outline-background-color, $outline-dark-background-color);
-    @include set-var(outline-text-color, $outline-dark-text-color);
-  }
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(solid-background-color, $solid-background-color);
-    @include set-var(
-      solid-disabled-background-color,
-      $solid-disabled-background-color
-    );
-    @include set-var(solid-color, $solid-color);
-    @include set-var(theme-background-color, $theme-background-color);
-    @include set-var(theme-color, $theme-color);
-    @include set-var(outline-color, $outline-color);
-    @include set-var(outline-width, $outline-width);
-    @include set-var(outline-background-color, $outline-background-color);
-    @include set-var(outline-text-color, $outline-text-color);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(chip, $disable-layer) {
-      @include theme.default-system-theme {
-        @include use-dark-theme;
-      }
-
-      .rmd-chip {
-        @if not $disable-icon {
-          @include icon.set-var(size, $icon-size);
-        }
-
-        @if not $disable-avatar {
-          @include avatar.set-var(size, $avatar-size);
-        }
-
-        @if not $disable-progress {
-          @include progress.set-var(circular-size, $progress-size);
-          @include progress.set-var(circular-stroke-width, $progress-width);
-        }
-
-        @if not $disable-selected-icon-transition and $gap {
-          @include transition.transition-set-var(max-width, icon.get-var(size));
-          @include transition.transition-set-var(max-width-gap, $gap);
-        }
-        @include utils.map-to-styles($typography);
-
-        align-items: center;
-        border-radius: $border-radius;
-        border-width: 0;
-        display: inline-flex;
-        flex-shrink: 0;
-        gap: $gap;
-        height: $height;
-        justify-content: center;
-        max-width: 100%;
-        padding: $vertical-padding $horizontal-padding;
-
-        @if not $disable-solid-theme {
-          &--solid {
-            @if not $disable-solid-raisable {
-              @include box-shadows.elevation-transition(
-                $start-z-value: 0,
-                $end-z-value: $solid-raisable-box-shadow-z-value,
-                $duration: $solid-raisable-transition-duration,
-                $active-selectors: "&.rmd-chip--pressed",
-                $pseudo-before: false,
-                $position-relative: false
-              );
-            }
-            @include use-var(background-color, solid-background-color);
-            @include use-var(color, solid-color);
-          }
-        }
-
-        @if not $disable-outline-theme {
-          &--outline {
-            @if not $disable-outline-raisable {
-              $outline-box-shadow: inset
-                0
-                0
-                0
-                #{get-var(outline-width)}
-                #{get-var(outline-color)};
-
-              @include box-shadows.box-shadow-transition(
-                $start-shadow: $outline-box-shadow,
-                $end-shadow:
-                  box-shadows.box-shadow($outline-raisable-box-shadow-z-value),
-                $duration: $outline-raisable-transition-duration,
-                $active-selectors: "&.rmd-chip--pressed",
-                $pseudo-before: false,
-                $position-relative: false
-              );
-            }
-            @include use-var(background-color, outline-background-color);
-            @include use-var(color, outline-text-color);
-          }
-        }
-
-        @if not $disable-selected-theme {
-          &--themed {
-            @include use-var(background-color, theme-background-color);
-            @include use-var(color, theme-color);
-            @if not $disable-icon {
-              @include icon.set-var(color, currentcolor);
-            }
-          }
-        }
-
-        &--disabled {
-          @if not $disable-icon {
-            @include icon.set-var(color, currentcolor);
-          }
-        }
-
-        @if not $disable-solid-theme {
-          &--solid-disabled {
-            @include use-var(background-color, solid-disabled-background-color);
-          }
-        }
-
-        @if not $disable-left-addon {
-          &--left-addon {
-            @include utils.auto-rtl(
-              padding-left,
-              $addon-left-padding,
-              $horizontal-padding
-            );
-          }
-        }
-
-        @if not $disable-right-addon {
-          &--right-addon {
-            @include utils.auto-rtl(
-              padding-right,
-              $addon-right-padding,
-              $horizontal-padding
-            );
-          }
-        }
-
-        @if not $disable-content {
-          &__content {
-            @include typography.text-overflow;
-
-            flex: 1 1 auto;
-          }
-        }
-      }
-    }
-  }
-}

package/src/dialog/__tests__/Dialog.tsx

@@ -1,316 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef, type ReactElement } from "react";
-import { Button } from "../../button/Button.js";
-import { PORTAL_CONTAINER_ID } from "../../portal/PortalContainerProvider.js";
-import {
-  rmdRender,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-import { useToggle } from "../../useToggle.js";
-import { isElementVisible } from "../../utils/isElementVisible.js";
-import { Dialog, type DialogProps } from "../Dialog.js";
-import { dialog } from "../styles.js";
-
-interface TestProps
-  extends Omit<
-    DialogProps,
-    "aria-label" | "aria-labelledby" | "visible" | "onRequestClose"
-  > {}
-
-function Test(props: TestProps): ReactElement {
-  const { children, ...remaining } = props;
-
-  const { toggled, enable, disable } = useToggle();
-  return (
-    <>
-      <Button onClick={enable}>Show</Button>
-      <Dialog
-        {...remaining}
-        aria-label="Dialog"
-        visible={toggled}
-        onRequestClose={disable}
-        overlayProps={{
-          "data-testid": "overlay",
-          ...remaining.overlayProps,
-        }}
-        containerProps={{
-          "data-testid": "container",
-          ...remaining.containerProps,
-        }}
-      >
-        <Button onClick={disable}>Close</Button>
-        {children}
-      </Dialog>
-    </>
-  );
-}
-
-describe("Dialog", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "aria-label": "Dialog",
-      ref,
-      visible: true,
-      onRequestClose: () => {},
-    } as const;
-
-    const { rerender } = rmdRender(<Dialog {...props} />);
-
-    const dialog = screen.getByRole("dialog", { name: "Dialog" });
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(dialog);
-    expect(dialog).toMatchSnapshot();
-
-    rerender(
-      <Dialog
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(dialog).toMatchSnapshot();
-  });
-
-  it("should use conditional rendering but support being hidden with the DISPLAY_NONE_CLASS by setting temporary to false", async () => {
-    const user = userEvent.setup();
-    const { rerender } = rmdRender(<Test />);
-
-    let show = screen.getByRole("button", { name: "Show" });
-    expect(() => screen.getByRole("dialog")).toThrow();
-    expect(() => screen.getByRole("button", { name: "Close" })).toThrow();
-
-    await user.click(show);
-    let dialog = screen.getByRole("dialog", { name: "Dialog" });
-    let closeButton = screen.getByRole("button", { name: "Close" });
-    expect(dialog).not.toHaveClass("rmd-dialog--enter");
-
-    await user.click(closeButton);
-    expect(dialog).not.toBeInTheDocument();
-    expect(closeButton).not.toBeInTheDocument();
-
-    // I do not support toggling the temporary state without going through the
-    // full transition flow again
-    rerender(<Test key="restart" temporary={false} />);
-    show = screen.getByRole("button", { name: "Show" });
-    dialog = screen.getByRole("dialog", { name: "Dialog" });
-    closeButton = screen.getByRole("button", { name: "Close" });
-
-    expect(isElementVisible(dialog)).toBe(false);
-    expect(isElementVisible(closeButton)).toBe(false);
-
-    await user.click(show);
-    expect(isElementVisible(dialog)).toBe(true);
-    expect(isElementVisible(closeButton)).toBe(true);
-
-    await user.click(closeButton);
-    expect(isElementVisible(dialog)).toBe(false);
-    expect(isElementVisible(closeButton)).toBe(false);
-  });
-
-  it("should render an overlay unless the disableOverlay prop is true", async () => {
-    const user = userEvent.setup();
-    const { rerender } = rmdRender(<Test />);
-
-    const show = screen.getByRole("button", { name: "Show" });
-    expect(() => screen.getByTestId("overlay")).toThrow();
-
-    await user.click(show);
-    expect(() => screen.getByTestId("overlay")).not.toThrow();
-    expect(() => screen.getByRole("dialog", { name: "Dialog" })).not.toThrow();
-
-    await user.click(screen.getByRole("button", { name: "Close" }));
-    expect(() => screen.getByTestId("overlay")).toThrow();
-    expect(() => screen.getByRole("dialog")).toThrow();
-
-    rerender(<Test disableOverlay />);
-
-    await user.click(show);
-    expect(() => screen.getByTestId("overlay")).toThrow();
-    expect(() => screen.getByRole("dialog", { name: "Dialog" })).not.toThrow();
-  });
-
-  it("should allow the user to close the dialog by clicking on the overlay", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test />);
-    await user.click(screen.getByRole("button", { name: "Show" }));
-
-    expect(() => screen.getByRole("dialog", { name: "Dialog" })).not.toThrow();
-    await user.click(screen.getByTestId("overlay"));
-    expect(() => screen.getByRole("dialog")).toThrow();
-  });
-
-  it("should move the focus onto the dialog when it becomes visible and back to the previous element once it is closed", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test />);
-
-    const show = screen.getByRole("button", { name: "Show" });
-    await user.click(show);
-
-    const dialog = screen.getByRole("dialog", { name: "Dialog" });
-    expect(document.activeElement).toBe(dialog);
-
-    await user.click(screen.getByRole("button", { name: "Close" }));
-    expect(dialog).not.toBeInTheDocument();
-
-    // have to use waitFor because this focus happens after an animation frame
-    // due to the weird timing of Enter keydown events compared to space
-    await waitFor(() => {
-      expect(document.activeElement).toBe(show);
-    });
-  });
-
-  it("should allow both the dialog and overlay to disable the portal behavior by enabling the disablePortal prop", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test disablePortal />);
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-
-    const dialog = screen.getByRole("dialog", { name: "Dialog" });
-    const overlay = screen.getByTestId("overlay");
-    const portalContainer = document.getElementById(PORTAL_CONTAINER_ID);
-    expect(portalContainer).not.toContainElement(dialog);
-    expect(portalContainer).not.toContainElement(overlay);
-  });
-
-  it("should close the modal when the escape key is pressed and the disableEscapeClose is not true", async () => {
-    const user = userEvent.setup();
-    const { rerender } = rmdRender(<Test />);
-
-    const show = screen.getByRole("button", { name: "Show" });
-    await user.click(show);
-    let dialog = screen.getByRole("dialog", { name: "Dialog" });
-
-    await user.keyboard("[Escape]");
-    expect(dialog).not.toBeInTheDocument();
-
-    rerender(<Test disableEscapeClose />);
-    await user.click(show);
-    dialog = screen.getByRole("dialog", { name: "Dialog" });
-
-    await user.keyboard("[Escape]");
-    expect(dialog).toBeInTheDocument();
-  });
-
-  it("should be able to render as a modal with the correct accessibility", async () => {
-    const user = userEvent.setup();
-    rmdRender(
-      <Test aria-describedby="alert-message" modal>
-        <div id="alert-message">Warning</div>
-      </Test>
-    );
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    const alertDialog = screen.getByRole("alertdialog", { name: "Dialog" });
-    const overlay = screen.getByTestId("overlay");
-
-    expect(alertDialog).toHaveAttribute("aria-modal", "true");
-    expect(overlay).not.toHaveClass("rmd-overlay--clickable");
-    expect(overlay).toMatchSnapshot();
-  });
-
-  it("should not close the modal dialog when escape key is pressed or the overlay is clicked", async () => {
-    const user = userEvent.setup();
-    rmdRender(
-      <Test aria-describedby="alert-message" modal>
-        <div id="alert-message">Warning</div>
-      </Test>
-    );
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    const alertDialog = screen.getByRole("alertdialog", { name: "Dialog" });
-
-    await user.keyboard("[Escape]");
-    expect(alertDialog).toBeInTheDocument();
-
-    await user.click(screen.getByTestId("overlay"));
-    expect(alertDialog).toBeInTheDocument();
-  });
-
-  it("should be able to render as a full-page dialog by setting the type prop to full-page", async () => {
-    const user = userEvent.setup();
-    const { rerender } = rmdRender(<Test />);
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    const dialog = screen.getByRole("dialog", { name: "Dialog" });
-    const container = screen.getByTestId("container");
-    expect(container).toMatchSnapshot();
-
-    rerender(<Test type="full-page" />);
-    // for some reason the container changes to the dialog? so just check there
-    // is no container by retying to re-query for it
-    expect(() => screen.getByTestId("container")).toThrow();
-    expect(dialog).toMatchSnapshot();
-  });
-
-  it("should enable scroll lock on the page while visible unless the disableScrollLock prop is true", async () => {
-    const user = userEvent.setup();
-    const { rerender } = rmdRender(<Test />);
-
-    expect(document.body).not.toHaveStyle("overflow: hidden");
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    expect(document.body).toHaveStyle("overflow: hidden");
-
-    rerender(<Test disableScrollLock />);
-    expect(document.body).not.toHaveStyle("overflow: hidden");
-
-    await user.click(screen.getByRole("button", { name: "Close" }));
-    expect(document.body).not.toHaveStyle("overflow: hidden");
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-    expect(document.body).not.toHaveStyle("overflow: hidden");
-  });
-
-  it("should enable the noOpacity prop on parent dialog overlay elements so the screen does not get darker as more dialogs are visible", async () => {
-    const user = userEvent.setup();
-    function InfiniteDialog({ depth }: { depth: number }): ReactElement {
-      const { toggled, enable, disable } = useToggle();
-
-      return (
-        <>
-          <Button onClick={enable}>{`Show ${depth}`}</Button>
-          <Dialog
-            aria-label={`Dialog ${depth}`}
-            visible={toggled}
-            onRequestClose={disable}
-            overlayProps={{
-              "data-testid": `overlay${depth}`,
-            }}
-          >
-            <InfiniteDialog depth={depth + 1} />
-          </Dialog>
-        </>
-      );
-    }
-
-    rmdRender(
-      <Test>
-        <InfiniteDialog depth={1} />
-      </Test>
-    );
-
-    await user.click(screen.getByRole("button", { name: "Show" }));
-
-    const overlay = screen.getByTestId("overlay");
-    expect(overlay.className).toMatchSnapshot();
-
-    await user.click(screen.getByRole("button", { name: "Show 1" }));
-
-    const overlay1 = screen.getByTestId("overlay1");
-    expect(overlay.className).toMatchSnapshot();
-    expect(overlay1.className).toMatchSnapshot();
-
-    await user.click(screen.getByRole("button", { name: "Show 2" }));
-    expect(overlay.className).toMatchSnapshot();
-    expect(overlay1.className).toMatchSnapshot();
-  });
-});
-
-describe("dialog class name utility", () => {
-  it("should be callable with no arguments", () => {
-    expect(dialog()).toMatchSnapshot();
-  });
-});

package/src/dialog/__tests__/DialogContent.tsx

@@ -1,53 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-import { DialogContent } from "../DialogContent.js";
-import { dialogContent } from "../styles.js";
-
-describe("DialogContent", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "content",
-      ref,
-    } as const;
-
-    const { rerender } = render(<DialogContent {...props} />);
-
-    const content = screen.getByTestId("content");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(content);
-    expect(content).toMatchSnapshot();
-
-    rerender(
-      <DialogContent
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(content).toMatchSnapshot();
-  });
-
-  it("should support disabling padding", () => {
-    const { rerender } = render(
-      <DialogContent data-testid="content">Content</DialogContent>
-    );
-
-    const content = screen.getByTestId("content");
-    expect(content).toMatchSnapshot();
-
-    rerender(
-      <DialogContent data-testid="content" disablePadding>
-        Content
-      </DialogContent>
-    );
-    expect(content).toMatchSnapshot();
-  });
-});
-
-describe("dialogContent class name utility", () => {
-  it("should be callable with no arguments", () => {
-    expect(dialogContent()).toMatchSnapshot();
-  });
-});