@sproutsocial/seeds-react-tabs 1.3.10 → 1.4.11

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     7.72 KB
-CJS dist/index.js.map 12.13 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     5.75 KB
-ESM dist/esm/index.js.map 12.06 KB
-ESM ⚡️ Build success in 14ms
+CJS dist/index.js     11.88 KB
+CJS dist/index.js.map 19.36 KB
+CJS ⚡️ Build success in 75ms
+ESM dist/esm/index.js     9.89 KB
+ESM dist/esm/index.js.map 19.31 KB
+ESM ⚡️ Build success in 75ms
 DTS Build start
-DTS ⚡️ Build success in 3801ms
-DTS dist/index.d.ts  2.63 KB
-DTS dist/index.d.mts 2.63 KB
-Done in 5.29s.
+DTS ⚡️ Build success in 4933ms
+DTS dist/index.d.ts  3.38 KB
+DTS dist/index.d.mts 3.38 KB
+Done in 7.10s.

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @sproutsocial/seeds-react-tabs
 
+## 1.4.11
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@2.2.1
+
+## 1.4.10
+
+### Patch Changes
+
+- Updated dependencies [456a20f]
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-button@2.2.0
+  - @sproutsocial/seeds-react-system-props@3.1.1
+
+## 1.4.9
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+- Updated dependencies [a0fe3d3]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-button@2.1.3
+
+## 1.4.8
+
+### Patch Changes
+
+- Updated dependencies [cb27f07]
+  - @sproutsocial/seeds-react-button@2.1.2
+
+## 1.4.7
+
+### Patch Changes
+
+- Updated dependencies [40d2dfe]
+  - @sproutsocial/seeds-react-button@2.1.1
+
+## 1.4.6
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-button@2.1.0
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+
+## 1.4.5
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@2.0.8
+
+## 1.4.4
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-button@2.0.7
+
+## 1.4.3
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-button@2.0.6
+
+## 1.4.2
+
+### Patch Changes
+
+- 9c60744: Fix Safari-only tab collapse not addressed by 1.4.1:
+
+  Inside a flex parent with `overflow: auto/hidden`, Safari resolves the Container's `min-height: min-content` to `0` when the same element also has `overflow-x: auto; overflow-y: hidden`. Tabs would paint once, then collapse to their `border-bottom` (1px). Adds `flex-shrink: 0` on the Container so the tablist preserves its intrinsic height regardless of how Safari handles `min-content` in that combination. Chrome behavior is unchanged.
+
+  Reported in [BUGS-28687](https://sprout.atlassian.net/browse/BUGS-28687) across every Profiles-by-Network report.
+
+## 1.4.1
+
+### Patch Changes
+
+- 679806a: Fix layout regression introduced in 1.4.0:
+
+  - **Tabs no longer collapse to a 1px-tall row inside flex-column parents.** Container's `overflow-x: auto; overflow-y: hidden` was triggering the flex `min-height: auto → 0` override, allowing an ancestor `display: flex; flex-direction: column` with a bounded height (e.g. `ContentWithDrillDown`'s `Content.Body`) to shrink the tablist to its border-bottom. Container now sets `min-height: min-content`, restoring the pre-1.4.0 minimum-size behavior without changing scroll semantics.
+
+  No API changes.
+
+## 1.4.0
+
+### Minor Changes
+
+- 412cc1e: Tabs now scrolls horizontally when the tab list overflows its container, with a fade indicator at each edge that auto-adapts to the parent's background via CSS `mask-image`. Vertical mouse-wheel input is redirected to horizontal scroll (with release-at-ends behavior so page scrolling isn't trapped), and arrow-key and click activation auto-scroll the selected tab into view. Adds an optional `aria-label` prop that's forwarded to the `role="tablist"` element per the WAI-ARIA Authoring Practices Tabs pattern.
+
+  Spacing change for non-`fullWidth` Tabs: the inter-tab `margin-right` between adjacent tab buttons has been removed in favor of horizontal padding on each tab button. Visual spacing is preserved (each tab now contributes its own breathing room via padding rather than the previous tab pushing it via margin), and clickable hit-areas are slightly larger. The `fullWidth` case is unchanged. Consumers depending on the exact pixel values of the old margin should re-check their layouts.
+
+## 1.3.11
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@2.0.5
+
 ## 1.3.10
 
 ### Patch Changes

package/dist/esm/index.js

@@ -12,17 +12,71 @@ import "react";
 // src/styles.ts
 var Container = styled.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
+    );
+  }
+
   ${COMMON}
 `;
 var TabButton = styled(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;
@@ -32,12 +86,6 @@ var TabButton = styled(Button)`
       flex-grow: 1;
     `};
 
-  &:not(:last-child) {
-    ${(props) => !props.fullWidth && css`
-        margin-right: ${(props2) => props2.theme.space[350]};
-      `};
-  }
-
   ${(props) => props.isSelected && css`
       color: ${(props2) => props2.theme.colors.link.base};
       border-color: transparent transparent
@@ -62,7 +110,7 @@ var TabButton = styled(Button)`
 var styles_default = Container;
 
 // src/Tabs.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var TabButtonContext = React2.createContext({});
 var TabItemButton = class extends React2.Component {
   static contextType = TabButtonContext;
@@ -116,8 +164,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);
@@ -138,15 +248,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;
@@ -158,6 +269,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;
@@ -171,30 +283,56 @@ var Tabs = class extends React2.Component {
     }
   };
   render() {
-    const { children, qa, onSelect, ...rest } = this.props;
-    return /* @__PURE__ */ jsx(
+    const {
+      children,
+      qa,
+      onSelect,
+      "aria-label": ariaLabel,
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+            "div",
+            {
+              ref: this.startSentinelRef,
+              "aria-hidden": "true",
+              style: { flexShrink: 0, width: 1 }
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              ref: this.endSentinelRef,
+              "aria-hidden": "true",
+              style: { flexShrink: 0, width: 1 }
+            }
+          )
+        ]
       }
     );
   }

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs.tsx","../../src/styles.ts","../../src/TabsTypes.ts","../../src/index.ts"],"sourcesContent":["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","import Tabs from \"./Tabs\";\n\nexport default Tabs;\nexport { Tabs };\nexport * from \"./TabsTypes\";\n"],"mappings":"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","names":["React","props"]}
+{"version":3,"sources":["../../src/Tabs.tsx","../../src/styles.ts","../../src/TabsTypes.ts","../../src/index.ts"],"sourcesContent":["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","import Tabs from \"./Tabs\";\n\nexport default Tabs;\nexport { Tabs };\nexport * from \"./TabsTypes\";\n"],"mappings":"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","names":["React","props"]}

package/dist/index.d.mts

@@ -21,6 +21,14 @@ interface TypeTabsProps extends TypeStyledComponentsCommonProps, TypeSystemCommo
     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;
 }
 
 interface TypeTabButtonRef {
@@ -52,13 +60,22 @@ declare class Tabs extends React.Component<TypeTabsProps> {
     static Panel: React.FC<TypeTabPanelProps>;
     buttonRefs: Record<string, TypeTabButtonRef | null | undefined>;
     tabList: string[];
+    containerRef: React.RefObject<HTMLDivElement>;
+    startSentinelRef: React.RefObject<HTMLDivElement>;
+    endSentinelRef: React.RefObject<HTMLDivElement>;
+    startObserver: IntersectionObserver | null;
+    endObserver: IntersectionObserver | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleWheel: (e: WheelEvent) => void;
     getSelectedId: () => string;
     onActivate: (id: string) => void;
+    scrollTabIntoView: (id: string) => void;
     onTabMount: (id: string, ref: TypeTabButtonRef) => void;
     onTabUpdate: (previousId: string, newId: string) => void;
     onTabUnmount: (id: string) => void;
     selectNextTab: (id: string) => void;
-    keyHandler: ({ keyCode }: React.KeyboardEvent<HTMLDivElement>) => void;
+    keyHandler: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     render(): react_jsx_runtime.JSX.Element;
 }
 

package/dist/index.d.ts

@@ -21,6 +21,14 @@ interface TypeTabsProps extends TypeStyledComponentsCommonProps, TypeSystemCommo
     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;
 }
 
 interface TypeTabButtonRef {
@@ -52,13 +60,22 @@ declare class Tabs extends React.Component<TypeTabsProps> {
     static Panel: React.FC<TypeTabPanelProps>;
     buttonRefs: Record<string, TypeTabButtonRef | null | undefined>;
     tabList: string[];
+    containerRef: React.RefObject<HTMLDivElement>;
+    startSentinelRef: React.RefObject<HTMLDivElement>;
+    endSentinelRef: React.RefObject<HTMLDivElement>;
+    startObserver: IntersectionObserver | null;
+    endObserver: IntersectionObserver | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleWheel: (e: WheelEvent) => void;
     getSelectedId: () => string;
     onActivate: (id: string) => void;
+    scrollTabIntoView: (id: string) => void;
     onTabMount: (id: string, ref: TypeTabButtonRef) => void;
     onTabUpdate: (previousId: string, newId: string) => void;
     onTabUnmount: (id: string) => void;
     selectNextTab: (id: string) => void;
-    keyHandler: ({ keyCode }: React.KeyboardEvent<HTMLDivElement>) => void;
+    keyHandler: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     render(): react_jsx_runtime.JSX.Element;
 }