@sproutsocial/seeds-react-tabs 1.4.14 → 1.4.15

package/src/Tabs.tsx

@@ -1,284 +0,0 @@
-import * as React from "react";
-import Container, { TabButton } from "./styles";
-import type {
-  TypeTabButtonsProps,
-  TypeTabsProps,
-  TypeTabPanelProps,
-} from "./TabsTypes";
-
-interface TypeTabButtonRef {
-  current: null | React.ElementRef<"button">;
-}
-interface TypeTabButtonContext {
-  onActivate: (arg0: string) => void;
-  onTabMount: (id: string, ref: TypeTabButtonRef) => void;
-  onTabUpdate: (previousId: string, nextId: string) => void;
-  onTabUnmount: (id: string) => void;
-  selectedId: string;
-  fullWidth?: boolean;
-}
-
-const TabButtonContext = React.createContext<Partial<TypeTabButtonContext>>({});
-
-class TabItemButton extends React.Component<TypeTabButtonsProps> {
-  static override contextType = TabButtonContext;
-  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
-  context!: React.ContextType<typeof TabButtonContext>;
-
-  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<"button">>();
-
-  override componentDidMount() {
-    this.context.onTabMount?.(this.props.id, this.buttonRef);
-  }
-
-  override componentDidUpdate(prevProps: TypeTabButtonsProps) {
-    if (prevProps.id !== this.props.id) {
-      this.context.onTabUpdate?.(prevProps.id, this.props.id);
-    }
-  }
-
-  override componentWillUnmount() {
-    this.context.onTabUnmount?.(this.props.id);
-  }
-
-  override render() {
-    const { children, id, ...rest } = this.props;
-    const { selectedId, onActivate, fullWidth } = this.context;
-    const isSelected = selectedId === id;
-
-    return (
-      <TabButton
-        key={id}
-        innerRef={this.buttonRef}
-        id={id}
-        onClick={() => onActivate?.(id)}
-        isSelected={isSelected}
-        tabIndex={isSelected ? 0 : -1}
-        fullWidth={fullWidth}
-        data-qa-tab-button={id}
-        data-qa-tab-button-state={isSelected}
-        aria-selected={isSelected}
-        role="tab"
-        aria-controls={`${id}-panel`}
-        {...rest}
-      >
-        {children}
-      </TabButton>
-    );
-  }
-}
-
-const TabPanel: React.FC<TypeTabPanelProps> = ({ children, id, ...rest }) => {
-  const panelId = `${id}-panel`;
-
-  return (
-    <div id={panelId} role="tabpanel" aria-labelledby={id} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-/**
- * Render a group of buttons in a tab-heading style
- */
-class Tabs extends React.Component<TypeTabsProps> {
-  static Button = TabItemButton;
-  static Panel = TabPanel;
-  buttonRefs: Record<string, TypeTabButtonRef | null | undefined> = {};
-  tabList: string[] = [];
-
-  containerRef = React.createRef<HTMLDivElement>();
-  startSentinelRef = React.createRef<HTMLDivElement>();
-  endSentinelRef = React.createRef<HTMLDivElement>();
-  startObserver: IntersectionObserver | null = null;
-  endObserver: IntersectionObserver | null = null;
-
-  override componentDidMount() {
-    const container = this.containerRef.current;
-    if (!container) return;
-    container.addEventListener("wheel", this.handleWheel, { passive: false });
-
-    const startSentinel = this.startSentinelRef.current;
-    const endSentinel = this.endSentinelRef.current;
-    if (!startSentinel || !endSentinel) return;
-    if (typeof IntersectionObserver === "undefined") return;
-    this.startObserver = new IntersectionObserver(
-      ([entry]) => {
-        container.toggleAttribute("data-fade-left", !entry?.isIntersecting);
-      },
-      { root: container, threshold: 1.0, rootMargin: "0px 0px 0px 1px" }
-    );
-    this.endObserver = new IntersectionObserver(
-      ([entry]) => {
-        container.toggleAttribute("data-fade-right", !entry?.isIntersecting);
-      },
-      { root: container, threshold: 1.0, rootMargin: "0px 1px 0px 0px" }
-    );
-    this.startObserver.observe(startSentinel);
-    this.endObserver.observe(endSentinel);
-  }
-
-  override componentWillUnmount() {
-    this.containerRef.current?.removeEventListener("wheel", this.handleWheel);
-    this.startObserver?.disconnect();
-    this.endObserver?.disconnect();
-    this.startObserver = null;
-    this.endObserver = null;
-  }
-
-  handleWheel = (e: WheelEvent) => {
-    const container = this.containerRef.current;
-    if (!container) return;
-    // Only redirect pure-vertical wheel input. Trackpad horizontal swipes
-    // (deltaX !== 0) already scroll natively — don't fight them.
-    if (e.deltaY === 0 || e.deltaX !== 0) return;
-    // No horizontal overflow means there's nothing to scroll.
-    if (container.scrollWidth <= container.clientWidth) return;
-    // Release at ends so the page can scroll past the tab bar instead of
-    // trapping the user. WCAG 2.1.1 / 2.1.2 spirit.
-    const atStart = container.scrollLeft <= 0;
-    const atEnd =
-      container.scrollLeft + container.clientWidth >= container.scrollWidth;
-    if ((atEnd && e.deltaY > 0) || (atStart && e.deltaY < 0)) return;
-
-    e.preventDefault();
-    // Normalize deltaY across deltaMode units (Firefox can emit LINE/PAGE).
-    const lineHeight = 16;
-    const pixelDelta =
-      e.deltaMode === 1
-        ? e.deltaY * lineHeight
-        : e.deltaMode === 2
-        ? e.deltaY * container.clientHeight
-        : e.deltaY;
-    container.scrollBy({ left: pixelDelta, behavior: "instant" });
-  };
-
-  getSelectedId = () => this.props.selectedId;
-  onActivate = (id: string) => {
-    this.props.onSelect(id);
-    this.scrollTabIntoView(id);
-  };
-
-  scrollTabIntoView = (id: string) => {
-    const button = this.buttonRefs[id]?.current;
-    const container = this.containerRef.current;
-    if (!button || !container) return;
-    const buttonRect = button.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const fadePadding = 48;
-    const isFullyVisible =
-      buttonRect.left >= containerRect.left + fadePadding &&
-      buttonRect.right <= containerRect.right - fadePadding;
-    if (isFullyVisible) return;
-    button.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  };
-  onTabMount = (id: string, ref: TypeTabButtonRef) => {
-    if (!this.tabList.includes(id)) {
-      this.tabList.push(id);
-      this.buttonRefs[id] = ref;
-    }
-  };
-
-  onTabUpdate = (previousId: string, newId: string) => {
-    if (this.tabList.includes(previousId)) {
-      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));
-      this.buttonRefs[newId] = this.buttonRefs[previousId];
-      this.buttonRefs[previousId] = undefined;
-    }
-  };
-
-  onTabUnmount = (id: string) => {
-    if (this.tabList.includes(id)) {
-      this.tabList = this.tabList.filter((currentId) => currentId !== id);
-      this.buttonRefs[id] = undefined;
-    }
-  };
-
-  selectNextTab = (id: string) => {
-    this.props.onSelect(id);
-    this.buttonRefs[id]?.current?.focus?.({ preventScroll: true });
-    this.scrollTabIntoView(id);
-  };
-
-  keyHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    switch (e.keyCode) {
-      // left arrow
-      case 37:
-        this.tabList.forEach((id, index) => {
-          e.preventDefault();
-          if (id === this.getSelectedId()) {
-            const count = this.tabList.length;
-            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;
-            const nextId = this.tabList[nextIndex];
-            this.selectNextTab(nextId ? nextId : "");
-          }
-        });
-        break;
-
-      // right arrow
-      case 39:
-        this.tabList.forEach((id, index) => {
-          e.preventDefault();
-          if (id === this.getSelectedId()) {
-            const count = this.tabList.length;
-            const nextIndex = index + 1 < count ? index + 1 : 0;
-            const nextId = this.tabList[nextIndex];
-            this.selectNextTab(nextId ? nextId : "");
-          }
-        });
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  override render() {
-    const {
-      children,
-      qa,
-      onSelect,
-      "aria-label": ariaLabel,
-      ...rest
-    } = this.props;
-    return (
-      <Container
-        ref={this.containerRef}
-        data-qa-tabs=""
-        onKeyDown={this.keyHandler}
-        onSelect={onSelect}
-        role="tablist"
-        aria-label={ariaLabel}
-        {...qa}
-        {...rest}
-      >
-        <div
-          ref={this.startSentinelRef}
-          aria-hidden="true"
-          style={{ flexShrink: 0, width: 1 }}
-        />
-        <TabButtonContext.Provider
-          value={{
-            selectedId: this.getSelectedId(),
-            fullWidth: this.props.fullWidth,
-            onActivate: this.onActivate,
-            onTabMount: this.onTabMount,
-            onTabUpdate: this.onTabUpdate,
-            onTabUnmount: this.onTabUnmount,
-          }}
-        >
-          {children}
-        </TabButtonContext.Provider>
-        <div
-          ref={this.endSentinelRef}
-          aria-hidden="true"
-          style={{ flexShrink: 0, width: 1 }}
-        />
-      </Container>
-    );
-  }
-}
-
-export default Tabs;

package/src/TabsTypes.ts

@@ -1,48 +0,0 @@
-import * as React from "react";
-import type {
-  TypeStyledComponentsCommonProps,
-  TypeSystemCommonProps,
-} from "@sproutsocial/seeds-react-system-props";
-import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
-
-export interface TypeTabButtonsProps extends TypeButtonProps {
-  children: React.ReactNode;
-
-  /** Should be unique among sibling elements */
-  id: string;
-}
-
-export interface TypeTabPanelProps
-  extends React.ComponentPropsWithoutRef<"div"> {
-  children: React.ReactNode;
-
-  /** Should match the corresponding tab button id */
-  id: string;
-}
-
-export interface TypeTabsProps
-  extends TypeStyledComponentsCommonProps,
-    TypeSystemCommonProps,
-    Omit<
-      React.ComponentPropsWithoutRef<"ul">,
-      keyof TypeSystemCommonProps | "onSelect"
-    > {
-  children: React.ReactNode;
-  onSelect: (arg0: string) => void;
-
-  /** Whether or not the tabs should stretch to fill the width of their container */
-  fullWidth?: boolean;
-  qa?: object;
-
-  /** ID of the selected tab */
-  selectedId: string;
-
-  /**
-   * Accessible label for the tab list. Forwarded to the `role="tablist"`
-   * element. Recommended by the WAI-ARIA Tabs pattern so screen readers
-   * can announce what the tabs represent (e.g. "Report sections").
-   * Use `aria-labelledby` instead via `{...rest}` if you have a visible
-   * heading to reference.
-   */
-  "aria-label"?: string;
-}

package/src/__tests__/Tabs.typetest.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-import Tabs from "../";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function TabsTypes() {
-  const tabOne = "Tab one";
-  const mockHandler = () => {};
-
-  return (
-    <>
-      <Tabs selectedId={tabOne} onSelect={mockHandler}>
-        <Tabs.Button id={tabOne}>{tabOne}</Tabs.Button>
-      </Tabs>
-      {/* @ts-expect-error - test that invalid onSelect is rejected */}
-      <Tabs selectedId={3} onSelect="invalid">
-        <Tabs.Button id={tabOne}>{tabOne}</Tabs.Button>
-      </Tabs>
-    </>
-  );
-}