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

package/src/tooltip/__tests__/utils.ts

@@ -1,94 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import {
-  ABOVE_CENTER_ANCHOR,
-  BELOW_CENTER_ANCHOR,
-  CENTER_LEFT_ANCHOR,
-  CENTER_RIGHT_ANCHOR,
-} from "../../positioning/constants.js";
-import { DEFAULT_TOOLTIP_THRESHOLD } from "../constants.js";
-import type { GetPositionOptions } from "../utils.js";
-import { getAnchor, getPosition } from "../utils.js";
-
-describe("getAnchor", () => {
-  it("should return the correct PositionAnchor based on the SimplePosition", () => {
-    expect(getAnchor("above")).toBe(ABOVE_CENTER_ANCHOR);
-    expect(getAnchor("below")).toBe(BELOW_CENTER_ANCHOR);
-    expect(getAnchor("left")).toBe(CENTER_LEFT_ANCHOR);
-    expect(getAnchor("right")).toBe(CENTER_RIGHT_ANCHOR);
-  });
-
-  it("should throw an error if an invalid anchor is provided through javascript", () => {
-    // @ts-expect-error
-    expect(() => getAnchor("invalid")).toThrow(
-      'Invalid tooltip position: "invalid"'
-    );
-  });
-});
-
-describe("getPosition", () => {
-  it("should attempt to use the defaultPosition unless it can't fit within the viewport", () => {
-    const vh = 768;
-    const vw = 1024;
-    expect(window.innerHeight).toBe(vh);
-    expect(window.innerWidth).toBe(vw);
-
-    const baseRect = document.body.getBoundingClientRect();
-    const container = document.createElement("div");
-    const rect = jest.spyOn(container, "getBoundingClientRect");
-
-    const outOfBoundsVertical = vh * DEFAULT_TOOLTIP_THRESHOLD;
-    const belowOptions: GetPositionOptions = {
-      container,
-      threshold: DEFAULT_TOOLTIP_THRESHOLD,
-      defaultPosition: "below",
-    };
-    rect.mockReturnValue({ ...baseRect, top: vh / 2 });
-    expect(getPosition(belowOptions)).toBe("below");
-
-    rect.mockReturnValue({ ...baseRect, top: outOfBoundsVertical });
-    expect(getPosition(belowOptions)).toBe("below");
-
-    rect.mockReturnValue({ ...baseRect, top: outOfBoundsVertical + 1 });
-    expect(getPosition(belowOptions)).toBe("above");
-
-    const aboveOptions: GetPositionOptions = {
-      ...belowOptions,
-      defaultPosition: "above",
-    };
-    rect.mockReturnValue({ ...baseRect, top: vh / 2 });
-    expect(getPosition(aboveOptions)).toBe("above");
-
-    rect.mockReturnValue({ ...baseRect, top: vh - outOfBoundsVertical });
-    expect(getPosition(aboveOptions)).toBe("above");
-
-    rect.mockReturnValue({ ...baseRect, top: vh - outOfBoundsVertical - 1 });
-    expect(getPosition(aboveOptions)).toBe("below");
-
-    const outOfBoundsHorizontal = vw * DEFAULT_TOOLTIP_THRESHOLD;
-    const leftOptions: GetPositionOptions = {
-      ...belowOptions,
-      defaultPosition: "left",
-    };
-    rect.mockReturnValue({ ...baseRect, left: vw / 2 });
-    expect(getPosition(leftOptions)).toBe("left");
-
-    rect.mockReturnValue({ ...baseRect, left: outOfBoundsHorizontal });
-    expect(getPosition(leftOptions)).toBe("left");
-
-    rect.mockReturnValue({ ...baseRect, left: vw - outOfBoundsHorizontal - 1 });
-    expect(getPosition(leftOptions)).toBe("right");
-
-    const rightOptions: GetPositionOptions = {
-      ...belowOptions,
-      defaultPosition: "right",
-    };
-    rect.mockReturnValue({ ...baseRect, left: vw / 2 });
-    expect(getPosition(rightOptions)).toBe("right");
-
-    rect.mockReturnValue({ ...baseRect, left: outOfBoundsHorizontal });
-    expect(getPosition(rightOptions)).toBe("right");
-
-    rect.mockReturnValue({ ...baseRect, left: outOfBoundsHorizontal + 1 });
-    expect(getPosition(rightOptions)).toBe("left");
-  });
-});

package/src/tooltip/_tooltip.scss

@@ -1,155 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../theme/colors";
-@use "../transition/transition";
-@use "../typography/typography";
-
-$disable-everything: false !default;
-$disable-vertical: false !default;
-$disable-horizontal: false !default;
-$disable-above: $disable-vertical !default;
-$disable-below: $disable-vertical !default;
-$disable-left: $disable-horizontal !default;
-$disable-right: $disable-horizontal !default;
-$disable-dense: false !default;
-
-$background-color: #616161 !default;
-$color: colors.$white !default;
-
-$typography: map.merge(
-  typography.$body-1-styles,
-  (
-    letter-spacing: null,
-  )
-) !default;
-$border-radius: 0.25rem !default;
-$z-index: utils.$temporary-element-z-index + 20 !default;
-$max-width: 15rem !default;
-$min-height: 2rem !default;
-$horizontal-padding: 1rem !default;
-$vertical-padding: 0.5625rem !default;
-$spacing: 1.5rem !default;
-
-$dense-spacing: 0.875rem !default;
-$dense-typography: (
-  font-size: 0.625rem,
-  line-height: 0.825rem,
-) !default;
-$dense-min-height: 1.375rem !default;
-$dense-horizontal-padding: 0.5rem !default;
-$dense-vertical-padding: 0.375rem !default;
-
-$enter-duration: transition.$linear-duration !default;
-$enter-timing-function: transition.$deceleration-timing-function !default;
-$leave-duration: transition.$linear-duration !default;
-$leave-timing-function: transition.$acceleration-timing-function !default;
-$transition-distance: 0.5rem !default;
-
-$variables: (background-color, color, spacing);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "tooltip");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "tooltip")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(background-color, $background-color);
-    @include set-var(color, $color);
-
-    // do not include spacing
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(tooltip, $disable-layer) {
-      .rmd-tooltip {
-        @include utils.map-to-styles($typography);
-        @include use-var(background-color);
-        @include use-var(color);
-
-        border-radius: $border-radius;
-        max-width: $max-width;
-        min-height: $min-height;
-        opacity: 0;
-        overflow: hidden;
-        overflow-wrap: anywhere;
-        padding: $vertical-padding $horizontal-padding;
-        pointer-events: none;
-        position: fixed;
-        text-transform: none;
-        user-select: none;
-        z-index: $z-index;
-
-        @if not $disable-dense {
-          &--dense {
-            @include utils.map-to-styles($dense-typography);
-            @include set-var(spacing, $dense-spacing);
-
-            min-height: $dense-min-height;
-            padding: $dense-vertical-padding $dense-horizontal-padding;
-          }
-        }
-
-        @if not $disable-above {
-          &--above {
-            transform: translateY(-$transition-distance);
-          }
-        }
-
-        @if not $disable-below {
-          &--below {
-            transform: translateY($transition-distance);
-          }
-        }
-
-        @if not $disable-left {
-          &--left {
-            transform: translateX(-$transition-distance);
-          }
-        }
-
-        @if not $disable-right {
-          &--right {
-            transform: translateX($transition-distance);
-          }
-        }
-
-        &--visible {
-          opacity: 1;
-          transform: none;
-        }
-
-        &--enter {
-          transition:
-            opacity $enter-duration,
-            transform $enter-duration * 2;
-          transition-timing-function: $enter-timing-function;
-        }
-
-        &--exit {
-          transition: opacity $leave-duration $leave-timing-function;
-        }
-
-        &--exit-active {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}

package/src/transition/__tests__/CSSTransition.tsx

@@ -1,182 +0,0 @@
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  jest,
-} from "@jest/globals";
-import { useState, type ReactElement } from "react";
-import { act, fireEvent, render, screen } from "../../test-utils/index.js";
-
-import { CSSTransition, type CSSTransitionProps } from "../CSSTransition.js";
-import { TRANSITION_CONFIG } from "../config.js";
-import {
-  type CSSTransitionClassNames,
-  type TransitionTimeout,
-} from "../types.js";
-
-interface TestProps
-  extends Omit<
-    CSSTransitionProps<HTMLDivElement>,
-    "transitionIn" | "timeout" | "classNames" | "children"
-  > {
-  defaultTransitionIn?: boolean;
-  timeout?: TransitionTimeout;
-  classNames?: CSSTransitionClassNames;
-}
-
-function Test({
-  defaultTransitionIn = false,
-  timeout = 150,
-  classNames = "some-transition",
-  ...props
-}: TestProps): ReactElement {
-  const [transitionIn, setTransitionIn] = useState(defaultTransitionIn);
-  return (
-    <>
-      <button type="button" onClick={() => setTransitionIn((p) => !p)}>
-        Toggle
-      </button>
-      <CSSTransition
-        {...props}
-        transitionIn={transitionIn}
-        timeout={timeout}
-        classNames={classNames}
-      >
-        <div data-testid="element">This is some content.</div>
-      </CSSTransition>
-    </>
-  );
-}
-
-describe("CSSTransition", () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-  });
-
-  it("should render correctly", () => {
-    const { container, rerender } = render(<Test />);
-    const getElement = (): HTMLElement => screen.getByTestId("element");
-    const toggle = screen.getByRole("button");
-
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    rerender(<Test temporary />);
-    expect(getElement).toThrow();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).toThrow();
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should correctly call the transition callbacks", () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExit = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    const props: TestProps = {
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-    };
-
-    render(<Test {...props} />);
-    const toggle = screen.getByRole("button");
-
-    expect(onEnter).not.toHaveBeenCalled();
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    fireEvent.click(toggle);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    fireEvent.click(toggle);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).toHaveBeenCalledTimes(1);
-    expect(onExiting).toHaveBeenCalledTimes(1);
-    expect(onExited).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).toHaveBeenCalledTimes(1);
-    expect(onExiting).toHaveBeenCalledTimes(1);
-    expect(onExited).toHaveBeenCalledTimes(1);
-  });
-});

package/src/transition/__tests__/Collapse.tsx

@@ -1,209 +0,0 @@
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  jest,
-} from "@jest/globals";
-import { useState, type ReactElement } from "react";
-import { act, fireEvent, render, screen } from "../../test-utils/index.js";
-
-import { DISPLAY_NONE_CLASS } from "../../utils/isElementVisible.js";
-import { Collapse, type CollapseProps } from "../Collapse.js";
-import { TRANSITION_CONFIG } from "../config.js";
-
-interface TestProps
-  extends Omit<CollapseProps<HTMLElement>, "collapsed" | "children"> {
-  defaultCollapsed?: boolean;
-}
-
-function Test({ defaultCollapsed = true, ...props }: TestProps): ReactElement {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-
-  return (
-    <>
-      <button type="button" onClick={() => setCollapsed((p) => !p)}>
-        Toggle
-      </button>
-      <Collapse {...props} collapsed={collapsed}>
-        <div data-testid="element">This is some content.</div>
-      </Collapse>
-    </>
-  );
-}
-
-describe("useCollapseTransition", () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-  });
-
-  it("should default to not rendering the element when transitionIn is false", () => {
-    const { container } = render(<Test />);
-    const getElement = (): HTMLElement => screen.getByTestId("element");
-    const toggle = screen.getByRole("button");
-
-    expect(getElement).toThrow();
-
-    fireEvent.click(toggle);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).toThrow();
-    expect(container).toMatchSnapshot();
-  });
-
-  it(`should apply the ${DISPLAY_NONE_CLASS} if the temporary behavior is disabled`, () => {
-    const { container } = render(<Test temporary={false} />);
-    const toggle = screen.getByRole("button");
-    const element = screen.getByTestId("element");
-
-    expect(element).toHaveClass(DISPLAY_NONE_CLASS);
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(element).not.toHaveClass(DISPLAY_NONE_CLASS);
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(element).not.toHaveClass(DISPLAY_NONE_CLASS);
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(toggle);
-    expect(element).not.toHaveClass(DISPLAY_NONE_CLASS);
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(element).toBeInTheDocument();
-    expect(element).toHaveClass(DISPLAY_NONE_CLASS);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0", () => {
-    const { container, rerender } = render(
-      <Test key="first-test" minHeight={120} />
-    );
-    const getElement = (): HTMLElement => screen.getByTestId("element");
-
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    rerender(<Test key="second-test" minPaddingBottom={16} />);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    rerender(<Test key="third-test" minPaddingTop={8} />);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <Test
-        key="final-test"
-        minHeight={120}
-        minPaddingBottom={16}
-        minPaddingTop={8}
-        temporary
-      />
-    );
-    expect(getElement).toThrow();
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should not apply any style if it mounts while collapsed is false", () => {
-    const { container } = render(<Test defaultCollapsed={false} />);
-    const element = screen.getByTestId("element");
-    expect(element.style.minHeight).toBe("");
-    expect(element.style.paddingBottom).toBe("");
-    expect(element.style.paddingTop).toBe("");
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should correctly call the transition callbacks", () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExit = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    const props: TestProps = {
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-    };
-
-    render(<Test {...props} />);
-    const toggle = screen.getByRole("button");
-
-    expect(onEnter).not.toHaveBeenCalled();
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    fireEvent.click(toggle);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    fireEvent.click(toggle);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).toHaveBeenCalledTimes(1);
-    expect(onExiting).toHaveBeenCalledTimes(1);
-    expect(onExited).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).toHaveBeenCalledTimes(1);
-    expect(onExiting).toHaveBeenCalledTimes(1);
-    expect(onExited).toHaveBeenCalledTimes(1);
-  });
-});