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

package/src/menu/__tests__/__snapshots__/DropdownMenu.tsx.snap

@@ -1,292 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DropdownMenu should allow for a custom dropdown icon before or after the children 1`] = `
-<button
-  aria-haspopup="menu"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  id="menubutton-:r1s:"
-  type="button"
->
-  <span>
-    Dropdown
-  </span>
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-  >
-    favorite
-  </span>
-</button>
-`;
-
-exports[`DropdownMenu should allow for a custom dropdown icon before or after the children 2`] = `
-<button
-  aria-haspopup="menu"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  id="menubutton-:r1s:"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-  >
-    favorite
-  </span>
-  <span>
-    Dropdown
-  </span>
-</button>
-`;
-
-exports[`DropdownMenu should allow for a custom dropdown icon before or after the children 3`] = `
-<button
-  aria-haspopup="menu"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  id="menubutton-:r1s:"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    favorite
-  </span>
-  <span>
-    Dropdown
-  </span>
-</button>
-`;
-
-exports[`DropdownMenu should be able to render as a sheet 1`] = `
-<div
-  aria-labelledby="menubutton-:r1f:"
-  class="rmd-dialog rmd-dialog--outline rmd-sheet rmd-sheet--vertical rmd-sheet--raised rmd-sheet--bottom rmd-sheet--touchable-height"
-  id="dialog-:r1l:"
-  role="dialog"
-  tabindex="-1"
->
-  <div
-    class="rmd-dialog__header"
-  >
-    <button
-      class="rmd-button rmd-button--text rmd-interaction-surface"
-      type="button"
-    >
-      <span>
-        Header Close
-      </span>
-    </button>
-  </div>
-  <div
-    aria-labelledby="menubutton-:r1f:"
-    class="rmd-menu"
-    id="menu-:r1h:"
-    role="menu"
-    tabindex="0"
-  >
-    <ul
-      class="rmd-list"
-      role="none"
-    >
-      <li
-        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-        id="menuitem-:r1m:"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          class="rmd-list-item__text"
-        >
-          Item 1
-        </span>
-      </li>
-      <li
-        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-        id="menuitem-:r1n:"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          class="rmd-list-item__text"
-        >
-          Item 2
-        </span>
-      </li>
-      <li
-        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-        id="menuitem-:r1o:"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          class="rmd-list-item__text"
-        >
-          Item 3
-        </span>
-      </li>
-    </ul>
-  </div>
-  <footer
-    class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--end"
-  >
-    <button
-      class="rmd-button rmd-button--text rmd-interaction-surface"
-      type="button"
-    >
-      <span>
-        Footer Close
-      </span>
-    </button>
-  </footer>
-</div>
-`;
-
-exports[`DropdownMenu should remove the dropdown icon when rendered as an icon button 1`] = `
-<button
-  aria-haspopup="menu"
-  aria-label="Options"
-  class="rmd-button rmd-button--icon rmd-interaction-surface"
-  id="menubutton-:r1p:"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    more_vert
-  </span>
-</button>
-`;
-
-exports[`DropdownMenu should remove the dropdown icon when rendered as an icon button 2`] = `
-<button
-  aria-haspopup="menu"
-  aria-label="Options"
-  class="rmd-button rmd-button--icon rmd-button--contained rmd-background-container rmd-secondary-container rmd-interaction-surface"
-  id="menubutton-:r1p:"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    more_vert
-  </span>
-</button>
-`;
-
-exports[`DropdownMenu should render as a button and toggle the visibility when clicked 1`] = `
-<button
-  aria-haspopup="menu"
-  class="rmd-button rmd-button--text rmd-interaction-surface"
-  id="menubutton-:r0:"
-  type="button"
->
-  <span>
-    Dropdown
-  </span>
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-  >
-    arrow_drop_down
-  </span>
-</button>
-`;
-
-exports[`DropdownMenu should render as a button and toggle the visibility when clicked 2`] = `
-<div
-  aria-labelledby="menubutton-:r0:"
-  class="rmd-menu rmd-menu--elevated"
-  id="menu-:r2:"
-  role="menu"
-  style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
-  tabindex="-1"
->
-  <ul
-    class="rmd-list"
-    role="none"
-  >
-    <li
-      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-      id="menuitem-:r3:"
-      role="menuitem"
-      tabindex="-1"
-    >
-      <span
-        class="rmd-list-item__text"
-      >
-        Item 1
-      </span>
-    </li>
-    <li
-      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-      id="menuitem-:r4:"
-      role="menuitem"
-      tabindex="-1"
-    >
-      <span
-        class="rmd-list-item__text"
-      >
-        Item 2
-      </span>
-    </li>
-    <li
-      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-      id="menuitem-:r5:"
-      role="menuitem"
-      tabindex="-1"
-    >
-      <span
-        class="rmd-list-item__text"
-      >
-        Item 3
-      </span>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`DropdownMenu should render as a menuitem when a DropdownMenu is a child of another DropdownMenu 1`] = `
-<li
-  aria-haspopup="menu"
-  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-menu-item"
-  id="menuitem-:r22:"
-  role="menuitem"
-  tabindex="-1"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Nested Dropdown 1
-  </span>
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon--after rmd-list-item__addon"
-  >
-    keyboard_arrow_right
-  </span>
-</li>
-`;
-
-exports[`DropdownMenu should render as a menuitem when a DropdownMenu is a child of another DropdownMenu 2`] = `
-<li
-  aria-haspopup="dialog"
-  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-menu-item"
-  id="menuitem-:r26:"
-  role="menuitem"
-  tabindex="-1"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    Nested Dropdown 2
-  </span>
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon--after rmd-list-item__addon"
-  >
-    keyboard_arrow_right
-  </span>
-</li>
-`;

package/src/menu/__tests__/__snapshots__/MenuBar.tsx.snap

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MenuBar should support a click-first hover mode behavior by default 1`] = `
-<ul
-  aria-label="Example"
-  class="rmd-list rmd-list--horizontal"
-  role="menubar"
-  tabindex="0"
->
-  <li
-    aria-haspopup="menu"
-    class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-menu-item"
-    id="menuitem-:r0:"
-    role="menuitem"
-    tabindex="-1"
-  >
-    <span
-      class="rmd-list-item__text"
-    >
-      Font
-    </span>
-    <span
-      aria-hidden="true"
-      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon--after rmd-list-item__addon"
-    >
-      arrow_drop_down
-    </span>
-  </li>
-  <li
-    aria-haspopup="menu"
-    class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-menu-item"
-    id="menuitem-:r4:"
-    role="menuitem"
-    tabindex="-1"
-  >
-    <span
-      class="rmd-list-item__text"
-    >
-      Style
-    </span>
-    <span
-      aria-hidden="true"
-      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon--after rmd-list-item__addon"
-    >
-      arrow_drop_down
-    </span>
-  </li>
-  <li
-    aria-haspopup="menu"
-    class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-menu-item"
-    id="menuitem-:r8:"
-    role="menuitem"
-    tabindex="-1"
-  >
-    <span
-      class="rmd-list-item__text"
-    >
-      Text Align
-    </span>
-    <span
-      aria-hidden="true"
-      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon--after rmd-list-item__addon"
-    >
-      arrow_drop_down
-    </span>
-  </li>
-  <li
-    aria-haspopup="menu"
-    class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-menu-item"
-    id="menuitem-:rc:"
-    role="menuitem"
-    tabindex="-1"
-  >
-    <span
-      class="rmd-list-item__text"
-    >
-      Size
-    </span>
-    <span
-      aria-hidden="true"
-      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon--after rmd-list-item__addon"
-    >
-      arrow_drop_down
-    </span>
-  </li>
-</ul>
-`;

package/src/menu/__tests__/__snapshots__/MenuItemCircularProgress.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MenuItemCircularProgress should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<li
-  class="rmd-list-item rmd-interaction-surface"
-  data-testid="li"
-  role="none"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    <span
-      aria-label="Loading"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      class="rmd-circular-progress rmd-circular-progress--dense rmd-circular-progress--centered rmd-primary-color"
-      id="circular-progress-:r0:"
-      role="progressbar"
-    >
-      <svg
-        class="rmd-circular-progress__svg rmd-circular-progress__svg--indeterminate"
-        viewBox="0 0 66 66"
-      >
-        <circle
-          class="rmd-circular-progress__circle rmd-circular-progress__circle--indeterminate"
-          cx="33"
-          cy="33"
-          r="30"
-        />
-      </svg>
-    </span>
-  </span>
-</li>
-`;
-
-exports[`MenuItemCircularProgress should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<li
-  class="rmd-list-item rmd-interaction-surface custom-class-name"
-  data-testid="li"
-  role="none"
->
-  <span
-    class="rmd-list-item__text"
-  >
-    <span
-      aria-label="Loading"
-      aria-valuemax="100"
-      aria-valuemin="0"
-      class="rmd-circular-progress rmd-circular-progress--dense rmd-circular-progress--centered rmd-primary-color"
-      id="circular-progress-:r0:"
-      role="progressbar"
-      style="color: white;"
-    >
-      <svg
-        class="rmd-circular-progress__svg rmd-circular-progress__svg--indeterminate"
-        viewBox="0 0 66 66"
-      >
-        <circle
-          class="rmd-circular-progress__circle rmd-circular-progress__circle--indeterminate"
-          cx="33"
-          cy="33"
-          r="30"
-        />
-      </svg>
-    </span>
-  </span>
-</li>
-`;

package/src/menu/__tests__/__snapshots__/useContextMenu.tsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useContextMenu should work as expected 1`] = `
-<div
-  aria-label="Context Menu"
-  class="rmd-menu rmd-menu--elevated"
-  id="menu-:r0:"
-  role="menu"
-  style="left: 300px; top: 600px; position: fixed; transform-origin: 0 0;"
-  tabindex="-1"
->
-  <ul
-    class="rmd-list"
-    role="none"
-  >
-    <li
-      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-      id="menuitem-:r1:"
-      role="menuitem"
-      tabindex="-1"
-    >
-      <span
-        class="rmd-list-item__text"
-      >
-        Cut
-      </span>
-    </li>
-    <li
-      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-      id="menuitem-:r2:"
-      role="menuitem"
-      tabindex="-1"
-    >
-      <span
-        class="rmd-list-item__text"
-      >
-        Copy
-      </span>
-    </li>
-    <li
-      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item"
-      id="menuitem-:r3:"
-      role="menuitem"
-      tabindex="-1"
-    >
-      <span
-        class="rmd-list-item__text"
-      >
-        Paste
-      </span>
-    </li>
-  </ul>
-</div>
-`;

package/src/menu/__tests__/useContextMenu.tsx

@@ -1,41 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { type ReactElement } from "react";
-import { fireEvent, rmdRender, screen } from "../../test-utils/index.js";
-import { Menu } from "../Menu.js";
-import { MenuItem } from "../MenuItem.js";
-import { useContextMenu } from "../useContextMenu.js";
-
-function Test(): ReactElement {
-  const { menuProps, onContextMenu } = useContextMenu();
-  return (
-    <>
-      <label>
-        Example
-        <textarea onContextMenu={onContextMenu} />
-      </label>
-      <Menu {...menuProps}>
-        <MenuItem>Cut</MenuItem>
-        <MenuItem>Copy</MenuItem>
-        <MenuItem>Paste</MenuItem>
-      </Menu>
-    </>
-  );
-}
-
-describe("useContextMenu", () => {
-  // I should add some real tests later...
-  it("should work as expected", async () => {
-    rmdRender(<Test />);
-    const textarea = screen.getByRole("textbox", { name: "Example" });
-
-    fireEvent.contextMenu(textarea, {
-      clientX: 300,
-      clientY: 600,
-    });
-
-    const menu = await screen.findByRole("menu", { name: "Context Menu" });
-    // mostly verifying that the useFixedPositioning allows for the initialX and
-    // initialY set by clientX and clientY
-    expect(menu).toMatchSnapshot();
-  });
-});

package/src/menu/__tests__/utils.ts

@@ -1,121 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import {
-  BELOW_CENTER_ANCHOR,
-  BELOW_INNER_LEFT_ANCHOR,
-  BOTTOM_INNER_LEFT_ANCHOR,
-  BOTTOM_INNER_RIGHT_ANCHOR,
-  CENTER_CENTER_ANCHOR,
-  CENTER_RIGHT_ANCHOR,
-  TOP_INNER_LEFT_ANCHOR,
-  TOP_INNER_RIGHT_ANCHOR,
-  TOP_RIGHT_ANCHOR,
-} from "../../positioning/constants.js";
-
-import { getDefaultAnchor } from "../utils.js";
-
-describe("getDefaultAnchor", () => {
-  it("should return a default anchor based on the menubar, menuitem, and horizontal flags", () => {
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: false,
-        floating: "bottom-left",
-        horizontal: false,
-      })
-    ).toBe(BOTTOM_INNER_LEFT_ANCHOR);
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: false,
-        floating: "bottom-right",
-        horizontal: false,
-      })
-    ).toBe(BOTTOM_INNER_RIGHT_ANCHOR);
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: false,
-        floating: "top-left",
-        horizontal: false,
-      })
-    ).toBe(TOP_INNER_LEFT_ANCHOR);
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: false,
-        floating: "top-right",
-        horizontal: false,
-      })
-    ).toBe(TOP_INNER_RIGHT_ANCHOR);
-
-    expect(
-      getDefaultAnchor({
-        menubar: true,
-        menuitem: false,
-        floating: null,
-        horizontal: false,
-      })
-    ).toBe(BELOW_INNER_LEFT_ANCHOR);
-    expect(
-      getDefaultAnchor({
-        menubar: true,
-        menuitem: false,
-        floating: null,
-        horizontal: true,
-      })
-    ).toBe(BELOW_INNER_LEFT_ANCHOR);
-    expect(
-      getDefaultAnchor({
-        menubar: true,
-        menuitem: true,
-        floating: null,
-        horizontal: false,
-      })
-    ).toBe(CENTER_RIGHT_ANCHOR);
-    expect(
-      getDefaultAnchor({
-        menubar: true,
-        menuitem: true,
-        floating: null,
-        horizontal: true,
-      })
-    ).toBe(CENTER_RIGHT_ANCHOR);
-
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: false,
-        floating: null,
-        horizontal: true,
-      })
-    ).toBe(BELOW_CENTER_ANCHOR);
-
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: true,
-        floating: null,
-        horizontal: false,
-      })
-    ).toBe(TOP_RIGHT_ANCHOR);
-
-    expect(
-      getDefaultAnchor({
-        menubar: false,
-        menuitem: false,
-        floating: null,
-        horizontal: false,
-      })
-    ).toBe(TOP_INNER_RIGHT_ANCHOR);
-
-    expect(
-      getDefaultAnchor({
-        anchor: CENTER_CENTER_ANCHOR,
-        menubar: false,
-        menuitem: false,
-        floating: null,
-        horizontal: false,
-      })
-    ).toBe(CENTER_CENTER_ANCHOR);
-  });
-});