@sproutsocial/seeds-react-tabs 1.4.14 → 1.4.16

package/src/__tests__/tabs.test.tsx

@@ -1,462 +0,0 @@
-import * as React from "react";
-import {
-  render,
-  fireEvent,
-  screen,
-} from "@sproutsocial/seeds-react-testing-library";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Tabs, type TypeTabsProps } from "../";
-
-const leftArrowKey = {
-  key: "ArrowLeft",
-  code: 37,
-  keyCode: 37,
-};
-
-const rightArrowKey = {
-  key: "ArrowRight",
-  code: 39,
-  keyCode: 39,
-};
-
-interface TypeButtonData {
-  id: string;
-  text: string;
-}
-
-const mapTabButton = (button: TypeButtonData) => (
-  <Tabs.Button key={button.id} id={button.id}>
-    {button.text}
-  </Tabs.Button>
-);
-
-interface TypeTestStatefulTabsProps {
-  children: React.ReactNode;
-  selectedId?: string;
-  onSelect?: (id: string) => void;
-}
-
-const TestStatefulTabs = ({
-  children,
-  selectedId = "1",
-  onSelect = jest.fn(),
-}: TypeTestStatefulTabsProps) => {
-  const [state, setState] = React.useState({
-    selectedId,
-  });
-  return (
-    <Tabs
-      selectedId={state.selectedId}
-      onSelect={(id) => {
-        onSelect(id);
-        setState({
-          selectedId: id,
-        });
-      }}
-    >
-      {children}
-    </Tabs>
-  );
-};
-
-describe("Tabs", () => {
-  beforeEach(() => {
-    // jsdom doesn't implement Element.prototype.scrollIntoView or .scrollBy
-    Element.prototype.scrollIntoView = jest.fn();
-    Element.prototype.scrollBy = jest.fn();
-  });
-
-  const mockScrollDimensions = (
-    el: Element,
-    {
-      scrollWidth,
-      clientWidth,
-      scrollLeft,
-    }: { scrollWidth: number; clientWidth: number; scrollLeft: number }
-  ) => {
-    Object.defineProperty(el, "scrollWidth", {
-      value: scrollWidth,
-      configurable: true,
-    });
-    Object.defineProperty(el, "clientWidth", {
-      value: clientWidth,
-      configurable: true,
-    });
-    Object.defineProperty(el, "scrollLeft", {
-      value: scrollLeft,
-      configurable: true,
-      writable: true,
-    });
-  };
-
-  it("should render selected tab", () => {
-    render(
-      <TestStatefulTabs>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-      </TestStatefulTabs>
-    );
-    const firstTab = screen.getByText(/first/i);
-    const secondTab = screen.getByText(/second/i);
-    expect(firstTab).toHaveAttribute("tabindex", "0");
-    expect(secondTab).toHaveAttribute("tabindex", "-1");
-  });
-
-  it("should work when tab buttons aren't direct children", () => {
-    render(
-      <TestStatefulTabs>
-        <Box border="2px red solid">
-          <Tabs.Button id="1">First</Tabs.Button>
-        </Box>
-        <Box border="2px green solid">
-          <Tabs.Button id="2">Second</Tabs.Button>
-        </Box>
-      </TestStatefulTabs>
-    );
-    const tabs = screen.getByDataQaLabel({
-      tabs: "",
-    });
-    const secondTab = screen.getByText(/second/i);
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(secondTab).toHaveFocus();
-  });
-
-  it("should handle left arrow key", () => {
-    const onSelect = jest.fn();
-    render(
-      <TestStatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-      </TestStatefulTabs>
-    );
-    const tabs = screen.getByDataQaLabel({
-      tabs: "",
-    });
-    const secondTab = screen.getByText(/second/i);
-    const thirdTab = screen.getByText(/third/i);
-    fireEvent.keyDown(tabs, leftArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("3");
-    expect(thirdTab).toHaveFocus();
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, leftArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("2");
-    expect(secondTab).toHaveFocus();
-  });
-
-  it("should handle right arrow key", () => {
-    const onSelect = jest.fn();
-    render(
-      <TestStatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-      </TestStatefulTabs>
-    );
-    const tabs = screen.getByDataQaLabel({
-      tabs: "",
-    });
-    const firstTab = screen.getByText(/first/i);
-    const secondTab = screen.getByText(/second/i);
-    const thirdTab = screen.getByText(/third/i);
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("2");
-    expect(secondTab).toHaveFocus();
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("3");
-    expect(thirdTab).toHaveFocus();
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("1");
-    expect(firstTab).toHaveFocus();
-  });
-
-  it("should handle dynamically adding tabs", () => {
-    const onSelect = jest.fn();
-    const initialButtons = [
-      {
-        id: "1",
-        text: "First",
-      },
-      {
-        id: "2",
-        text: "Second",
-      },
-    ];
-    const addButton = initialButtons.concat({
-      id: "3",
-      text: "Third",
-    });
-    const { rerender } = render(
-      <TestStatefulTabs onSelect={onSelect}>
-        {initialButtons.map(mapTabButton)}
-      </TestStatefulTabs>
-    );
-    const tabs = screen.getByDataQaLabel({
-      tabs: "",
-    });
-    const secondTab = screen.getByText(/second/i);
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("2");
-    expect(secondTab).toHaveFocus();
-    rerender(
-      <TestStatefulTabs onSelect={onSelect}>
-        {addButton.map(mapTabButton)}
-      </TestStatefulTabs>
-    );
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    const thirdTab = screen.getByText(/third/i);
-    expect(onSelect).toHaveBeenCalledWith("3");
-    expect(thirdTab).toHaveFocus();
-  });
-
-  it("should handle dynamically removing tabs", () => {
-    const onSelect = jest.fn();
-    const initialButtons = [
-      {
-        id: "1",
-        text: "First",
-      },
-      {
-        id: "2",
-        text: "Second",
-      },
-      {
-        id: "3",
-        text: "Third",
-      },
-    ];
-    const removeButton = initialButtons.slice(1);
-    const { rerender } = render(
-      <TestStatefulTabs onSelect={onSelect}>
-        {initialButtons.map(mapTabButton)}
-      </TestStatefulTabs>
-    );
-    const tabs = screen.getByDataQaLabel({
-      tabs: "",
-    });
-    const secondTab = screen.getByText(/second/i);
-    const thirdTab = screen.getByText(/third/i);
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("2");
-    expect(secondTab).toHaveFocus();
-    rerender(
-      <TestStatefulTabs onSelect={onSelect}>
-        {removeButton.map(mapTabButton)}
-      </TestStatefulTabs>
-    );
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("3");
-    expect(thirdTab).toHaveFocus();
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("2");
-    expect(secondTab).toHaveFocus();
-  });
-
-  it("scrolls the focused tab into view on arrow-key navigation", () => {
-    render(
-      <TestStatefulTabs>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-      </TestStatefulTabs>
-    );
-    const tabs = screen.getByDataQaLabel({ tabs: "" });
-    const secondTab = screen.getByText(/second/i);
-
-    fireEvent.keyDown(tabs, rightArrowKey);
-
-    expect(secondTab.scrollIntoView).toHaveBeenCalledWith({
-      block: "nearest",
-      inline: "nearest",
-    });
-  });
-
-  it("scrolls the activated tab into view on click", () => {
-    render(
-      <TestStatefulTabs>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-      </TestStatefulTabs>
-    );
-    const secondTab = screen.getByText(/second/i);
-
-    fireEvent.click(secondTab);
-
-    expect(secondTab.scrollIntoView).toHaveBeenCalledWith({
-      block: "nearest",
-      inline: "nearest",
-    });
-  });
-
-  it("forwards aria-label to the tablist", () => {
-    render(
-      <Tabs
-        selectedId="1"
-        onSelect={jest.fn()}
-        aria-label="Repository sections"
-      >
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-      </Tabs>
-    );
-
-    const tablist = screen.getByRole("tablist", {
-      name: "Repository sections",
-    });
-    expect(tablist).toBeInTheDocument();
-  });
-
-  it("should handle dynamically changing tab ids", () => {
-    const onSelect = jest.fn();
-    const { rerender } = render(
-      <TestStatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-        <Tabs.Button id="4">Fourth</Tabs.Button>
-      </TestStatefulTabs>
-    );
-
-    rerender(
-      <TestStatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="6">Second</Tabs.Button>
-        <Tabs.Button id="5">Third</Tabs.Button>
-        <Tabs.Button id="4">Fourth</Tabs.Button>
-      </TestStatefulTabs>
-    );
-
-    const tabs = screen.getByDataQaLabel({
-      tabs: "",
-    });
-
-    const secondTab = screen.getByText(/second/i);
-    const thirdTab = screen.getByText(/third/i);
-    const fourthTab = screen.getByText(/fourth/i);
-
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("6");
-    expect(secondTab).toHaveFocus();
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("5");
-    expect(thirdTab).toHaveFocus();
-    onSelect.mockReset();
-    fireEvent.keyDown(tabs, rightArrowKey);
-    expect(onSelect).toHaveBeenCalledWith("4");
-    expect(fourthTab).toHaveFocus();
-  });
-
-  describe("wheel redirect", () => {
-    const renderOverflowing = () => {
-      render(
-        <TestStatefulTabs>
-          <Tabs.Button id="1">First</Tabs.Button>
-          <Tabs.Button id="2">Second</Tabs.Button>
-          <Tabs.Button id="3">Third</Tabs.Button>
-        </TestStatefulTabs>
-      );
-      return screen.getByDataQaLabel({ tabs: "" });
-    };
-
-    it("redirects vertical wheel to horizontal scroll mid-list", () => {
-      const tabs = renderOverflowing();
-      mockScrollDimensions(tabs, {
-        scrollWidth: 800,
-        clientWidth: 480,
-        scrollLeft: 100,
-      });
-      const wheelEvent = new WheelEvent("wheel", {
-        deltaY: 50,
-        deltaX: 0,
-        cancelable: true,
-        bubbles: true,
-      });
-      jest.spyOn(wheelEvent, "preventDefault");
-      tabs.dispatchEvent(wheelEvent);
-      expect(wheelEvent.preventDefault).toHaveBeenCalled();
-      expect(tabs.scrollBy).toHaveBeenCalledWith({
-        left: 50,
-        behavior: "instant",
-      });
-    });
-
-    it("releases at the end so page scroll can take over", () => {
-      const tabs = renderOverflowing();
-      mockScrollDimensions(tabs, {
-        scrollWidth: 800,
-        clientWidth: 480,
-        scrollLeft: 320, // at end (320 + 480 = 800)
-      });
-      const wheelEvent = new WheelEvent("wheel", {
-        deltaY: 50,
-        deltaX: 0,
-        cancelable: true,
-        bubbles: true,
-      });
-      jest.spyOn(wheelEvent, "preventDefault");
-      tabs.dispatchEvent(wheelEvent);
-      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
-      expect(tabs.scrollBy).not.toHaveBeenCalled();
-    });
-
-    it("releases at the start when scrolling back further", () => {
-      const tabs = renderOverflowing();
-      mockScrollDimensions(tabs, {
-        scrollWidth: 800,
-        clientWidth: 480,
-        scrollLeft: 0,
-      });
-      const wheelEvent = new WheelEvent("wheel", {
-        deltaY: -50,
-        deltaX: 0,
-        cancelable: true,
-        bubbles: true,
-      });
-      jest.spyOn(wheelEvent, "preventDefault");
-      tabs.dispatchEvent(wheelEvent);
-      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
-    });
-
-    it("does not interfere when wheel input has a horizontal component", () => {
-      const tabs = renderOverflowing();
-      mockScrollDimensions(tabs, {
-        scrollWidth: 800,
-        clientWidth: 480,
-        scrollLeft: 100,
-      });
-      const wheelEvent = new WheelEvent("wheel", {
-        deltaY: 50,
-        deltaX: 30,
-        cancelable: true,
-        bubbles: true,
-      });
-      jest.spyOn(wheelEvent, "preventDefault");
-      tabs.dispatchEvent(wheelEvent);
-      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
-    });
-
-    it("does nothing when the tab list does not overflow", () => {
-      const tabs = renderOverflowing();
-      mockScrollDimensions(tabs, {
-        scrollWidth: 400,
-        clientWidth: 480,
-        scrollLeft: 0,
-      });
-      const wheelEvent = new WheelEvent("wheel", {
-        deltaY: 50,
-        deltaX: 0,
-        cancelable: true,
-        bubbles: true,
-      });
-      jest.spyOn(wheelEvent, "preventDefault");
-      tabs.dispatchEvent(wheelEvent);
-      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
-    });
-  });
-});

package/src/index.ts

@@ -1,5 +0,0 @@
-import Tabs from "./Tabs";
-
-export default Tabs;
-export { Tabs };
-export * from "./TabsTypes";

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import "styled-components";
-import { TypeTheme } from "@sproutsocial/seeds-react-theme";
-
-declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends TypeTheme {}
-}

package/src/styles.ts

@@ -1,119 +0,0 @@
-import styled, { css } from "styled-components";
-import { COMMON } from "@sproutsocial/seeds-react-system-props";
-import { Button } from "@sproutsocial/seeds-react-button";
-import { type TypeTabsProps } from "./TabsTypes";
-
-interface TypeTabState {
-  isSelected: boolean;
-}
-type TypeFullWidth = Pick<TypeTabsProps, "fullWidth">;
-interface TypeStyleProps extends TypeFullWidth, TypeTabState {}
-
-const Container = styled.div<TypeTabsProps>`
-  display: ${(props) => (props.fullWidth ? "flex" : "inline-flex")};
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-  max-width: 100%;
-  min-height: min-content;
-  flex-shrink: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  scroll-padding-inline: 48px;
-  scroll-behavior: smooth;
-  border-bottom: ${(props) => props.theme.borders[500]}
-    ${(props) => props.theme.colors.container.border.base};
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &[data-fade-right] {
-    -webkit-mask-image: linear-gradient(
-      to right,
-      black 0,
-      black calc(100% - 48px),
-      transparent
-    );
-    mask-image: linear-gradient(
-      to right,
-      black 0,
-      black calc(100% - 48px),
-      transparent
-    );
-  }
-
-  &[data-fade-left] {
-    -webkit-mask-image: linear-gradient(
-      to right,
-      transparent,
-      black 48px,
-      black 100%
-    );
-    mask-image: linear-gradient(to right, transparent, black 48px, black 100%);
-  }
-
-  &[data-fade-left][data-fade-right] {
-    -webkit-mask-image: linear-gradient(
-      to right,
-      transparent,
-      black 48px,
-      black calc(100% - 48px),
-      transparent
-    );
-    mask-image: linear-gradient(
-      to right,
-      transparent,
-      black 48px,
-      black calc(100% - 48px),
-      transparent
-    );
-  }
-
-  ${COMMON}
-`;
-
-export const TabButton = styled(Button)<TypeStyleProps>`
-  margin-bottom: -1px;
-  padding: ${(props) =>
-    `${props.theme.space[350]} ${
-      props.fullWidth ? 0 : props.theme.space[350]
-    }`};
-  color: ${(props) => props.theme.colors.text.headline};
-  border-radius: 0;
-  border-width: 0 0 3px;
-  width: 100%;
-
-  ${(props) =>
-    props.fullWidth &&
-    css`
-      flex-grow: 1;
-    `};
-
-  ${(props) =>
-    props.isSelected &&
-    css`
-      color: ${(props) => props.theme.colors.link.base};
-      border-color: transparent transparent
-        ${(props) => props.theme.colors.button.primary.background.base};
-    `};
-
-  &:hover {
-    ${(props) =>
-      props.isSelected &&
-      css`
-        color: ${(props) => props.theme.colors.link.hover};
-      `};
-  }
-
-  &:focus,
-  &:active {
-    box-shadow: none;
-  }
-
-  &:active {
-    transform: none;
-  }
-`;
-export default Container;

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "module": "esnext"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage", "src/Tabs.stories.tsx"]
-}

package/tsup.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig((options) => ({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  clean: true,
-  legacyOutput: true,
-  dts: options.dts,
-  external: ["react"],
-  sourcemap: true,
-  metafile: options.metafile,
-}));