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

package/src/tabs/__tests__/__snapshots__/Tab.tsx.snap

@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tab should support rendering an icon in different positions around the children 1`] = `
-<button
-  aria-selected="false"
-  class="rmd-tab rmd-interaction-surface"
-  id="tab-:r0:"
-  role="tab"
-  tabindex="-1"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    favorite
-  </span>
-  <span>
-    Tab
-  </span>
-</button>
-`;
-
-exports[`Tab should support rendering an icon in different positions around the children 2`] = `
-<button
-  aria-selected="false"
-  class="rmd-tab rmd-tab--stacked rmd-interaction-surface"
-  id="tab-:r0:"
-  role="tab"
-  tabindex="-1"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    favorite
-  </span>
-  <span>
-    Tab
-  </span>
-</button>
-`;
-
-exports[`Tab should support rendering an icon in different positions around the children 3`] = `
-<button
-  aria-selected="false"
-  class="rmd-tab rmd-tab--reversed rmd-interaction-surface"
-  id="tab-:r0:"
-  role="tab"
-  tabindex="-1"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    favorite
-  </span>
-  <span>
-    Tab
-  </span>
-</button>
-`;
-
-exports[`Tab should support rendering an icon in different positions around the children 4`] = `
-<button
-  aria-selected="false"
-  class="rmd-tab rmd-tab--stacked rmd-tab--stacked-reversed rmd-interaction-surface"
-  id="tab-:r0:"
-  role="tab"
-  tabindex="-1"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    favorite
-  </span>
-  <span>
-    Tab
-  </span>
-</button>
-`;

package/src/tabs/__tests__/__snapshots__/TabList.tsx.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TabList should update the tab indicator styles based on the active index 1`] = `
-<div
-  aria-orientation="horizontal"
-  class="rmd-tablist rmd-tablist--left rmd-tablist--full-width rmd-tablist--no-scrollbar rmd-tab-indicator rmd-tab-indicator--h rmd-tab-indicator--tablist-h"
-  role="tablist"
-  style="--rmd-tab-size: 120px; --rmd-tab-offset: 0px;"
-  tabindex="0"
->
-  <button
-    aria-controls="tab-:r0:-panel-1"
-    aria-selected="true"
-    class="rmd-tab rmd-tab--active rmd-interaction-surface"
-    id="tab-:r0:-1"
-    role="tab"
-    tabindex="-1"
-    type="button"
-  >
-    <span>
-      Tab 1
-    </span>
-  </button>
-  <button
-    aria-controls="tab-:r0:-panel-2"
-    aria-selected="false"
-    class="rmd-tab rmd-interaction-surface"
-    id="tab-:r0:-2"
-    role="tab"
-    tabindex="-1"
-    type="button"
-  >
-    <span>
-      Tab 2
-    </span>
-  </button>
-  <button
-    aria-controls="tab-:r0:-panel-3"
-    aria-selected="false"
-    class="rmd-tab rmd-interaction-surface"
-    id="tab-:r0:-3"
-    role="tab"
-    tabindex="-1"
-    type="button"
-  >
-    <span>
-      Tab 3
-    </span>
-  </button>
-</div>
-`;

package/src/tabs/__tests__/useTabs.tsx

@@ -1,212 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { type ReactElement } from "react";
-import {
-  rmdRender,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-
-import { Slide } from "../../transition/Slide.js";
-import { SlideContainer } from "../../transition/SlideContainer.js";
-import { isElementVisible } from "../../utils/isElementVisible.js";
-import { Tab } from "../Tab.js";
-import { TabList, type TabListProps } from "../TabList.js";
-import { useTabs, type TabsHookOptions } from "../useTabs.js";
-
-type TestProps = Omit<TabsHookOptions, "activeTab" | "setActiveTab"> &
-  Pick<TabListProps, "activationMode">;
-
-function Test(props: TestProps): ReactElement {
-  const { activationMode, ...options } = props;
-  const { getTabProps, getTabListProps, getTabPanelProps, getTabPanelsProps } =
-    useTabs(options);
-
-  return (
-    <>
-      <TabList {...getTabListProps()} activationMode={activationMode}>
-        <Tab {...getTabProps(0)}>Tab 1</Tab>
-        <Tab {...getTabProps(1)}>Tab 2</Tab>
-        <Tab {...getTabProps(2)}>Tab 3</Tab>
-      </TabList>
-      <SlideContainer {...getTabPanelsProps()} data-testid="panels">
-        <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>
-        <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>
-        <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>
-      </SlideContainer>
-    </>
-  );
-}
-
-describe("useTabs", () => {
-  it("should scroll to the top of the tab panels element unless disableScrollFix is true", async () => {
-    const user = userEvent.setup();
-    const { rerender } = rmdRender(<Test disableScrollFix />);
-
-    const panels = screen.getByTestId("panels");
-    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
-    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
-
-    const scrollTop = jest.spyOn(panels, "scrollTop", "set");
-
-    await user.click(tab2);
-    expect(scrollTop).not.toHaveBeenCalled();
-
-    rerender(<Test />);
-    await user.click(tab1);
-    expect(scrollTop).toHaveBeenCalledWith(0);
-  });
-
-  it("should move focus without selecting the next tab with keyboard movement when the activationMode is not automatic", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test />);
-    const tabList = screen.getByRole("tablist");
-    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
-    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
-    const tab3 = screen.getByRole("tab", { name: "Tab 3" });
-    const panel1 = screen.getByRole("tabpanel", { name: "Tab 1" });
-    const panel2 = screen.getByRole("tabpanel", { name: "Tab 2" });
-    const panel3 = screen.getByRole("tabpanel", { name: "Tab 3" });
-
-    expect(isElementVisible(panel1)).toBe(true);
-    expect(isElementVisible(panel2)).toBe(false);
-    expect(isElementVisible(panel3)).toBe(false);
-
-    expect(tabList).toHaveAttribute("tabIndex", "0");
-    expect(tab1).toHaveAttribute("aria-selected", "true");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-
-    await user.tab();
-    expect(document.activeElement).toBe(tab1);
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "true");
-    expect(tab1).toHaveAttribute("tabIndex", "0");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-
-    await user.keyboard("[ArrowRight]");
-    expect(document.activeElement).toBe(tab2);
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "true");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "0");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-
-    await user.keyboard("[Space]");
-    await waitFor(() => {
-      expect(isElementVisible(panel1)).toBe(false);
-    });
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "true");
-    expect(tab2).toHaveAttribute("tabIndex", "0");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-
-    expect(isElementVisible(panel1)).toBe(false);
-    expect(isElementVisible(panel2)).toBe(true);
-    expect(isElementVisible(panel3)).toBe(false);
-
-    await user.keyboard("[ArrowLeft]");
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "0");
-    expect(tab2).toHaveAttribute("aria-selected", "true");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-    expect(isElementVisible(panel1)).toBe(false);
-    expect(isElementVisible(panel2)).toBe(true);
-    expect(isElementVisible(panel3)).toBe(false);
-
-    await user.keyboard("[End][Enter]");
-    await waitFor(() => {
-      expect(isElementVisible(panel3)).toBe(true);
-    });
-    expect(isElementVisible(panel2)).toBe(false);
-    expect(isElementVisible(panel1)).toBe(false);
-
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "true");
-    expect(tab3).toHaveAttribute("tabIndex", "0");
-
-    expect(isElementVisible(panel1)).toBe(false);
-    expect(isElementVisible(panel2)).toBe(false);
-    expect(isElementVisible(panel3)).toBe(true);
-
-    // supports text wrapping wrapping
-    await user.keyboard("[ArrowRight]");
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "0");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "true");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-
-    await user.keyboard("[ArrowLeft]");
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "true");
-    expect(tab3).toHaveAttribute("tabIndex", "0");
-
-    await user.keyboard("tt[Space]");
-    await waitFor(() => {
-      expect(isElementVisible(panel3)).toBe(false);
-    });
-    expect(isElementVisible(panel1)).toBe(false);
-    expect(isElementVisible(panel2)).toBe(true);
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "true");
-    expect(tab2).toHaveAttribute("tabIndex", "0");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-  });
-
-  it("should focus and select next tab when the activationMode is set to automatic", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test activationMode="automatic" />);
-    const tabList = screen.getByRole("tablist");
-    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
-    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
-    const tab3 = screen.getByRole("tab", { name: "Tab 3" });
-
-    await user.tab();
-    expect(document.activeElement).toBe(tab1);
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "true");
-    expect(tab1).toHaveAttribute("tabIndex", "0");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-    expect(tab2).toHaveAttribute("tabIndex", "-1");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-
-    await user.keyboard("[ArrowRight]");
-    expect(document.activeElement).toBe(tab2);
-    expect(tabList).toHaveAttribute("tabIndex", "-1");
-    expect(tab1).toHaveAttribute("aria-selected", "false");
-    expect(tab1).toHaveAttribute("tabIndex", "-1");
-    expect(tab2).toHaveAttribute("aria-selected", "true");
-    expect(tab2).toHaveAttribute("tabIndex", "0");
-    expect(tab3).toHaveAttribute("aria-selected", "false");
-    expect(tab3).toHaveAttribute("tabIndex", "-1");
-  });
-});

package/src/tabs/_tabs.scss

@@ -1,273 +0,0 @@
-@use "sass:map";
-
-@use "../utils";
-@use "../theme/theme";
-@use "../transition/transition";
-@use "../typography/typography";
-@use "../interaction/interaction";
-@use "../icon/icon";
-
-$disable-everything: false !default;
-$disable-icon: false !default;
-$disable-stacked: false !default;
-$disable-reversed: false !default;
-$disable-tablist-padded: false !default;
-$disable-tablist-vertical: false !default;
-$disable-tablist-indicator: false !default;
-$disable-tablist-hidden-scrollbar: false !default;
-$disable-tablist-scroll-button: false !default;
-$disable-tablist-active-indicator-transition: false !default;
-$disable-indicator: false !default;
-$disable-indicator-vertical: false !default;
-
-$typography: map.remove(typography.$button-styles, line-height) !default;
-$gap: icon.$spacing !default;
-$height: 3rem !default;
-$stacked-height: 4.5rem !default;
-$horizontal-padding: 1rem !default;
-$vertical-padding: 0.75rem !default;
-$min-width: 5.625rem !default;
-$max-width: 20rem !default;
-$indicator-height: 0.125rem !default;
-$indicator-background: theme.theme-get-var(primary-color) !default;
-$active-color: theme.theme-get-var(text-primary-color) !default;
-$inactive-color: theme.theme-get-var(text-secondary-color) !default;
-$disabled-color: theme.theme-get-var(text-disabled-color) !default;
-$transition-duration: transition.$linear-duration !default;
-$transition-timing-function: transition.$linear-timing-function !default;
-
-$tablist-padding-left: 3.25rem !default;
-$tablist-scroller-z-index: 2 !default;
-$tablist-scroller-background-color: theme.theme-get-var(
-  background-color,
-  inherit
-) !default;
-$tablist-vertical-indicator-left: 0 !default;
-
-$variables: (
-  color,
-  active-color,
-  inactive-color,
-  disabled-color,
-  indicator-background
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "tab");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin indicator-styles {
-  .rmd-tab-indicator {
-    &::after {
-      @include use-var(background, indicator-background);
-
-      content: "";
-      pointer-events: none;
-      position: absolute;
-      z-index: 1;
-    }
-
-    &--h::after {
-      bottom: 0;
-      height: $indicator-height;
-      width: 100%;
-    }
-
-    @if not $disable-indicator-vertical {
-      &--v::after {
-        @include utils.auto-rtl(left, $tablist-vertical-indicator-left);
-
-        height: 100%;
-        top: 0;
-        width: $indicator-height;
-      }
-    }
-
-    @if not $disable-tablist-indicator {
-      &--tablist-h::after {
-        left: 0;
-        max-width: var(--rmd-tab-size, $min-width);
-        transform: translateX(var(--rmd-tab-offset, 0));
-      }
-
-      @if not $disable-tablist-vertical {
-        &--tablist-v::after {
-          max-height: var(--rmd-tab-size, $min-width);
-          transform: translateY(var(--rmd-tab-offset, 0));
-        }
-      }
-    }
-
-    @if not $disable-tablist-active-indicator-transition {
-      &--animate::after {
-        transition-duration: $transition-duration;
-        transition-property: transform, max-width;
-        transition-timing-function: $transition-timing-function;
-      }
-    }
-  }
-}
-
-@mixin tablist-styles {
-  .rmd-tablist {
-    display: inline-flex;
-    // disable shrinking since tabs should normally be full width and this
-    // also fixes issues when placed within a flex column container
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-    // make sure it can enable scrollbars in flex/grid containers
-    max-width: 100%;
-    outline: none;
-    overflow-x: auto;
-    position: relative;
-
-    &--full-width {
-      display: flex;
-      width: 100%;
-    }
-
-    @if not $disable-tablist-hidden-scrollbar {
-      &--no-scrollbar {
-        @include utils.hide-scrollbar;
-      }
-    }
-
-    @if not $disable-tablist-vertical {
-      &--vertical {
-        flex-direction: column;
-      }
-    }
-
-    @if not $disable-tablist-padded {
-      &--padded {
-        @include utils.auto-rtl(padding-left, $tablist-padding-left);
-      }
-    }
-
-    &--center {
-      justify-content: center;
-    }
-  }
-}
-
-@mixin tablist-button-styles {
-  .rmd-tablist-button {
-    align-items: center;
-    background-color: $tablist-scroller-background-color;
-    display: inline-flex;
-    flex-shrink: 0;
-    justify-content: center;
-    position: sticky;
-    z-index: $tablist-scroller-z-index;
-
-    &--left {
-      @include utils.auto-rtl(left, 0);
-    }
-
-    &--right {
-      @include utils.auto-rtl(right, 0);
-    }
-
-    &__button {
-      @include utils.rtl {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
-
-@mixin tab-styles {
-  .rmd-tab {
-    @include utils.map-to-styles($typography);
-    @include use-var(color);
-    @if not $disable-icon {
-      @include icon.set-var(color, currentcolor);
-    }
-
-    align-items: center;
-    background-color: transparent;
-    border-width: 0;
-    display: inline-flex;
-    flex: 1 1 auto;
-    gap: $gap;
-    height: $height;
-    justify-content: center;
-    max-width: $max-width;
-    min-width: $min-width;
-    padding: 0 $horizontal-padding;
-    transition: color $transition-duration $transition-timing-function;
-
-    @if not $disable-stacked {
-      &--stacked {
-        flex-direction: column;
-        height: $stacked-height;
-        padding: $vertical-padding $horizontal-padding;
-      }
-
-      @if not $disable-reversed {
-        &--stacked-reversed {
-          flex-direction: column-reverse;
-        }
-      }
-    }
-
-    @if not $disable-reversed {
-      &--reversed {
-        flex-direction: row-reverse;
-      }
-    }
-
-    &--active {
-      @include set-var(color, get-var(active-color));
-    }
-
-    &--disabled {
-      @include set-var(color, get-var(disabled-color));
-    }
-  }
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(color, $inactive-color);
-    @include set-var(active-color, $active-color);
-    @include set-var(inactive-color, $inactive-color);
-    @include set-var(disabled-color, $disabled-color);
-
-    @if not $disable-indicator {
-      @include set-var(indicator-background, $indicator-background);
-    }
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(tabs, $disable-layer) {
-      @include tablist-styles;
-      @include tab-styles;
-
-      @if not $disable-indicator {
-        @include indicator-styles;
-      }
-
-      @if not $disable-tablist-scroll-button {
-        @include tablist-button-styles;
-      }
-    }
-  }
-}