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

package/src/positioning/__tests__/createVerticalPosition.ts

@@ -1,464 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import type {
-  CreateVerticalPositionOptions,
-  FixConfig,
-} from "../createVerticalPosition.js";
-import {
-  createAnchoredAbove,
-  createVerticalPosition,
-} from "../createVerticalPosition.js";
-
-const containerRect1: DOMRect = {
-  left: 100,
-  right: 50,
-  top: 400,
-  bottom: 75,
-  height: 200,
-  width: 100,
-  x: 100,
-  y: 25,
-  toJSON() {},
-};
-
-const containerRect2: DOMRect = {
-  left: 50,
-  right: 100,
-  top: 75,
-  bottom: 25,
-  height: 100,
-  width: 200,
-  x: 200,
-  y: 75,
-  toJSON() {},
-};
-const config1: FixConfig = {
-  yMargin: 0,
-  vhMargin: 0,
-  elHeight: 50,
-  screenBottom: 1000,
-  disableSwapping: false,
-  containerRect: containerRect1,
-  disableVHBounds: false,
-  preventOverlap: false,
-};
-
-const config2: FixConfig = { ...config1, yMargin: 8 };
-const config3: FixConfig = { ...config1, vhMargin: 8 };
-const config4: FixConfig = { ...config1, yMargin: 16, vhMargin: 8 };
-const outOfBoundsConfig: FixConfig = {
-  ...config1,
-  initialY: -400,
-};
-
-const vh = 500;
-const topBoundsConfig1: FixConfig = {
-  yMargin: 0,
-  vhMargin: 0,
-  elHeight: 100,
-  screenBottom: vh,
-  preventOverlap: false,
-  disableSwapping: false,
-  disableVHBounds: false,
-  // position this element as if it's near the right edge of the screen
-  containerRect: {
-    top: 0,
-    bottom: 40,
-    left: 0,
-    right: 0,
-    // pretending an icon button
-    height: 40,
-    width: 40,
-    x: 0,
-    y: 0,
-    toJSON() {},
-  },
-};
-const topBoundsConfig2: FixConfig = { ...topBoundsConfig1, vhMargin: 8 };
-// const bottomBoundsConfig1: FixConfig = {
-//   yMargin: 0,
-//   vhMargin: 0,
-//   elHeight: 100,
-//   screenBottom: vh,
-//   preventOverlap: false,
-//   disableSwapping: false,
-//   disableVHBounds: false,
-//   // position this element as if it's near the bottom edge of the screen
-//   containerRect: {
-//     top: vh - 40,
-//     bottom: vh,
-//     left: 0,
-//     right: 0,
-//     // pretending an icon button
-//     height: 40,
-//     width: 40,
-//     x: 0,
-//     y: 0,
-//     toJSON() {},
-//   },
-// };
-// const bottomBoundsConfig2: FixConfig = { ...bottomBoundsConfig1, vhMargin: 8 };
-const largerThanViewportOptions1: CreateVerticalPositionOptions = {
-  y: "above",
-  vh,
-  vhMargin: 16,
-  yMargin: 0,
-  elHeight: vh + 400,
-  containerRect: containerRect1,
-  disableSwapping: false,
-  preventOverlap: false,
-  disableVHBounds: false,
-};
-const largerThanViewportOptions22: CreateVerticalPositionOptions = {
-  ...largerThanViewportOptions1,
-  vhMargin: 0,
-};
-
-describe("createAnchoredAbove", () => {
-  it("should return the top value if it is within the viewport", () => {
-    expect(createAnchoredAbove(config1)).toEqual({
-      top: 350,
-      actualY: "above",
-    });
-    expect(createAnchoredAbove(config2)).toEqual({
-      top: 342,
-      actualY: "above",
-    });
-    expect(createAnchoredAbove(config3)).toEqual({
-      top: 350,
-      actualY: "above",
-    });
-    expect(createAnchoredAbove(config4)).toEqual({
-      top: 334,
-      actualY: "above",
-    });
-  });
-
-  it("should swap to the below position if the element would appear out of the viewport", () => {
-    expect(createAnchoredAbove(topBoundsConfig1)).toEqual({
-      top: 40,
-      actualY: "below",
-    });
-    expect(createAnchoredAbove(topBoundsConfig2)).toEqual({
-      top: 40,
-      actualY: "below",
-    });
-  });
-
-  describe("disableVHBounds option", () => {
-    it("should return a top value greater than or equal to zero since browsers won't scroll upwards past the normal page top", () => {
-      const updatedConfig1: FixConfig = { ...config1, disableVHBounds: true };
-      const updatedConfig2: FixConfig = { ...config2, disableVHBounds: true };
-      const updatedConfig3: FixConfig = { ...config3, disableVHBounds: true };
-      const updatedConfig4: FixConfig = { ...config4, disableVHBounds: true };
-
-      expect(createAnchoredAbove(updatedConfig1)).toEqual({
-        top: 350,
-        actualY: "above",
-      });
-      expect(createAnchoredAbove(updatedConfig2)).toEqual({
-        top: 342,
-        actualY: "above",
-      });
-      expect(createAnchoredAbove(updatedConfig3)).toEqual({
-        top: 350,
-        actualY: "above",
-      });
-      expect(createAnchoredAbove(updatedConfig4)).toEqual({
-        top: 334,
-        actualY: "above",
-      });
-      expect(
-        createAnchoredAbove({ ...outOfBoundsConfig, disableVHBounds: true })
-      ).toEqual({
-        top: 0,
-        actualY: "above",
-      });
-    });
-  });
-});
-
-describe("createVerticalPosition", () => {
-  it("should force centered position for elements that cannot fit within the viewport when disableVHBounds is false and preventOverlap is false", () => {
-    expect(createVerticalPosition(largerThanViewportOptions1)).toEqual({
-      top: 16,
-      bottom: 16,
-      actualY: "center",
-      transformOriginY: containerRect1.top,
-    });
-    expect(createVerticalPosition(largerThanViewportOptions22)).toEqual({
-      top: 0,
-      bottom: 0,
-      actualY: "center",
-      transformOriginY: containerRect1.top,
-    });
-  });
-
-  it("should return the correct above position for elements that can fit within the viewport", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "above",
-      vh,
-      vhMargin: 16,
-      yMargin: 0,
-      elHeight: 100,
-      containerRect: containerRect1,
-      disableSwapping: false,
-      preventOverlap: false,
-      disableVHBounds: false,
-    };
-    const options2: CreateVerticalPositionOptions = {
-      ...options1,
-      disableVHBounds: true,
-    };
-    const options3: CreateVerticalPositionOptions = {
-      ...options1,
-      preventOverlap: true,
-    };
-    const options4: CreateVerticalPositionOptions = {
-      ...options1,
-      disableSwapping: true,
-    };
-    const options5: CreateVerticalPositionOptions = {
-      ...options1,
-      preventOverlap: true,
-      disableVHBounds: true,
-      disableSwapping: true,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 300,
-      actualY: "above",
-    });
-    expect(createVerticalPosition(options2)).toEqual({
-      top: 300,
-      actualY: "above",
-    });
-    expect(createVerticalPosition(options3)).toEqual({
-      top: 300,
-      actualY: "above",
-    });
-    expect(createVerticalPosition(options4)).toEqual({
-      top: 300,
-      actualY: "above",
-    });
-    expect(createVerticalPosition(options5)).toEqual({
-      top: 300,
-      actualY: "above",
-    });
-  });
-
-  it("should return the correct top position for elements that can fit within the viewport", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "top",
-      vh,
-      vhMargin: 16,
-      yMargin: 0,
-      elHeight: 100,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      preventOverlap: false,
-      disableVHBounds: false,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 75,
-      actualY: "top",
-    });
-  });
-
-  it("should return the correct center position for elements that can fit within the viewport", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "center",
-      vh,
-      vhMargin: 16,
-      yMargin: 0,
-      elHeight: 100,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      preventOverlap: false,
-      disableVHBounds: false,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 75,
-      actualY: "center",
-    });
-  });
-
-  it("should return the correct bottom position for elements that can fit within the viewport", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "bottom",
-      vh,
-      vhMargin: 16,
-      yMargin: 0,
-      elHeight: 100,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      preventOverlap: false,
-      disableVHBounds: false,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 75,
-      actualY: "bottom",
-    });
-  });
-
-  it("should return the correct below position for elements that can fit within the viewport", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "below",
-      vh,
-      vhMargin: 16,
-      yMargin: 0,
-      elHeight: 100,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      preventOverlap: false,
-      disableVHBounds: false,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 175,
-      actualY: "below",
-    });
-  });
-
-  it("should position the element to the top of the container element with any additional spacing", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "top",
-      vh,
-      yMargin: 0,
-      vhMargin: 16,
-      elHeight: 100,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      disableVHBounds: false,
-      preventOverlap: false,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 75,
-      actualY: "top",
-    });
-
-    expect(createVerticalPosition({ ...options1, yMargin: 8 })).toEqual({
-      top: 83,
-      actualY: "top",
-    });
-  });
-
-  it("should position the element to the center of the container element", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "center",
-      vh,
-      yMargin: 0,
-      vhMargin: 16,
-      elHeight: 120,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      disableVHBounds: false,
-      preventOverlap: false,
-    };
-    const options2: CreateVerticalPositionOptions = {
-      ...options1,
-      yMargin: 20,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 65,
-      actualY: "center",
-    });
-    expect(createVerticalPosition(options2)).toEqual({
-      top: 85,
-      actualY: "center",
-    });
-  });
-
-  it("should never allow the element to be positioned outside of the viewport", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "center",
-      vh,
-      yMargin: 0,
-      vhMargin: 16,
-      elHeight: 120,
-      containerRect: {
-        ...containerRect2,
-        top: 40,
-        height: 48,
-      },
-      disableSwapping: false,
-      disableVHBounds: false,
-      preventOverlap: false,
-    };
-    const options2: CreateVerticalPositionOptions = {
-      ...options1,
-      elHeight: vh - 40,
-      containerRect: containerRect1,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 16,
-      actualY: "center",
-    });
-
-    expect(createVerticalPosition(options2)).toEqual({
-      top: 24,
-      actualY: "center",
-    });
-  });
-
-  it("should position the element to the bottom of the container element with any additional spacing", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "bottom",
-      vh,
-      yMargin: 0,
-      vhMargin: 16,
-      elHeight: 80,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      disableVHBounds: false,
-      preventOverlap: false,
-    };
-    const options2: CreateVerticalPositionOptions = {
-      ...options1,
-      yMargin: 8,
-      containerRect: containerRect1,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 95,
-      actualY: "bottom",
-    });
-
-    expect(createVerticalPosition(options2)).toEqual({
-      top: 512,
-      actualY: "bottom",
-    });
-  });
-
-  it("should position the element below the container element with any additional spacing", () => {
-    const options1: CreateVerticalPositionOptions = {
-      y: "below",
-      vh,
-      yMargin: 0,
-      vhMargin: 16,
-      elHeight: 80,
-      containerRect: containerRect2,
-      disableSwapping: false,
-      disableVHBounds: false,
-      preventOverlap: false,
-    };
-    const options2: CreateVerticalPositionOptions = {
-      ...options1,
-      yMargin: 8,
-    };
-
-    expect(createVerticalPosition(options1)).toEqual({
-      top: 175,
-      actualY: "below",
-    });
-    expect(createVerticalPosition(options2)).toEqual({
-      top: 183,
-      actualY: "below",
-    });
-  });
-});

package/src/positioning/__tests__/useFixedPositioning.tsx

@@ -1,205 +0,0 @@
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  jest,
-} from "@jest/globals";
-import { useRef, useState, type ReactElement } from "react";
-import { act, fireEvent, render, screen } from "../../test-utils/index.js";
-
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { useScaleTransition } from "../../transition/useScaleTransition.js";
-import { TOP_INNER_RIGHT_ANCHOR } from "../constants.js";
-import {
-  useFixedPositioning,
-  type FixedPositioningOptions,
-  type FixedPositioningTransitionCallbacks,
-} from "../useFixedPositioning.js";
-
-interface TestProps
-  extends Omit<
-    FixedPositioningOptions<HTMLButtonElement, HTMLDivElement>,
-    "fixedTo"
-  > {
-  defaultVisible?: boolean;
-}
-
-function Test({ defaultVisible = false, ...options }: TestProps): ReactElement {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [visible, setVisible] = useState(defaultVisible);
-  const { style, transitionOptions } = useFixedPositioning({
-    ...options,
-    fixedTo: buttonRef,
-  });
-  const { elementProps, rendered } = useScaleTransition({
-    ...transitionOptions,
-    transitionIn: visible,
-  });
-
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={() => setVisible((p) => !p)}
-      >
-        Toggle
-      </button>
-      {rendered && (
-        <div {...elementProps} style={style} data-testid="element">
-          Some content.
-        </div>
-      )}
-    </>
-  );
-}
-
-describe("useFixedPositioning", () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-  });
-
-  it("should default to fixing itself with the BELOW_CENTER_ANCHOR", () => {
-    const { container } = render(<Test />);
-    const getElement = (): HTMLElement => screen.getByTestId("element");
-    const button = screen.getByRole("button");
-
-    expect(getElement).toThrow();
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(button);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(button);
-    expect(getElement).not.toThrow();
-    expect(container).toMatchSnapshot();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(getElement).toThrow();
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should detect if the fixed element is still visible in the viewport on scroll events", () => {
-    const onScroll = jest.fn();
-    render(<Test onScroll={onScroll} />);
-    const toggle = screen.getByRole("button");
-
-    fireEvent.click(toggle);
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onScroll).not.toHaveBeenCalled();
-
-    const scrollEvent = new UIEvent("scroll");
-    act(() => {
-      window.dispatchEvent(scrollEvent);
-      jest.runAllTimers();
-    });
-
-    // this logic is really handled in the utils tests.
-    expect(onScroll).toHaveBeenCalledWith(scrollEvent, {
-      visible: expect.any(Boolean),
-      fixedElement: expect.any(HTMLElement),
-      fixedToElement: expect.any(HTMLElement),
-    });
-  });
-
-  it("should automatically update the style when the page is resized", () => {
-    const onResize = jest.fn();
-    render(<Test onResize={onResize} />);
-    const toggle = screen.getByRole("button");
-
-    fireEvent.click(toggle);
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onResize).not.toHaveBeenCalled();
-
-    act(() => {
-      window.dispatchEvent(new UIEvent("resize"));
-      jest.runAllTimers();
-    });
-    expect(onResize).toHaveBeenCalled();
-  });
-
-  it("should correctly call the transition callbacks", () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExited = jest.fn();
-    const props: Required<FixedPositioningTransitionCallbacks> = {
-      onEnter,
-      onEntering,
-      onEntered,
-      onExited,
-    };
-
-    render(<Test {...props} />);
-    const toggle = screen.getByRole("button");
-
-    expect(onEnter).not.toHaveBeenCalled();
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    fireEvent.click(toggle);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExited).not.toHaveBeenCalled();
-
-    fireEvent.click(toggle);
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExited).not.toHaveBeenCalled();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExited).toHaveBeenCalledTimes(1);
-  });
-
-  it("should allow for configuring the fixed position", () => {
-    const { container } = render(
-      <Test transformOrigin anchor={TOP_INNER_RIGHT_ANCHOR} />
-    );
-    const toggle = screen.getByRole("button");
-
-    fireEvent.click(toggle);
-    act(() => {
-      jest.runAllTimers();
-    });
-    expect(container).toMatchSnapshot();
-  });
-});