@sproutsocial/seeds-react-tabs 1.0.0 → 1.1.1

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     7.71 KB
-CJS dist/index.js.map 12.04 KB
-CJS ⚡️ Build success in 159ms
-ESM dist/esm/index.js     5.67 KB
-ESM dist/esm/index.js.map 11.98 KB
-ESM ⚡️ Build success in 160ms
+CJS dist/index.js     7.76 KB
+CJS dist/index.js.map 12.05 KB
+CJS ⚡️ Build success in 179ms
+ESM dist/esm/index.js     5.71 KB
+ESM dist/esm/index.js.map 11.99 KB
+ESM ⚡️ Build success in 187ms
 DTS Build start
-DTS ⚡️ Build success in 41689ms
+DTS ⚡️ Build success in 41705ms
 DTS dist/index.d.ts  2.39 KB
 DTS dist/index.d.mts 2.39 KB
-Done in 49.01s.
+Done in 49.56s.

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @sproutsocial/seeds-react-tabs
 
+## 1.1.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-button@1.2.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+
+## 1.1.0
+
+### Minor Changes
+
+- cd61069: Refactors Tabs onSelect prop
+  - This should not be a breaking change; at most, type errors may arise.
+  - Before: `onSelect: (arg0: string) => void;`
+  - After: `onSelect(id: string): void;`
+  - By using method syntax when defining the prop's type, we allow users more control over the type of their `onSelect` function.
+  - For instance, this allows a function with signature `(id: 'a' | 'b') => void` to be passed
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -140,6 +140,7 @@ var Tabs = class extends React2.Component {
   };
   keyHandler = ({ keyCode }) => {
     switch (keyCode) {
+      // left arrow
       case 37:
         this.tabList.forEach((id, index) => {
           if (id === this.getSelectedId()) {
@@ -150,6 +151,7 @@ var Tabs = class extends React2.Component {
           }
         });
         break;
+      // right arrow
       case 39:
         this.tabList.forEach((id, index) => {
           if (id === this.getSelectedId()) {
@@ -196,9 +198,9 @@ var Tabs = class extends React2.Component {
 var Tabs_default = Tabs;
 
 // src/index.ts
-var src_default = Tabs_default;
+var index_default = Tabs_default;
 export {
   Tabs_default as Tabs,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

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 { TypeTabButtonsProps, TypeTabsProps } 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          // TODO: Add a TabPanel subcomponent for use with tabs\n          // aria-controls={tabPanelId}\n          {...rest}\n        >\n          {children}\n        </TabButton>\n      </TabItem>\n    );\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  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<HTMLUListElement>) => {\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.ul<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  list-style: none;\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.li<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 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, { TabItem, TabButton } from \"./styles\";\nimport type { TypeTabButtonsProps, TypeTabsProps } 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          // TODO: Add a TabPanel subcomponent for use with tabs\n          // aria-controls={tabPanelId}\n          {...rest}\n        >\n          {children}\n        </TabButton>\n      </TabItem>\n    );\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  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<HTMLUListElement>) => {\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.ul<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  list-style: none;\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.li<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 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"]}

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Tabs: () => Tabs_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Tabs.tsx
 var React2 = __toESM(require("react"));
@@ -177,6 +177,7 @@ var Tabs = class extends React2.Component {
   };
   keyHandler = ({ keyCode }) => {
     switch (keyCode) {
+      // left arrow
       case 37:
         this.tabList.forEach((id, index) => {
           if (id === this.getSelectedId()) {
@@ -187,6 +188,7 @@ var Tabs = class extends React2.Component {
           }
         });
         break;
+      // right arrow
       case 39:
         this.tabList.forEach((id, index) => {
           if (id === this.getSelectedId()) {
@@ -233,7 +235,7 @@ var Tabs = class extends React2.Component {
 var Tabs_default = Tabs;
 
 // src/index.ts
-var src_default = Tabs_default;
+var index_default = Tabs_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tabs

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 { TypeTabButtonsProps, TypeTabsProps } 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          // TODO: Add a TabPanel subcomponent for use with tabs\n          // aria-controls={tabPanelId}\n          {...rest}\n        >\n          {children}\n        </TabButton>\n      </TabItem>\n    );\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  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<HTMLUListElement>) => {\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.ul<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  list-style: none;\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.li<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 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, { TabItem, TabButton } from \"./styles\";\nimport type { TypeTabButtonsProps, TypeTabsProps } 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          // TODO: Add a TabPanel subcomponent for use with tabs\n          // aria-controls={tabPanelId}\n          {...rest}\n        >\n          {children}\n        </TabButton>\n      </TabItem>\n    );\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  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<HTMLUListElement>) => {\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.ul<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  list-style: none;\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.li<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 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.0.0",
+  "version": "1.1.1",
   "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": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-button": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-button": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",