@sproutsocial/seeds-react-tabs 1.3.11 → 1.4.11

package/dist/index.js

@@ -49,17 +49,71 @@ var React = require("react");
 // src/styles.ts
 var Container = import_styled_components.default.div`
   display: ${(props) => props.fullWidth ? "flex" : "inline-flex"};
-  justify-content: space-between;
   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
+    );
+  }
+
   ${import_seeds_react_system_props.COMMON}
 `;
 var TabButton = (0, import_styled_components.default)(import_seeds_react_button.Button)`
   margin-bottom: -1px;
-  padding: ${(props) => `${props.theme.space[350]} 0`};
+  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;
@@ -69,12 +123,6 @@ var TabButton = (0, import_styled_components.default)(import_seeds_react_button.
       flex-grow: 1;
     `};
 
-  &:not(:last-child) {
-    ${(props) => !props.fullWidth && import_styled_components.css`
-        margin-right: ${(props2) => props2.theme.space[350]};
-      `};
-  }
-
   ${(props) => props.isSelected && import_styled_components.css`
       color: ${(props2) => props2.theme.colors.link.base};
       border-color: transparent transparent
@@ -153,8 +201,70 @@ var Tabs = class extends React2.Component {
   static Panel = TabPanel;
   buttonRefs = {};
   tabList = [];
+  containerRef = React2.createRef();
+  startSentinelRef = React2.createRef();
+  endSentinelRef = React2.createRef();
+  startObserver = null;
+  endObserver = null;
+  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, rootMargin: "0px 0px 0px 1px" }
+    );
+    this.endObserver = new IntersectionObserver(
+      ([entry]) => {
+        container.toggleAttribute("data-fade-right", !entry?.isIntersecting);
+      },
+      { root: container, threshold: 1, rootMargin: "0px 1px 0px 0px" }
+    );
+    this.startObserver.observe(startSentinel);
+    this.endObserver.observe(endSentinel);
+  }
+  componentWillUnmount() {
+    this.containerRef.current?.removeEventListener("wheel", this.handleWheel);
+    this.startObserver?.disconnect();
+    this.endObserver?.disconnect();
+    this.startObserver = null;
+    this.endObserver = null;
+  }
+  handleWheel = (e) => {
+    const container = this.containerRef.current;
+    if (!container) return;
+    if (e.deltaY === 0 || e.deltaX !== 0) return;
+    if (container.scrollWidth <= container.clientWidth) return;
+    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();
+    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) => this.props.onSelect(id);
+  onActivate = (id) => {
+    this.props.onSelect(id);
+    this.scrollTabIntoView(id);
+  };
+  scrollTabIntoView = (id) => {
+    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, ref) => {
     if (!this.tabList.includes(id)) {
       this.tabList.push(id);
@@ -175,15 +285,16 @@ var Tabs = class extends React2.Component {
     }
   };
   selectNextTab = (id) => {
-    const buttonRef = this.buttonRefs[id];
     this.props.onSelect(id);
-    buttonRef && buttonRef.current && buttonRef.current.focus && buttonRef.current.focus();
+    this.buttonRefs[id]?.current?.focus?.({ preventScroll: true });
+    this.scrollTabIntoView(id);
   };
-  keyHandler = ({ keyCode }) => {
-    switch (keyCode) {
+  keyHandler = (e) => {
+    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;
@@ -195,6 +306,7 @@ var Tabs = class extends React2.Component {
       // 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;
@@ -208,30 +320,56 @@ var Tabs = class extends React2.Component {
     }
   };
   render() {
-    const { children, qa, onSelect, ...rest } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const {
+      children,
+      qa,
+      onSelect,
+      "aria-label": ariaLabel,
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       styles_default,
       {
+        ref: this.containerRef,
         "data-qa-tabs": "",
-        onKeyUp: this.keyHandler,
+        onKeyDown: this.keyHandler,
         onSelect,
         role: "tablist",
+        "aria-label": ariaLabel,
         ...qa,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          TabButtonContext.Provider,
-          {
-            value: {
-              selectedId: this.getSelectedId(),
-              fullWidth: this.props.fullWidth,
-              onActivate: this.onActivate,
-              onTabMount: this.onTabMount,
-              onTabUpdate: this.onTabUpdate,
-              onTabUnmount: this.onTabUnmount
-            },
-            children
-          }
-        )
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: this.startSentinelRef,
+              "aria-hidden": "true",
+              style: { flexShrink: 0, width: 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabButtonContext.Provider,
+            {
+              value: {
+                selectedId: this.getSelectedId(),
+                fullWidth: this.props.fullWidth,
+                onActivate: this.onActivate,
+                onTabMount: this.onTabMount,
+                onTabUpdate: this.onTabUpdate,
+                onTabUnmount: this.onTabUnmount
+              },
+              children
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: this.endSentinelRef,
+              "aria-hidden": "true",
+              style: { flexShrink: 0, width: 1 }
+            }
+          )
+        ]
       }
     );
   }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Tabs.tsx","../src/styles.ts","../src/TabsTypes.ts"],"sourcesContent":["import Tabs from \"./Tabs\";\n\nexport default Tabs;\nexport { Tabs };\nexport * from \"./TabsTypes\";\n","import * as React from \"react\";\nimport Container, { TabButton } from \"./styles\";\nimport type {\n  TypeTabButtonsProps,\n  TypeTabsProps,\n  TypeTabPanelProps,\n} from \"./TabsTypes\";\n\ninterface TypeTabButtonRef {\n  current: null | React.ElementRef<\"button\">;\n}\ninterface TypeTabButtonContext {\n  onActivate: (arg0: string) => void;\n  onTabMount: (id: string, ref: TypeTabButtonRef) => void;\n  onTabUpdate: (previousId: string, nextId: string) => void;\n  onTabUnmount: (id: string) => void;\n  selectedId: string;\n  fullWidth?: boolean;\n}\n\nconst TabButtonContext = React.createContext<Partial<TypeTabButtonContext>>({});\n\nclass TabItemButton extends React.Component<TypeTabButtonsProps> {\n  static override contextType = TabButtonContext;\n  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-ignore\n  context!: React.ContextType<typeof TabButtonContext>;\n\n  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<\"button\">>();\n\n  override componentDidMount() {\n    this.context.onTabMount?.(this.props.id, this.buttonRef);\n  }\n\n  override componentDidUpdate(prevProps: TypeTabButtonsProps) {\n    if (prevProps.id !== this.props.id) {\n      this.context.onTabUpdate?.(prevProps.id, this.props.id);\n    }\n  }\n\n  override componentWillUnmount() {\n    this.context.onTabUnmount?.(this.props.id);\n  }\n\n  override render() {\n    const { children, id, ...rest } = this.props;\n    const { selectedId, onActivate, fullWidth } = this.context;\n    const isSelected = selectedId === id;\n\n    return (\n      <TabButton\n        key={id}\n        innerRef={this.buttonRef}\n        id={id}\n        onClick={() => onActivate?.(id)}\n        isSelected={isSelected}\n        tabIndex={isSelected ? 0 : -1}\n        fullWidth={fullWidth}\n        data-qa-tab-button={id}\n        data-qa-tab-button-state={isSelected}\n        aria-selected={isSelected}\n        role=\"tab\"\n        aria-controls={`${id}-panel`}\n        {...rest}\n      >\n        {children}\n      </TabButton>\n    );\n  }\n}\n\nconst TabPanel: React.FC<TypeTabPanelProps> = ({ children, id, ...rest }) => {\n  const panelId = `${id}-panel`;\n\n  return (\n    <div id={panelId} role=\"tabpanel\" aria-labelledby={id} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Render a group of buttons in a tab-heading style\n */\nclass Tabs extends React.Component<TypeTabsProps> {\n  static Button = TabItemButton;\n  static Panel = TabPanel;\n  buttonRefs: Record<string, TypeTabButtonRef | null | undefined> = {};\n  tabList: string[] = [];\n\n  getSelectedId = () => this.props.selectedId;\n  onActivate = (id: string) => this.props.onSelect(id);\n  onTabMount = (id: string, ref: TypeTabButtonRef) => {\n    if (!this.tabList.includes(id)) {\n      this.tabList.push(id);\n      this.buttonRefs[id] = ref;\n    }\n  };\n\n  onTabUpdate = (previousId: string, newId: string) => {\n    if (this.tabList.includes(previousId)) {\n      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));\n      this.buttonRefs[newId] = this.buttonRefs[previousId];\n      this.buttonRefs[previousId] = undefined;\n    }\n  };\n\n  onTabUnmount = (id: string) => {\n    if (this.tabList.includes(id)) {\n      this.tabList = this.tabList.filter((currentId) => currentId !== id);\n      this.buttonRefs[id] = undefined;\n    }\n  };\n\n  selectNextTab = (id: string) => {\n    const buttonRef = this.buttonRefs[id];\n    this.props.onSelect(id);\n    buttonRef &&\n      buttonRef.current &&\n      buttonRef.current.focus &&\n      buttonRef.current.focus();\n  };\n\n  keyHandler = ({ keyCode }: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (keyCode) {\n      // left arrow\n      case 37:\n        this.tabList.forEach((id, index) => {\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      // right arrow\n      case 39:\n        this.tabList.forEach((id, index) => {\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index + 1 < count ? index + 1 : 0;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  override render() {\n    const { children, qa, onSelect, ...rest } = this.props;\n    return (\n      <Container\n        data-qa-tabs=\"\"\n        onKeyUp={this.keyHandler}\n        onSelect={onSelect}\n        role=\"tablist\"\n        {...qa}\n        {...rest}\n      >\n        <TabButtonContext.Provider\n          value={{\n            selectedId: this.getSelectedId(),\n            fullWidth: this.props.fullWidth,\n            onActivate: this.onActivate,\n            onTabMount: this.onTabMount,\n            onTabUpdate: this.onTabUpdate,\n            onTabUnmount: this.onTabUnmount,\n          }}\n        >\n          {children}\n        </TabButtonContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Tabs;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { type TypeTabsProps } from \"./TabsTypes\";\n\ninterface TypeTabState {\n  isSelected: boolean;\n}\ntype TypeFullWidth = Pick<TypeTabsProps, \"fullWidth\">;\ninterface TypeStyleProps extends TypeFullWidth, TypeTabState {}\n\nconst Container = styled.div<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  border-bottom: ${(props) => props.theme.borders[500]}\n    ${(props) => props.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const TabButton = styled(Button)<TypeStyleProps>`\n  margin-bottom: -1px;\n  padding: ${(props) => `${props.theme.space[350]} 0`};\n  color: ${(props) => props.theme.colors.text.headline};\n  border-radius: 0;\n  border-width: 0 0 3px;\n  width: 100%;\n\n  ${(props) =>\n    props.fullWidth &&\n    css`\n      flex-grow: 1;\n    `};\n\n  &:not(:last-child) {\n    ${(props) =>\n      !props.fullWidth &&\n      css`\n        margin-right: ${(props) => props.theme.space[350]};\n      `};\n  }\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      color: ${(props) => props.theme.colors.link.base};\n      border-color: transparent transparent\n        ${(props) => props.theme.colors.button.primary.background.base};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        color: ${(props) => props.theme.colors.link.hover};\n      `};\n  }\n\n  &:focus,\n  &:active {\n    box-shadow: none;\n  }\n\n  &:active {\n    transform: none;\n  }\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\nexport interface TypeTabButtonsProps extends TypeButtonProps {\n  children: React.ReactNode;\n\n  /** Should be unique among sibling elements */\n  id: string;\n}\n\nexport interface TypeTabPanelProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode;\n\n  /** Should match the corresponding tab button id */\n  id: string;\n}\n\nexport interface TypeTabsProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"ul\">,\n      keyof TypeSystemCommonProps | \"onSelect\"\n    > {\n  children: React.ReactNode;\n  onSelect: (arg0: string) => void;\n\n  /** Whether or not the tabs should stretch to fill the width of their container */\n  fullWidth?: boolean;\n  qa?: object;\n\n  /** ID of the selected tab */\n  selectedId: string;\n}\n"],"mappings":"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","names":["React","styled","props"]}
+{"version":3,"sources":["../src/index.ts","../src/Tabs.tsx","../src/styles.ts","../src/TabsTypes.ts"],"sourcesContent":["import Tabs from \"./Tabs\";\n\nexport default Tabs;\nexport { Tabs };\nexport * from \"./TabsTypes\";\n","import * as React from \"react\";\nimport Container, { TabButton } from \"./styles\";\nimport type {\n  TypeTabButtonsProps,\n  TypeTabsProps,\n  TypeTabPanelProps,\n} from \"./TabsTypes\";\n\ninterface TypeTabButtonRef {\n  current: null | React.ElementRef<\"button\">;\n}\ninterface TypeTabButtonContext {\n  onActivate: (arg0: string) => void;\n  onTabMount: (id: string, ref: TypeTabButtonRef) => void;\n  onTabUpdate: (previousId: string, nextId: string) => void;\n  onTabUnmount: (id: string) => void;\n  selectedId: string;\n  fullWidth?: boolean;\n}\n\nconst TabButtonContext = React.createContext<Partial<TypeTabButtonContext>>({});\n\nclass TabItemButton extends React.Component<TypeTabButtonsProps> {\n  static override contextType = TabButtonContext;\n  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-ignore\n  context!: React.ContextType<typeof TabButtonContext>;\n\n  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<\"button\">>();\n\n  override componentDidMount() {\n    this.context.onTabMount?.(this.props.id, this.buttonRef);\n  }\n\n  override componentDidUpdate(prevProps: TypeTabButtonsProps) {\n    if (prevProps.id !== this.props.id) {\n      this.context.onTabUpdate?.(prevProps.id, this.props.id);\n    }\n  }\n\n  override componentWillUnmount() {\n    this.context.onTabUnmount?.(this.props.id);\n  }\n\n  override render() {\n    const { children, id, ...rest } = this.props;\n    const { selectedId, onActivate, fullWidth } = this.context;\n    const isSelected = selectedId === id;\n\n    return (\n      <TabButton\n        key={id}\n        innerRef={this.buttonRef}\n        id={id}\n        onClick={() => onActivate?.(id)}\n        isSelected={isSelected}\n        tabIndex={isSelected ? 0 : -1}\n        fullWidth={fullWidth}\n        data-qa-tab-button={id}\n        data-qa-tab-button-state={isSelected}\n        aria-selected={isSelected}\n        role=\"tab\"\n        aria-controls={`${id}-panel`}\n        {...rest}\n      >\n        {children}\n      </TabButton>\n    );\n  }\n}\n\nconst TabPanel: React.FC<TypeTabPanelProps> = ({ children, id, ...rest }) => {\n  const panelId = `${id}-panel`;\n\n  return (\n    <div id={panelId} role=\"tabpanel\" aria-labelledby={id} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * Render a group of buttons in a tab-heading style\n */\nclass Tabs extends React.Component<TypeTabsProps> {\n  static Button = TabItemButton;\n  static Panel = TabPanel;\n  buttonRefs: Record<string, TypeTabButtonRef | null | undefined> = {};\n  tabList: string[] = [];\n\n  containerRef = React.createRef<HTMLDivElement>();\n  startSentinelRef = React.createRef<HTMLDivElement>();\n  endSentinelRef = React.createRef<HTMLDivElement>();\n  startObserver: IntersectionObserver | null = null;\n  endObserver: IntersectionObserver | null = null;\n\n  override componentDidMount() {\n    const container = this.containerRef.current;\n    if (!container) return;\n    container.addEventListener(\"wheel\", this.handleWheel, { passive: false });\n\n    const startSentinel = this.startSentinelRef.current;\n    const endSentinel = this.endSentinelRef.current;\n    if (!startSentinel || !endSentinel) return;\n    if (typeof IntersectionObserver === \"undefined\") return;\n    this.startObserver = new IntersectionObserver(\n      ([entry]) => {\n        container.toggleAttribute(\"data-fade-left\", !entry?.isIntersecting);\n      },\n      { root: container, threshold: 1.0, rootMargin: \"0px 0px 0px 1px\" }\n    );\n    this.endObserver = new IntersectionObserver(\n      ([entry]) => {\n        container.toggleAttribute(\"data-fade-right\", !entry?.isIntersecting);\n      },\n      { root: container, threshold: 1.0, rootMargin: \"0px 1px 0px 0px\" }\n    );\n    this.startObserver.observe(startSentinel);\n    this.endObserver.observe(endSentinel);\n  }\n\n  override componentWillUnmount() {\n    this.containerRef.current?.removeEventListener(\"wheel\", this.handleWheel);\n    this.startObserver?.disconnect();\n    this.endObserver?.disconnect();\n    this.startObserver = null;\n    this.endObserver = null;\n  }\n\n  handleWheel = (e: WheelEvent) => {\n    const container = this.containerRef.current;\n    if (!container) return;\n    // Only redirect pure-vertical wheel input. Trackpad horizontal swipes\n    // (deltaX !== 0) already scroll natively — don't fight them.\n    if (e.deltaY === 0 || e.deltaX !== 0) return;\n    // No horizontal overflow means there's nothing to scroll.\n    if (container.scrollWidth <= container.clientWidth) return;\n    // Release at ends so the page can scroll past the tab bar instead of\n    // trapping the user. WCAG 2.1.1 / 2.1.2 spirit.\n    const atStart = container.scrollLeft <= 0;\n    const atEnd =\n      container.scrollLeft + container.clientWidth >= container.scrollWidth;\n    if ((atEnd && e.deltaY > 0) || (atStart && e.deltaY < 0)) return;\n\n    e.preventDefault();\n    // Normalize deltaY across deltaMode units (Firefox can emit LINE/PAGE).\n    const lineHeight = 16;\n    const pixelDelta =\n      e.deltaMode === 1\n        ? e.deltaY * lineHeight\n        : e.deltaMode === 2\n        ? e.deltaY * container.clientHeight\n        : e.deltaY;\n    container.scrollBy({ left: pixelDelta, behavior: \"instant\" });\n  };\n\n  getSelectedId = () => this.props.selectedId;\n  onActivate = (id: string) => {\n    this.props.onSelect(id);\n    this.scrollTabIntoView(id);\n  };\n\n  scrollTabIntoView = (id: string) => {\n    const button = this.buttonRefs[id]?.current;\n    const container = this.containerRef.current;\n    if (!button || !container) return;\n    const buttonRect = button.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n    const fadePadding = 48;\n    const isFullyVisible =\n      buttonRect.left >= containerRect.left + fadePadding &&\n      buttonRect.right <= containerRect.right - fadePadding;\n    if (isFullyVisible) return;\n    button.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  };\n  onTabMount = (id: string, ref: TypeTabButtonRef) => {\n    if (!this.tabList.includes(id)) {\n      this.tabList.push(id);\n      this.buttonRefs[id] = ref;\n    }\n  };\n\n  onTabUpdate = (previousId: string, newId: string) => {\n    if (this.tabList.includes(previousId)) {\n      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));\n      this.buttonRefs[newId] = this.buttonRefs[previousId];\n      this.buttonRefs[previousId] = undefined;\n    }\n  };\n\n  onTabUnmount = (id: string) => {\n    if (this.tabList.includes(id)) {\n      this.tabList = this.tabList.filter((currentId) => currentId !== id);\n      this.buttonRefs[id] = undefined;\n    }\n  };\n\n  selectNextTab = (id: string) => {\n    this.props.onSelect(id);\n    this.buttonRefs[id]?.current?.focus?.({ preventScroll: true });\n    this.scrollTabIntoView(id);\n  };\n\n  keyHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (e.keyCode) {\n      // left arrow\n      case 37:\n        this.tabList.forEach((id, index) => {\n          e.preventDefault();\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      // right arrow\n      case 39:\n        this.tabList.forEach((id, index) => {\n          e.preventDefault();\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index + 1 < count ? index + 1 : 0;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  override render() {\n    const {\n      children,\n      qa,\n      onSelect,\n      \"aria-label\": ariaLabel,\n      ...rest\n    } = this.props;\n    return (\n      <Container\n        ref={this.containerRef}\n        data-qa-tabs=\"\"\n        onKeyDown={this.keyHandler}\n        onSelect={onSelect}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        {...qa}\n        {...rest}\n      >\n        <div\n          ref={this.startSentinelRef}\n          aria-hidden=\"true\"\n          style={{ flexShrink: 0, width: 1 }}\n        />\n        <TabButtonContext.Provider\n          value={{\n            selectedId: this.getSelectedId(),\n            fullWidth: this.props.fullWidth,\n            onActivate: this.onActivate,\n            onTabMount: this.onTabMount,\n            onTabUpdate: this.onTabUpdate,\n            onTabUnmount: this.onTabUnmount,\n          }}\n        >\n          {children}\n        </TabButtonContext.Provider>\n        <div\n          ref={this.endSentinelRef}\n          aria-hidden=\"true\"\n          style={{ flexShrink: 0, width: 1 }}\n        />\n      </Container>\n    );\n  }\n}\n\nexport default Tabs;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { type TypeTabsProps } from \"./TabsTypes\";\n\ninterface TypeTabState {\n  isSelected: boolean;\n}\ntype TypeFullWidth = Pick<TypeTabsProps, \"fullWidth\">;\ninterface TypeStyleProps extends TypeFullWidth, TypeTabState {}\n\nconst Container = styled.div<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  max-width: 100%;\n  min-height: min-content;\n  flex-shrink: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  scroll-padding-inline: 48px;\n  scroll-behavior: smooth;\n  border-bottom: ${(props) => props.theme.borders[500]}\n    ${(props) => props.theme.colors.container.border.base};\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &[data-fade-right] {\n    -webkit-mask-image: linear-gradient(\n      to right,\n      black 0,\n      black calc(100% - 48px),\n      transparent\n    );\n    mask-image: linear-gradient(\n      to right,\n      black 0,\n      black calc(100% - 48px),\n      transparent\n    );\n  }\n\n  &[data-fade-left] {\n    -webkit-mask-image: linear-gradient(\n      to right,\n      transparent,\n      black 48px,\n      black 100%\n    );\n    mask-image: linear-gradient(to right, transparent, black 48px, black 100%);\n  }\n\n  &[data-fade-left][data-fade-right] {\n    -webkit-mask-image: linear-gradient(\n      to right,\n      transparent,\n      black 48px,\n      black calc(100% - 48px),\n      transparent\n    );\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      black 48px,\n      black calc(100% - 48px),\n      transparent\n    );\n  }\n\n  ${COMMON}\n`;\n\nexport const TabButton = styled(Button)<TypeStyleProps>`\n  margin-bottom: -1px;\n  padding: ${(props) =>\n    `${props.theme.space[350]} ${\n      props.fullWidth ? 0 : props.theme.space[350]\n    }`};\n  color: ${(props) => props.theme.colors.text.headline};\n  border-radius: 0;\n  border-width: 0 0 3px;\n  width: 100%;\n\n  ${(props) =>\n    props.fullWidth &&\n    css`\n      flex-grow: 1;\n    `};\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      color: ${(props) => props.theme.colors.link.base};\n      border-color: transparent transparent\n        ${(props) => props.theme.colors.button.primary.background.base};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        color: ${(props) => props.theme.colors.link.hover};\n      `};\n  }\n\n  &:focus,\n  &:active {\n    box-shadow: none;\n  }\n\n  &:active {\n    transform: none;\n  }\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\nexport interface TypeTabButtonsProps extends TypeButtonProps {\n  children: React.ReactNode;\n\n  /** Should be unique among sibling elements */\n  id: string;\n}\n\nexport interface TypeTabPanelProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode;\n\n  /** Should match the corresponding tab button id */\n  id: string;\n}\n\nexport interface TypeTabsProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"ul\">,\n      keyof TypeSystemCommonProps | \"onSelect\"\n    > {\n  children: React.ReactNode;\n  onSelect: (arg0: string) => void;\n\n  /** Whether or not the tabs should stretch to fill the width of their container */\n  fullWidth?: boolean;\n  qa?: object;\n\n  /** ID of the selected tab */\n  selectedId: string;\n\n  /**\n   * Accessible label for the tab list. Forwarded to the `role=\"tablist\"`\n   * element. Recommended by the WAI-ARIA Tabs pattern so screen readers\n   * can announce what the tabs represent (e.g. \"Report sections\").\n   * Use `aria-labelledby` instead via `{...rest}` if you have a visible\n   * heading to reference.\n   */\n  \"aria-label\"?: string;\n}\n"],"mappings":"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","names":["React","styled","props"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-tabs",
-  "version": "1.3.11",
+  "version": "1.4.11",
   "description": "Seeds React Tabs",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,9 +18,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-button": "^2.0.5"
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-button": "^2.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Tabs.stories.tsx

@@ -127,6 +127,62 @@ export const FullWidth: Story = {
   name: "Full width",
 };
 
+export const Scrollable: Story = {
+  render: () => {
+    const tabs = [
+      "Overview",
+      "Notifications",
+      "Issues",
+      "Pull Requests",
+      "Discussions",
+      "Actions",
+      "Projects",
+      "Wiki",
+      "Security",
+      "Insights",
+    ];
+    const [selectedId, setSelectedId] = useState(tabs[0]);
+
+    return (
+      <>
+        <Box width="450px" mb={400}>
+          <Tabs
+            selectedId={selectedId ?? ""}
+            onSelect={(selected) => setSelectedId(selected)}
+            aria-label="Repository sections"
+          >
+            {tabs.map((tab) => (
+              <Tabs.Button key={tab} id={tab}>
+                <Text size="300" fontWeight="600" flexWrap={"nowrap"}>
+                  {tab}
+                </Text>
+              </Tabs.Button>
+            ))}
+          </Tabs>
+        </Box>
+
+        {tabs.map((tab) => {
+          if (selectedId !== tab) return null;
+          return (
+            <Tabs.Panel id={tab}>
+              <Text color="text.body">{tab} Panel</Text>
+            </Tabs.Panel>
+          );
+        })}
+      </>
+    );
+  },
+  name: "Scrollable",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When the tab list overflows its container, the bar scrolls horizontally and a fade indicator appears at each overflowing edge. Arrow-key and click activation auto-scroll the selected tab fully into view past the fade region. The fade uses CSS `mask-image` so it auto-adapts to any container background — no consumer configuration needed.",
+      },
+    },
+  },
+};
+
 export const RemoveATab: Story = {
   render: (args) => {
     const [state, setState] = useState<TypeTabsStoryState>({

package/src/Tabs.tsx

@@ -89,8 +89,91 @@ class Tabs extends React.Component<TypeTabsProps> {
   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);
+  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);
@@ -114,19 +197,17 @@ class Tabs extends React.Component<TypeTabsProps> {
   };
 
   selectNextTab = (id: string) => {
-    const buttonRef = this.buttonRefs[id];
     this.props.onSelect(id);
-    buttonRef &&
-      buttonRef.current &&
-      buttonRef.current.focus &&
-      buttonRef.current.focus();
+    this.buttonRefs[id]?.current?.focus?.({ preventScroll: true });
+    this.scrollTabIntoView(id);
   };
 
-  keyHandler = ({ keyCode }: React.KeyboardEvent<HTMLDivElement>) => {
-    switch (keyCode) {
+  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;
@@ -139,6 +220,7 @@ class Tabs extends React.Component<TypeTabsProps> {
       // 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;
@@ -154,16 +236,29 @@ class Tabs extends React.Component<TypeTabsProps> {
   };
 
   override render() {
-    const { children, qa, onSelect, ...rest } = this.props;
+    const {
+      children,
+      qa,
+      onSelect,
+      "aria-label": ariaLabel,
+      ...rest
+    } = this.props;
     return (
       <Container
+        ref={this.containerRef}
         data-qa-tabs=""
-        onKeyUp={this.keyHandler}
+        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(),
@@ -176,6 +271,11 @@ class Tabs extends React.Component<TypeTabsProps> {
         >
           {children}
         </TabButtonContext.Provider>
+        <div
+          ref={this.endSentinelRef}
+          aria-hidden="true"
+          style={{ flexShrink: 0, width: 1 }}
+        />
       </Container>
     );
   }

package/src/TabsTypes.ts

@@ -36,4 +36,13 @@ export interface TypeTabsProps
 
   /** 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;
 }