@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/src/tabs/__tests__/TabList.tsx

@@ -117,21 +117,23 @@ describe("TabList", () => {
       .mockReturnValue(120);
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
-    const tablist = getByRole("tablist");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
+    rmdRender(<Test />);
+    const tablist = screen.getByRole("tablist");
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
 
     // it should always start to 33.33% and then calculate the correct width
     // based on the number of tabs
-    expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe(
+    expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe(
       `${100 / 3}%`
     );
     expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("0px");
 
     // need to use waitFor since ResizeObserver uses requestAnimationFrame
     await waitFor(() => {
-      expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("120px");
+      expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe("120px");
+    });
+    await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("0px");
     });
 
@@ -142,7 +144,9 @@ describe("TabList", () => {
 
     await user.click(tab2);
     await waitFor(() => {
-      expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("90px");
+      expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe("90px");
+    });
+    await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("120px");
     });
 
@@ -151,7 +155,9 @@ describe("TabList", () => {
 
     await user.click(tab1);
     await waitFor(() => {
-      expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("90px");
+      expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe("90px");
+    });
+    await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("120px");
     });
   });
@@ -176,10 +182,12 @@ describe("TabList", () => {
       });
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test scrollButtons />);
-    const tablist = getByRole("tablist");
+    rmdRender(<Test scrollButtons />);
+    const tablist = screen.getByRole("tablist");
     await waitFor(() => {
       expect(backObserver).toBeDefined();
+    });
+    await waitFor(() => {
       expect(forwardObserver).toBeDefined();
     });
 
@@ -192,8 +200,8 @@ describe("TabList", () => {
       .mockReturnValue(0);
     jest.spyOn(tablist, "scrollWidth", "get").mockReturnValue(100);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     expect(back).toBeDisabled();
     expect(forward).not.toBeDisabled();
@@ -269,10 +277,12 @@ describe("TabList", () => {
       });
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test scrollButtons vertical />);
-    const tablist = getByRole("tablist");
+    rmdRender(<Test scrollButtons vertical />);
+    const tablist = screen.getByRole("tablist");
     await waitFor(() => {
       expect(backObserver).toBeDefined();
+    });
+    await waitFor(() => {
       expect(forwardObserver).toBeDefined();
     });
 
@@ -286,8 +296,8 @@ describe("TabList", () => {
     jest.spyOn(tablist, "scrollHeight", "get").mockReturnValue(100);
     jest.spyOn(tablist, "scrollWidth", "get").mockReturnValue(40);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     expect(back).toBeDisabled();
     expect(forward).not.toBeDisabled();
@@ -344,7 +354,7 @@ describe("TabList", () => {
   });
 
   it("should support custom labels for the scroll buttons", () => {
-    const { getByRole } = rmdRender(
+    rmdRender(
       <Test
         scrollButtons
         backwardScrollButtonProps={{
@@ -356,8 +366,8 @@ describe("TabList", () => {
       />
     );
 
-    const back = getByRole("button", { name: "Scroll left" });
-    const forward = getByRole("button", { name: "Scroll right" });
+    const back = screen.getByRole("button", { name: "Scroll left" });
+    const forward = screen.getByRole("button", { name: "Scroll right" });
 
     expect(back).toBeInTheDocument();
     expect(forward).toBeInTheDocument();
@@ -384,10 +394,10 @@ describe("TabList", () => {
       },
     }));
 
-    const { getByRole, rerender } = rmdRender(<Test scrollButtons />);
+    const { rerender } = rmdRender(<Test scrollButtons />);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
     expect(back).toBeInTheDocument();
     expect(forward).toBeInTheDocument();
 
@@ -405,8 +415,8 @@ describe("TabList", () => {
     expect(forward).not.toBeInTheDocument();
 
     rerender(<Test scrollButtons="allow-phone" />);
-    expect(getByRole("button", { name: "back" })).toBeInTheDocument();
-    expect(getByRole("button", { name: "forward" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "back" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "forward" })).toBeInTheDocument();
   });
 
   it("should support scrolling correctly in RTL mode", async () => {
@@ -429,16 +439,18 @@ describe("TabList", () => {
       });
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test scrollButtons />, {
+    rmdRender(<Test scrollButtons />, {
       wrapper: ({ children }) => (
         <WritingDirectionProvider defaultDir="rtl">
           {children}
         </WritingDirectionProvider>
       ),
     });
-    const tablist = getByRole("tablist");
+    const tablist = screen.getByRole("tablist");
     await waitFor(() => {
       expect(backObserver).toBeDefined();
+    });
+    await waitFor(() => {
       expect(forwardObserver).toBeDefined();
     });
 
@@ -451,8 +463,8 @@ describe("TabList", () => {
       .mockReturnValue(0);
     jest.spyOn(tablist, "scrollWidth", "get").mockReturnValue(100);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     expect(back).toBeDisabled();
     expect(forward).not.toBeDisabled();
@@ -517,15 +529,13 @@ describe("TabList", () => {
       behavior: "auto",
     }));
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(
-      <Test scrollButtons getScrollToOptions={getScrollToOptions} />
-    );
-    const tablist = getByRole("tablist");
+    rmdRender(<Test scrollButtons getScrollToOptions={getScrollToOptions} />);
+    const tablist = screen.getByRole("tablist");
     tablist.scrollTo ??= jest.fn();
     const scrollTo = jest.spyOn(tablist, "scrollTo");
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     await user.click(forward);
     expect(getScrollToOptions).toHaveBeenCalledWith({
@@ -562,8 +572,8 @@ describe("TabList", () => {
   });
 
   it("should support rendering scrollbars if the scrollbar prop is enabled", () => {
-    const { getByRole, rerender } = rmdRender(<Test />);
-    const tablist = getByRole("tablist");
+    const { rerender } = rmdRender(<Test />);
+    const tablist = screen.getByRole("tablist");
     expect(tablist).toHaveClass("rmd-tablist--no-scrollbar");
 
     rerender(<Test scrollbar />);
@@ -575,10 +585,10 @@ describe("TabList", () => {
     getIntersectionRatio.mockReturnValue(0.5);
     function TooltipTest(): ReactElement {
       const forwardTooltip = useTooltip({
-        hoverTime: 0,
+        hoverTimeout: 0,
       });
       const backwardTooltip = useTooltip({
-        hoverTime: 0,
+        hoverTimeout: 0,
       });
       return (
         <>
@@ -597,11 +607,11 @@ describe("TabList", () => {
       );
     }
 
-    const { getByRole } = rmdRender(<TooltipTest />);
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    rmdRender(<TooltipTest />);
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
-    expect(() => getByRole("tooltip")).toThrow();
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.mouseEnter(back);
     await waitFor(() => {
@@ -612,7 +622,7 @@ describe("TabList", () => {
 
     fireEvent.mouseLeave(back);
     await waitFor(() => {
-      expect(() => getByRole("tooltip")).toThrow();
+      expect(() => screen.getByRole("tooltip")).toThrow();
     });
 
     fireEvent.mouseEnter(forward);
@@ -624,7 +634,7 @@ describe("TabList", () => {
 
     fireEvent.mouseLeave(forward);
     await waitFor(() => {
-      expect(() => getByRole("tooltip")).toThrow();
+      expect(() => screen.getByRole("tooltip")).toThrow();
     });
   });
 });

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

@@ -3,9 +3,9 @@
 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--tablist"
+  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-width: 120px; --rmd-tab-offset: 0px;"
+  style="--rmd-tab-size: 120px; --rmd-tab-offset: 0px;"
   tabindex="0"
 >
   <button

package/src/tabs/__tests__/useTabs.tsx

@@ -1,6 +1,11 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { type ReactElement } from "react";
-import { rmdRender, userEvent, waitFor } from "../../test-utils/index.js";
+import {
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../test-utils/index.js";
 
 import { Slide } from "../../transition/Slide.js";
 import { SlideContainer } from "../../transition/SlideContainer.js";
@@ -36,13 +41,11 @@ function Test(props: TestProps): ReactElement {
 describe("useTabs", () => {
   it("should scroll to the top of the tab panels element unless disableScrollFix is true", async () => {
     const user = userEvent.setup();
-    const { getByRole, getByTestId, rerender } = rmdRender(
-      <Test disableScrollFix />
-    );
+    const { rerender } = rmdRender(<Test disableScrollFix />);
 
-    const panels = getByTestId("panels");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
+    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");
 
@@ -56,14 +59,14 @@ describe("useTabs", () => {
 
   it("should move focus without selecting the next tab with keyboard movement when the activationMode is not automatic", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
-    const tabList = getByRole("tablist");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
-    const tab3 = getByRole("tab", { name: "Tab 3" });
-    const panel1 = getByRole("tabpanel", { name: "Tab 1" });
-    const panel2 = getByRole("tabpanel", { name: "Tab 2" });
-    const panel3 = getByRole("tabpanel", { name: "Tab 3" });
+    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);
@@ -127,10 +130,10 @@ describe("useTabs", () => {
 
     await user.keyboard("[End][Enter]");
     await waitFor(() => {
-      expect(isElementVisible(panel2)).toBe(false);
-      expect(isElementVisible(panel1)).toBe(false);
       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");
@@ -165,10 +168,10 @@ describe("useTabs", () => {
 
     await user.keyboard("tt[Space]");
     await waitFor(() => {
-      expect(isElementVisible(panel1)).toBe(false);
-      expect(isElementVisible(panel2)).toBe(true);
       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");
@@ -180,11 +183,11 @@ describe("useTabs", () => {
 
   it("should focus and select next tab when the activationMode is set to automatic", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test activationMode="automatic" />);
-    const tabList = getByRole("tablist");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
-    const tab3 = getByRole("tab", { name: "Tab 3" });
+    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);

package/src/tabs/_tabs.scss

@@ -13,11 +13,12 @@ $disable-stacked: false !default;
 $disable-reversed: false !default;
 $disable-tablist-padded: false !default;
 $disable-tablist-vertical: false !default;
-$disable-indicator: 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;
@@ -41,46 +42,29 @@ $tablist-scroller-background-color: theme.theme-get-var(
   background-color,
   inherit
 ) !default;
-
-$var-lookup: (
-  color: (
-    var: --rmd-tab-color,
-    value: $inactive-color,
-  ),
-  active-color: (
-    var: --rmd-tab-active-color,
-    value: $active-color,
-  ),
-  inactive-color: (
-    var: --rmd-tab-inactive-color,
-    value: $inactive-color,
-  ),
-  disabled-color: (
-    var: --rmd-tab-disabled-color,
-    value: $disabled-color,
-  ),
-  indicator-background: (
-    var: --rmd-tab-indicator-background,
-    value: $indicator-background,
-  ),
+$tablist-vertical-indicator-left: 0 !default;
+
+$variables: (
+  color,
+  active-color,
+  inactive-color,
+  disabled-color,
+  indicator-background
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tabs var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tab");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tabs var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -92,21 +76,41 @@ $var-lookup: (
     &::after {
       @include use-var(background, indicator-background);
 
-      bottom: 0;
       content: "";
-      height: $indicator-height;
       pointer-events: none;
       position: absolute;
-      width: 100%;
       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::after {
+      &--tablist-h::after {
         left: 0;
-        max-width: var(--rmd-tab-width, $min-width);
+        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 {
@@ -126,6 +130,8 @@ $var-lookup: (
     // 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;
@@ -144,16 +150,6 @@ $var-lookup: (
     @if not $disable-tablist-vertical {
       &--vertical {
         flex-direction: column;
-
-        @if not $disable-tablist-indicator {
-          &::after {
-            bottom: auto;
-            left: auto;
-            right: 0;
-            top: 0;
-            transform: translateY(var(--rmd-tab-offset, 0));
-          }
-        }
       }
     }
 
@@ -246,17 +242,32 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include tablist-styles;
-    @include tab-styles;
+    @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 indicator-styles;
+      @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;
+      @if not $disable-tablist-scroll-button {
+        @include tablist-button-styles;
+      }
     }
   }
 }

package/src/tabs/tabIndicatorStyles.ts

@@ -8,8 +8,9 @@ const styles = bem("rmd-tab-indicator");
  */
 export interface TabIndicatorClassNameOptions {
   className?: string;
-  tablist?: boolean;
   animate?: boolean;
+  tablist?: boolean;
+  vertical?: boolean;
 }
 
 /**
@@ -18,7 +19,16 @@ export interface TabIndicatorClassNameOptions {
 export function tabIndicator(
   options: TabIndicatorClassNameOptions = {}
 ): string {
-  const { className, tablist, animate } = options;
+  const { className, vertical, tablist, animate } = options;
 
-  return cnb(styles({ tablist, animate }), className);
+  return cnb(
+    styles({
+      animate,
+      h: !vertical,
+      v: vertical,
+      "tablist-h": tablist && !vertical,
+      "tablist-v": tablist && vertical,
+    }),
+    className
+  );
 }

package/src/tabs/tabListStyles.ts

@@ -46,7 +46,7 @@ export function tabList(options: TabListClassNameOptions = {}): string {
       "full-width": !inline,
       "no-scrollbar": !scrollbar,
     }),
-    indicator && tabIndicator({ tablist: true, animate }),
+    indicator && tabIndicator({ tablist: true, animate, vertical }),
     className
   );
 }

package/src/tabs/tabStyles.ts

@@ -20,7 +20,9 @@ const styles = bem("rmd-tab");
 export interface TabClassNameOptions {
   className?: string;
   active?: boolean;
+  isLink?: boolean;
   activeIndicator?: boolean;
+  verticalActiveIndicator?: boolean;
   stacked?: boolean;
   reversed?: boolean;
   disabled?: boolean;
@@ -30,8 +32,16 @@ export interface TabClassNameOptions {
  * @remarks \@since 6.0.0
  */
 export function tab(options: TabClassNameOptions = {}): string {
-  const { className, active, activeIndicator, stacked, reversed, disabled } =
-    options;
+  const {
+    className,
+    active,
+    isLink,
+    stacked,
+    reversed,
+    disabled,
+    activeIndicator,
+    verticalActiveIndicator,
+  } = options;
 
   return cnb(
     styles({
@@ -41,8 +51,10 @@ export function tab(options: TabClassNameOptions = {}): string {
       "stacked-reversed": stacked && reversed,
       disabled,
     }),
-    active && activeIndicator && tabIndicator(),
-    cssUtils({ surface: true }),
+    active &&
+      activeIndicator &&
+      tabIndicator({ vertical: verticalActiveIndicator }),
+    cssUtils({ surface: true, textDecoration: isLink ? "none" : undefined }),
     className
   );
 }