@sproutsocial/seeds-react-tabs 1.2.9 → 1.3.2

package/.turbo/turbo-build.log

@@ -3,19 +3,19 @@ $ tsup --dts
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-tabs/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-tabs/tsup.config.ts
 CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     5.96 KB
-ESM dist/esm/index.js.map 12.58 KB
-ESM ⚡️ Build success in 193ms
-CJS dist/index.js     8.02 KB
-CJS dist/index.js.map 12.64 KB
-CJS ⚡️ Build success in 215ms
+CJS dist/index.js     7.72 KB
+CJS dist/index.js.map 12.13 KB
+CJS ⚡️ Build success in 73ms
+ESM dist/esm/index.js     5.75 KB
+ESM dist/esm/index.js.map 12.06 KB
+ESM ⚡️ Build success in 73ms
 DTS Build start
-DTS ⚡️ Build success in 25408ms
+DTS ⚡️ Build success in 2174ms
 DTS dist/index.d.ts  2.63 KB
 DTS dist/index.d.mts 2.63 KB
-Done in 33.62s.
+Done in 3.65s.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @sproutsocial/seeds-react-tabs
 
+## 1.3.2
+
+### Patch Changes
+
+- Updated dependencies [7d54d67]
+  - @sproutsocial/seeds-react-button@1.4.0
+
+## 1.3.1
+
+### Patch Changes
+
+- Updated dependencies [17d4f12]
+  - @sproutsocial/seeds-react-theme@3.6.0
+  - @sproutsocial/seeds-react-button@1.3.20
+
+## 1.3.0
+
+### Minor Changes
+
+- 651fc1b: Update TabButton structure to correct aria descendents
+
+## 1.2.10
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@1.3.19
+
 ## 1.2.9
 
 ### Patch Changes

package/dist/esm/index.js

@@ -20,8 +20,14 @@ var Container = styled.div`
 
   ${COMMON}
 `;
-var TabItem = styled.div`
+var TabButton = styled(Button)`
   margin-bottom: -1px;
+  padding: ${(props) => `${props.theme.space[350]} 0`};
+  color: ${(props) => props.theme.colors.text.headline};
+  border-radius: 0;
+  border-width: 0 0 3px;
+  width: 100%;
+
   ${(props) => props.fullWidth && css`
       flex-grow: 1;
     `};
@@ -32,23 +38,10 @@ var TabItem = styled.div`
       `};
   }
 
-  ${(props) => props.isSelected && css`
-      box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.base}`};
-    `};
-
-  &:hover {
-    ${(props) => props.isSelected && css`
-        box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.hover}`};
-      `};
-  }
-`;
-var TabButton = styled(Button)`
-  padding: ${(props) => `${props.theme.space[350]} 0`};
-  color: ${(props) => props.theme.colors.text.headline};
-  width: 100%;
-
   ${(props) => props.isSelected && css`
       color: ${(props2) => props2.theme.colors.link.base};
+      border-color: transparent transparent
+        ${(props2) => props2.theme.colors.button.primary.background.base};
     `};
 
   &:hover {
@@ -57,6 +50,11 @@ var TabButton = styled(Button)`
       `};
   }
 
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
   &:active {
     transform: none;
   }
@@ -88,7 +86,7 @@ var TabItemButton = class extends React2.Component {
     const { children, id, ...rest } = this.props;
     const { selectedId, onActivate, fullWidth } = this.context;
     const isSelected = selectedId === id;
-    return /* @__PURE__ */ jsx(TabItem, { fullWidth, isSelected, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       TabButton,
       {
         innerRef: this.buttonRef,
@@ -104,8 +102,9 @@ var TabItemButton = class extends React2.Component {
         "aria-controls": `${id}-panel`,
         ...rest,
         children
-      }
-    ) }, id);
+      },
+      id
+    );
   }
 };
 var TabPanel = ({ children, id, ...rest }) => {

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, { TabItem, 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      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>\n        <TabButton\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      </TabItem>\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 TabItem = styled.div<TypeStyleProps>`\n  margin-bottom: -1px;\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      box-shadow: ${(props) =>\n        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        box-shadow: ${(props) =>\n          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};\n      `};\n  }\n`;\n\nexport const TabButton = styled(Button)<TypeStyleProps>`\n  padding: ${(props) => `${props.theme.space[350]} 0`};\n  color: ${(props) => props.theme.colors.text.headline};\n  width: 100%;\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      color: ${(props) => props.theme.colors.link.base};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        color: ${(props) => props.theme.colors.link.hover};\n      `};\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  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":";AAAA,YAAYA,YAAW;;;ACAvB,OAAO,UAAU,WAAW;AAC5B,SAAS,cAAc;AACvB,SAAS,cAAc;;;ACFvB,OAAuB;;;ADWvB,IAAM,YAAY,OAAO;AAAA,aACZ,CAAC,UAAW,MAAM,YAAY,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA,mBAI/C,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,MAChD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAErD,MAAM;AAAA;AAGH,IAAM,YAAY,OAAO,MAAM;AAAA;AAAA,aAEzB,CAAC,UAAU,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI;AAAA,WAC1C,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlD,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA;AAAA,MAGC,CAAC,UACD,CAAC,MAAM,aACP;AAAA,wBACkB,CAACC,WAAUA,OAAM,MAAM,MAAM,GAAG,CAAC;AAAA,OAClD;AAAA;AAAA;AAAA,IAGH,CAAC,UACD,MAAM,cACN;AAAA,eACW,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,UAE5C,CAACA,WAAUA,OAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;AAAA,KACjE;AAAA;AAAA;AAAA,MAGC,CAAC,UACD,MAAM,cACN;AAAA,iBACW,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,KAAK;AAAA,OAClD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYP,IAAO,iBAAQ;;;ADlBT;AA/BN,IAAM,mBAAyB,qBAA6C,CAAC,CAAC;AAE9E,IAAM,gBAAN,cAAkC,iBAA+B;AAAA,EAC/D,OAAgB,cAAc;AAAA;AAAA;AAAA;AAAA,EAI9B;AAAA,EAEA,YAAoC,iBAAsC;AAAA,EAEjE,oBAAoB;AAC3B,SAAK,QAAQ,aAAa,KAAK,MAAM,IAAI,KAAK,SAAS;AAAA,EACzD;AAAA,EAES,mBAAmB,WAAgC;AAC1D,QAAI,UAAU,OAAO,KAAK,MAAM,IAAI;AAClC,WAAK,QAAQ,cAAc,UAAU,IAAI,KAAK,MAAM,EAAE;AAAA,IACxD;AAAA,EACF;AAAA,EAES,uBAAuB;AAC9B,SAAK,QAAQ,eAAe,KAAK,MAAM,EAAE;AAAA,EAC3C;AAAA,EAES,SAAS;AAChB,UAAM,EAAE,UAAU,IAAI,GAAG,KAAK,IAAI,KAAK;AACvC,UAAM,EAAE,YAAY,YAAY,UAAU,IAAI,KAAK;AACnD,UAAM,aAAa,eAAe;AAElC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU,KAAK;AAAA,QACf;AAAA,QACA,SAAS,MAAM,aAAa,EAAE;AAAA,QAC9B;AAAA,QACA,UAAU,aAAa,IAAI;AAAA,QAC3B;AAAA,QACA,sBAAoB;AAAA,QACpB,4BAA0B;AAAA,QAC1B,iBAAe;AAAA,QACf,MAAK;AAAA,QACL,iBAAe,GAAG,EAAE;AAAA,QACnB,GAAG;AAAA,QAEH;AAAA;AAAA,MAdI;AAAA,IAeP;AAAA,EAEJ;AACF;AAEA,IAAM,WAAwC,CAAC,EAAE,UAAU,IAAI,GAAG,KAAK,MAAM;AAC3E,QAAM,UAAU,GAAG,EAAE;AAErB,SACE,oBAAC,SAAI,IAAI,SAAS,MAAK,YAAW,mBAAiB,IAAK,GAAG,MACxD,UACH;AAEJ;AAKA,IAAM,OAAN,cAAyB,iBAAyB;AAAA,EAChD,OAAO,SAAS;AAAA,EAChB,OAAO,QAAQ;AAAA,EACf,aAAkE,CAAC;AAAA,EACnE,UAAoB,CAAC;AAAA,EAErB,gBAAgB,MAAM,KAAK,MAAM;AAAA,EACjC,aAAa,CAAC,OAAe,KAAK,MAAM,SAAS,EAAE;AAAA,EACnD,aAAa,CAAC,IAAY,QAA0B;AAClD,QAAI,CAAC,KAAK,QAAQ,SAAS,EAAE,GAAG;AAC9B,WAAK,QAAQ,KAAK,EAAE;AACpB,WAAK,WAAW,EAAE,IAAI;AAAA,IACxB;AAAA,EACF;AAAA,EAEA,cAAc,CAAC,YAAoB,UAAkB;AACnD,QAAI,KAAK,QAAQ,SAAS,UAAU,GAAG;AACrC,WAAK,UAAU,KAAK,QAAQ,IAAI,CAAC,OAAQ,OAAO,aAAa,QAAQ,EAAG;AACxE,WAAK,WAAW,KAAK,IAAI,KAAK,WAAW,UAAU;AACnD,WAAK,WAAW,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAAA,EAEA,eAAe,CAAC,OAAe;AAC7B,QAAI,KAAK,QAAQ,SAAS,EAAE,GAAG;AAC7B,WAAK,UAAU,KAAK,QAAQ,OAAO,CAAC,cAAc,cAAc,EAAE;AAClE,WAAK,WAAW,EAAE,IAAI;AAAA,IACxB;AAAA,EACF;AAAA,EAEA,gBAAgB,CAAC,OAAe;AAC9B,UAAM,YAAY,KAAK,WAAW,EAAE;AACpC,SAAK,MAAM,SAAS,EAAE;AACtB,iBACE,UAAU,WACV,UAAU,QAAQ,SAClB,UAAU,QAAQ,MAAM;AAAA,EAC5B;AAAA,EAEA,aAAa,CAAC,EAAE,QAAQ,MAA2C;AACjE,YAAQ,SAAS;AAAA;AAAA,MAEf,KAAK;AACH,aAAK,QAAQ,QAAQ,CAAC,IAAI,UAAU;AAClC,cAAI,OAAO,KAAK,cAAc,GAAG;AAC/B,kBAAM,QAAQ,KAAK,QAAQ;AAC3B,kBAAM,YAAY,QAAQ,KAAK,IAAI,QAAQ,IAAI,QAAQ;AACvD,kBAAM,SAAS,KAAK,QAAQ,SAAS;AACrC,iBAAK,cAAc,SAAS,SAAS,EAAE;AAAA,UACzC;AAAA,QACF,CAAC;AACD;AAAA;AAAA,MAGF,KAAK;AACH,aAAK,QAAQ,QAAQ,CAAC,IAAI,UAAU;AAClC,cAAI,OAAO,KAAK,cAAc,GAAG;AAC/B,kBAAM,QAAQ,KAAK,QAAQ;AAC3B,kBAAM,YAAY,QAAQ,IAAI,QAAQ,QAAQ,IAAI;AAClD,kBAAM,SAAS,KAAK,QAAQ,SAAS;AACrC,iBAAK,cAAc,SAAS,SAAS,EAAE;AAAA,UACzC;AAAA,QACF,CAAC;AACD;AAAA,MAEF;AACE;AAAA,IACJ;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,EAAE,UAAU,IAAI,UAAU,GAAG,KAAK,IAAI,KAAK;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAa;AAAA,QACb,SAAS,KAAK;AAAA,QACd;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,OAAO;AAAA,cACL,YAAY,KAAK,cAAc;AAAA,cAC/B,WAAW,KAAK,MAAM;AAAA,cACtB,YAAY,KAAK;AAAA,cACjB,YAAY,KAAK;AAAA,cACjB,aAAa,KAAK;AAAA,cAClB,cAAc,KAAK;AAAA,YACrB;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,eAAQ;;;AGrLf,IAAO,gBAAQ;","names":["React","props"]}

package/dist/index.js

@@ -57,8 +57,14 @@ var Container = import_styled_components.default.div`
 
   ${import_seeds_react_system_props.COMMON}
 `;
-var TabItem = import_styled_components.default.div`
+var TabButton = (0, import_styled_components.default)(import_seeds_react_button.Button)`
   margin-bottom: -1px;
+  padding: ${(props) => `${props.theme.space[350]} 0`};
+  color: ${(props) => props.theme.colors.text.headline};
+  border-radius: 0;
+  border-width: 0 0 3px;
+  width: 100%;
+
   ${(props) => props.fullWidth && import_styled_components.css`
       flex-grow: 1;
     `};
@@ -69,23 +75,10 @@ var TabItem = import_styled_components.default.div`
       `};
   }
 
-  ${(props) => props.isSelected && import_styled_components.css`
-      box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.base}`};
-    `};
-
-  &:hover {
-    ${(props) => props.isSelected && import_styled_components.css`
-        box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.hover}`};
-      `};
-  }
-`;
-var TabButton = (0, import_styled_components.default)(import_seeds_react_button.Button)`
-  padding: ${(props) => `${props.theme.space[350]} 0`};
-  color: ${(props) => props.theme.colors.text.headline};
-  width: 100%;
-
   ${(props) => props.isSelected && import_styled_components.css`
       color: ${(props2) => props2.theme.colors.link.base};
+      border-color: transparent transparent
+        ${(props2) => props2.theme.colors.button.primary.background.base};
     `};
 
   &:hover {
@@ -94,6 +87,11 @@ var TabButton = (0, import_styled_components.default)(import_seeds_react_button.
       `};
   }
 
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
   &:active {
     transform: none;
   }
@@ -125,7 +123,7 @@ var TabItemButton = class extends React2.Component {
     const { children, id, ...rest } = this.props;
     const { selectedId, onActivate, fullWidth } = this.context;
     const isSelected = selectedId === id;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabItem, { fullWidth, isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       TabButton,
       {
         innerRef: this.buttonRef,
@@ -141,8 +139,9 @@ var TabItemButton = class extends React2.Component {
         "aria-controls": `${id}-panel`,
         ...rest,
         children
-      }
-    ) }, id);
+      },
+      id
+    );
   }
 };
 var TabPanel = ({ children, id, ...rest }) => {

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, { TabItem, 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      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>\n        <TabButton\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      </TabItem>\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 TabItem = styled.div<TypeStyleProps>`\n  margin-bottom: -1px;\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      box-shadow: ${(props) =>\n        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        box-shadow: ${(props) =>\n          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};\n      `};\n  }\n`;\n\nexport const TabButton = styled(Button)<TypeStyleProps>`\n  padding: ${(props) => `${props.theme.space[350]} 0`};\n  color: ${(props) => props.theme.colors.text.headline};\n  width: 100%;\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      color: ${(props) => props.theme.colors.link.base};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        color: ${(props) => props.theme.colors.link.hover};\n      `};\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  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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-tabs",
-  "version": "1.2.9",
+  "version": "1.3.2",
   "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.5.1",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-button": "^1.3.18"
+    "@sproutsocial/seeds-react-button": "^1.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Tabs.stories.tsx

@@ -4,6 +4,7 @@ import { Icon, type TypeIconName } from "@sproutsocial/seeds-react-icon";
 import { Tabs } from "./";
 import { Text } from "@sproutsocial/seeds-react-text";
 import type { Meta, StoryObj } from "@storybook/react";
+import Box from "@sproutsocial/seeds-react-box";
 
 interface TypeTabData {
   id: string;
@@ -77,6 +78,55 @@ export const Default: Story = {
   name: "Default",
 };
 
+export const FullWidth: Story = {
+  render: (args) => {
+    const [selectedId, setSelectedId] = useState("notifications");
+
+    return (
+      <Box width="100%" display="flex" flexDirection="column">
+        <Tabs
+          selectedId={selectedId}
+          onSelect={(selected) => setSelectedId(selected)}
+          fullWidth
+        >
+          <Tabs.Button id="notifications">
+            <Icon name="bell-outline" mr="12px" aria-hidden />
+            <Text size="300" fontWeight="600">
+              Notifications
+            </Text>
+          </Tabs.Button>
+          <Tabs.Button id="issues">
+            <Icon name="triangle-exclamation-outline" mr="12px" aria-hidden />
+            <Text size="300" fontWeight="600">
+              Issues
+            </Text>
+          </Tabs.Button>
+        </Tabs>
+
+        {selectedId === "notifications" && (
+          <Tabs.Panel id="notifications">
+            <Text mt="24px">
+              Notifications panel content goes here. This panel is properly
+              connected to the "Notifications" tab via ARIA attributes for
+              accessibility.
+            </Text>
+          </Tabs.Panel>
+        )}
+
+        {selectedId === "issues" && (
+          <Tabs.Panel id="issues">
+            <Text mt="24px">
+              Issues panel content goes here. Screen readers will announce the
+              relationship between tabs and panels.
+            </Text>
+          </Tabs.Panel>
+        )}
+      </Box>
+    );
+  },
+  name: "Full width",
+};
+
 export const RemoveATab: Story = {
   render: (args) => {
     const [state, setState] = useState<TypeTabsStoryState>({

package/src/Tabs.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Container, { TabItem, TabButton } from "./styles";
+import Container, { TabButton } from "./styles";
 import type {
   TypeTabButtonsProps,
   TypeTabsProps,
@@ -49,24 +49,23 @@ class TabItemButton extends React.Component<TypeTabButtonsProps> {
     const isSelected = selectedId === id;
 
     return (
-      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>
-        <TabButton
-          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>
-      </TabItem>
+      <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>
     );
   }
 }

package/src/styles.ts

@@ -20,8 +20,14 @@ const Container = styled.div<TypeTabsProps>`
   ${COMMON}
 `;
 
-export const TabItem = styled.div<TypeStyleProps>`
+export const TabButton = styled(Button)<TypeStyleProps>`
   margin-bottom: -1px;
+  padding: ${(props) => `${props.theme.space[350]} 0`};
+  color: ${(props) => props.theme.colors.text.headline};
+  border-radius: 0;
+  border-width: 0 0 3px;
+  width: 100%;
+
   ${(props) =>
     props.fullWidth &&
     css`
@@ -36,32 +42,12 @@ export const TabItem = styled.div<TypeStyleProps>`
       `};
   }
 
-  ${(props) =>
-    props.isSelected &&
-    css`
-      box-shadow: ${(props) =>
-        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
-    `};
-
-  &:hover {
-    ${(props) =>
-      props.isSelected &&
-      css`
-        box-shadow: ${(props) =>
-          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
-      `};
-  }
-`;
-
-export const TabButton = styled(Button)<TypeStyleProps>`
-  padding: ${(props) => `${props.theme.space[350]} 0`};
-  color: ${(props) => props.theme.colors.text.headline};
-  width: 100%;
-
   ${(props) =>
     props.isSelected &&
     css`
       color: ${(props) => props.theme.colors.link.base};
+      border-color: transparent transparent
+        ${(props) => props.theme.colors.button.primary.background.base};
     `};
 
   &:hover {
@@ -72,6 +58,11 @@ export const TabButton = styled(Button)<TypeStyleProps>`
       `};
   }
 
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
   &:active {
     transform: none;
   }