@semcore/tab-line 17.1.0 → 17.2.0-prerelease.5

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.2.0] - 2026-06-05
+
+### Added
+
+- Links to the API and examples in the docs.
+
 ## [17.1.0] - 2026-05-13
 
 ### Added

package/lib/cjs/TabLine.js

@@ -13,20 +13,20 @@ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhan
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_wz7vf_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_wz7vf_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_wz7vf_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_wz7vf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_wz7vf_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_wz7vf_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgb(135, 150, 239))}.___STabLineItem_wz7vf_gg_ .___SAddon_wz7vf_gg_:not(:last-child),.___STabLineItem_wz7vf_gg_ .___SText_wz7vf_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_wz7vf_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, rgb(135, 150, 239));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_{flex-shrink:0}.___STabLineItem_wz7vf_gg_.__disabled_wz7vf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_wz7vf_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_wz7vf_gg_._size_m_wz7vf_gg_{height:28px;min-width:18px}.___STabLineItem_wz7vf_gg_._size_l_wz7vf_gg_{height:40px;min-width:26px}.___STabLineItem_wz7vf_gg_._neighborLocation_left_wz7vf_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::before{transition:none}.___SCaret_wz7vf_gg_{display:none}}", /*__inner_css_end__*/"wz7vf_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_1de7a_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabLineItem_1de7a_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:#0000;color:var(--intergalactic-text-primary,#010500e5);margin-right:var(--intergalactic-spacing-4x,16px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1de7a_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1de7a_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1de7a_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:initial}.___STabLineItem_1de7a_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}}.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_:after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active,#8796ef)}.___STabLineItem_1de7a_gg_ .___SAddon_1de7a_gg_:not(:last-child),.___STabLineItem_1de7a_gg_ .___SText_1de7a_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x,8px)}.___SCaret_1de7a_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active,#8796ef);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_{flex-shrink:0}.___STabLineItem_1de7a_gg_.__disabled_1de7a_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1de7a_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1de7a_gg_._size_m_1de7a_gg_{height:28px;min-width:18px}.___STabLineItem_1de7a_gg_._size_l_1de7a_gg_{height:40px;min-width:26px}.___STabLineItem_1de7a_gg_._neighborLocation_left_1de7a_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:before{transition:none}.___SCaret_1de7a_gg_{display:none}}", /*__inner_css_end__*/"1de7a_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STabLine": "___STabLine_wz7vf_gg_",
-  "_underlined": "__underlined_wz7vf_gg_",
-  "__SCaret": "___SCaret_wz7vf_gg_",
-  "__STabLineItem": "___STabLineItem_wz7vf_gg_",
-  "_selected": "__selected_wz7vf_gg_",
-  "_disabled": "__disabled_wz7vf_gg_",
-  "__SAddon": "___SAddon_wz7vf_gg_",
-  "_size_m": "_size_m_wz7vf_gg_",
-  "_size_l": "_size_l_wz7vf_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_wz7vf_gg_",
-  "__SText": "___SText_wz7vf_gg_"
+  "__STabLine": "___STabLine_1de7a_gg_",
+  "_underlined": "__underlined_1de7a_gg_",
+  "__SCaret": "___SCaret_1de7a_gg_",
+  "__STabLineItem": "___STabLineItem_1de7a_gg_",
+  "_selected": "__selected_1de7a_gg_",
+  "_disabled": "__disabled_1de7a_gg_",
+  "__SAddon": "___SAddon_1de7a_gg_",
+  "_size_m": "_size_m_1de7a_gg_",
+  "_size_l": "_size_l_1de7a_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1de7a_gg_",
+  "__SText": "___SText_1de7a_gg_"
 });
 class TabLineRoot extends _core.Component {
   constructor(...args) {
@@ -183,7 +183,7 @@ class TabLineRoot extends _core.Component {
 (0, _defineProperty2.default)(TabLineRoot, "displayName", 'TabLine');
 (0, _defineProperty2.default)(TabLineRoot, "style", style);
 (0, _defineProperty2.default)(TabLineRoot, "defaultProps", {
-  defaultValue: null,
+  defaultValue: 0,
   size: 'm',
   underlined: true,
   behavior: 'auto'
@@ -265,6 +265,12 @@ function Addon(props) {
     }, _ref4)
   }));
 }
+
+/**
+ * TabLine
+ *
+ * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}
+ */
 const TabLine = (0, _core.createComponent)(TabLineRoot, {
   Item: [TabLineItem, {
     Text,

package/lib/cjs/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","animationStartTimeout","clearTimeout","fromNode","itemRefs","toString","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","underlined","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","ellipsis","SText","SemcoreText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"sources":["../../src/TabLine.tsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\nimport type { NSTabLine } from './TabLine.type';\n\ntype State = {\n  animation: {\n    fromLeft: number;\n    fromWidth: number;\n    toLeft: number;\n    toWidth: number;\n    started: boolean;\n  } | null;\n};\n\nclass TabLineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Component>,\n  typeof TabLineRoot.enhance,\n  NSTabLine.Handlers,\n  {},\n  State\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  };\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: ['role', 'tab'],\n  })] as const;\n\n  state: State = { animation: null };\n  prevValue: NSTabLine.Props['value'] = undefined;\n  itemRefs: Record<string, HTMLDivElement> = {};\n  containerRef = React.createRef<HTMLDivElement>();\n  animationStartTimeout: ReturnType<typeof setTimeout> | null = null;\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n  }\n\n  animate() {\n    if (this.prevValue === undefined || this.asProps.value === undefined) return;\n\n    const fromNode = this.itemRefs[this.prevValue.toString()];\n    const toNode = this.itemRefs[this.asProps.value.toString()];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value: NSTabLine.Props['value']) => (e: React.SyntheticEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props: NSTabLine.Item.Props, index: number) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node: HTMLDivElement) => {\n        if (props.value === undefined) return;\n\n        this.itemRefs[props.value.toString()] = node;\n      },\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props: NSTabLine.Item.Text.Props, index: number) {\n    const { size: tabLineSize } = this.asProps;\n    const size = props.size\n      ? props.size\n      : tabLineSize === 'm' ? 200 : 300;\n\n    return {\n      size,\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Component,\n    typeof TabLineRoot,\n    'Item'\n  >,\n) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n            ref={buttonRef}\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Text.Component,\n    typeof TabLineRoot,\n    'ItemText'\n  >,\n) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={SemcoreText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Item.Addon.Component>,\n) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n}) as unknown as NSTabLine.Component;\n\nexport const wrapTabLine = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabLine.WrapperComponent<PropsExtending>;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLine.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","animationStartTimeout","clearTimeout","fromNode","itemRefs","toString","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","underlined","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","ellipsis","SText","SemcoreText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"sources":["../../src/TabLine.tsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\nimport type { NSTabLine } from './TabLine.type';\n\ntype State = {\n  animation: {\n    fromLeft: number;\n    fromWidth: number;\n    toLeft: number;\n    toWidth: number;\n    started: boolean;\n  } | null;\n};\n\nclass TabLineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Component>,\n  typeof TabLineRoot.enhance,\n  NSTabLine.Handlers,\n  {},\n  State,\n  NSTabLine.DefaultProps\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: 0,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  } as const;\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: ['role', 'tab'],\n  })] as const;\n\n  state: State = { animation: null };\n  prevValue: NSTabLine.Props['value'] = undefined;\n  itemRefs: Record<string, HTMLDivElement> = {};\n  containerRef = React.createRef<HTMLDivElement>();\n  animationStartTimeout: ReturnType<typeof setTimeout> | null = null;\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n  }\n\n  animate() {\n    if (this.prevValue === undefined || this.asProps.value === undefined) return;\n\n    const fromNode = this.itemRefs[this.prevValue.toString()];\n    const toNode = this.itemRefs[this.asProps.value.toString()];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value: NSTabLine.Props['value']) => (e: React.SyntheticEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props: NSTabLine.Item.Props, index: number) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node: HTMLDivElement) => {\n        if (props.value === undefined) return;\n\n        this.itemRefs[props.value.toString()] = node;\n      },\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props: NSTabLine.Item.Text.Props, index: number) {\n    const { size: tabLineSize } = this.asProps;\n    const size = props.size\n      ? props.size\n      : tabLineSize === 'm' ? 200 : 300;\n\n    return {\n      size,\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Component,\n    typeof TabLineRoot,\n    'Item'\n  >,\n) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n            ref={buttonRef}\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Text.Component,\n    typeof TabLineRoot,\n    'ItemText'\n  >,\n) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={SemcoreText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Item.Addon.Component>,\n) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\n/**\n * TabLine\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}\n */\nconst TabLine = createComponent<\n  NSTabLine.Component,\n  typeof TabLineRoot\n>(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport const wrapTabLine = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabLine.WrapperComponent<PropsExtending>;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/TabLine.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps &\n    NeighborLocationProps & {\n      /** TabLine size\n       * @default m\n       * */\n      size?: 'm' | 'l' | false;\n      /** Adds a bottom border for the entire component\n       * @default true\n       * */\n      underlined?: boolean;\n      /** Is invoked when changing the selection */\n      onChange?:\n        | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n        | React.Dispatch<React.SetStateAction<T>>;\n      /** Value of the selected tab */\n      value?: T;\n      /** Default value of the selected tab\n       * @default null\n       * */\n      defaultValue?: T;\n\n      /**\n       * Behavior of tabs.\n       * In `auto`, changes the tab immediately when press arrow.\n       * In `manual`, needs to press `space` or `enter` for select a choice.\n       * @default 'auto'\n       */\n      behavior?: 'auto' | 'manual';\n    };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  namespace Item {\n    type Props = BoxProps &\n      NeighborItemProps & {\n        /** Makes a tab selected. This property is determined automatically depending on the value. */\n        selected?: boolean;\n        /** Disabled state  */\n        disabled?: boolean;\n        /** Tab value */\n        value?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps &\n    NeighborLocationProps & {\n      /** TabLine size\n       * @default m\n       * */\n      size?: 'm' | 'l' | false;\n      /** Adds a bottom border for the entire component\n       * @default true\n       * */\n      underlined?: boolean;\n      /** Is invoked when changing the selection */\n      onChange?:\n        | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n        | React.Dispatch<React.SetStateAction<T>>;\n      /** Value of the selected tab */\n      value?: T;\n      /** Default value of the selected tab\n       * @default null\n       * */\n      defaultValue?: T;\n\n      /**\n       * Behavior of tabs.\n       * In `auto`, changes the tab immediately when press arrow.\n       * In `manual`, needs to press `space` or `enter` for select a choice.\n       * @default 'auto'\n       */\n      behavior?: 'auto' | 'manual';\n    };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  type DefaultProps = {\n    defaultValue: 0;\n    size: 'm';\n    underlined: true;\n    behavior: 'auto';\n  };\n\n  namespace Item {\n    type Props = BoxProps &\n      NeighborItemProps & {\n        /** Makes a tab selected. This property is determined automatically depending on the value. */\n        selected?: boolean;\n        /** Disabled state  */\n        disabled?: boolean;\n        /** Tab value */\n        value?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/TabLine.js

@@ -11,20 +11,20 @@ import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
 import { Text as SemcoreText } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_wz7vf_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_wz7vf_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_wz7vf_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_wz7vf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_wz7vf_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_wz7vf_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgb(135, 150, 239))}.___STabLineItem_wz7vf_gg_ .___SAddon_wz7vf_gg_:not(:last-child),.___STabLineItem_wz7vf_gg_ .___SText_wz7vf_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_wz7vf_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, rgb(135, 150, 239));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_{flex-shrink:0}.___STabLineItem_wz7vf_gg_.__disabled_wz7vf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_wz7vf_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_wz7vf_gg_._size_m_wz7vf_gg_{height:28px;min-width:18px}.___STabLineItem_wz7vf_gg_._size_l_wz7vf_gg_{height:40px;min-width:26px}.___STabLineItem_wz7vf_gg_._neighborLocation_left_wz7vf_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::before{transition:none}.___SCaret_wz7vf_gg_{display:none}}", /*__inner_css_end__*/"wz7vf_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_1de7a_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabLineItem_1de7a_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:#0000;color:var(--intergalactic-text-primary,#010500e5);margin-right:var(--intergalactic-spacing-4x,16px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1de7a_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1de7a_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1de7a_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:initial}.___STabLineItem_1de7a_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}}.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_:after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active,#8796ef)}.___STabLineItem_1de7a_gg_ .___SAddon_1de7a_gg_:not(:last-child),.___STabLineItem_1de7a_gg_ .___SText_1de7a_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x,8px)}.___SCaret_1de7a_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active,#8796ef);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_{flex-shrink:0}.___STabLineItem_1de7a_gg_.__disabled_1de7a_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1de7a_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1de7a_gg_._size_m_1de7a_gg_{height:28px;min-width:18px}.___STabLineItem_1de7a_gg_._size_l_1de7a_gg_{height:40px;min-width:26px}.___STabLineItem_1de7a_gg_._neighborLocation_left_1de7a_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:before{transition:none}.___SCaret_1de7a_gg_{display:none}}", /*__inner_css_end__*/"1de7a_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STabLine": "___STabLine_wz7vf_gg_",
-  "_underlined": "__underlined_wz7vf_gg_",
-  "__SCaret": "___SCaret_wz7vf_gg_",
-  "__STabLineItem": "___STabLineItem_wz7vf_gg_",
-  "_selected": "__selected_wz7vf_gg_",
-  "_disabled": "__disabled_wz7vf_gg_",
-  "__SAddon": "___SAddon_wz7vf_gg_",
-  "_size_m": "_size_m_wz7vf_gg_",
-  "_size_l": "_size_l_wz7vf_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_wz7vf_gg_",
-  "__SText": "___SText_wz7vf_gg_"
+  "__STabLine": "___STabLine_1de7a_gg_",
+  "_underlined": "__underlined_1de7a_gg_",
+  "__SCaret": "___SCaret_1de7a_gg_",
+  "__STabLineItem": "___STabLineItem_1de7a_gg_",
+  "_selected": "__selected_1de7a_gg_",
+  "_disabled": "__disabled_1de7a_gg_",
+  "__SAddon": "___SAddon_1de7a_gg_",
+  "_size_m": "_size_m_1de7a_gg_",
+  "_size_l": "_size_l_1de7a_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1de7a_gg_",
+  "__SText": "___SText_1de7a_gg_"
 });
 class TabLineRoot extends Component {
   constructor(...args) {
@@ -181,7 +181,7 @@ class TabLineRoot extends Component {
 _defineProperty(TabLineRoot, "displayName", 'TabLine');
 _defineProperty(TabLineRoot, "style", style);
 _defineProperty(TabLineRoot, "defaultProps", {
-  defaultValue: null,
+  defaultValue: 0,
   size: 'm',
   underlined: true,
   behavior: 'auto'
@@ -263,6 +263,12 @@ function Addon(props) {
     }, _ref4)
   }));
 }
+
+/**
+ * TabLine
+ *
+ * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}
+ */
 const TabLine = createComponent(TabLineRoot, {
   Item: [TabLineItem, {
     Text,

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","SemcoreText","React","style","_sstyled","insert","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","animationStartTimeout","clearTimeout","fromNode","itemRefs","toString","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","ellipsis","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.tsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\nimport type { NSTabLine } from './TabLine.type';\n\ntype State = {\n  animation: {\n    fromLeft: number;\n    fromWidth: number;\n    toLeft: number;\n    toWidth: number;\n    started: boolean;\n  } | null;\n};\n\nclass TabLineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Component>,\n  typeof TabLineRoot.enhance,\n  NSTabLine.Handlers,\n  {},\n  State\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  };\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: ['role', 'tab'],\n  })] as const;\n\n  state: State = { animation: null };\n  prevValue: NSTabLine.Props['value'] = undefined;\n  itemRefs: Record<string, HTMLDivElement> = {};\n  containerRef = React.createRef<HTMLDivElement>();\n  animationStartTimeout: ReturnType<typeof setTimeout> | null = null;\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n  }\n\n  animate() {\n    if (this.prevValue === undefined || this.asProps.value === undefined) return;\n\n    const fromNode = this.itemRefs[this.prevValue.toString()];\n    const toNode = this.itemRefs[this.asProps.value.toString()];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value: NSTabLine.Props['value']) => (e: React.SyntheticEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props: NSTabLine.Item.Props, index: number) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node: HTMLDivElement) => {\n        if (props.value === undefined) return;\n\n        this.itemRefs[props.value.toString()] = node;\n      },\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props: NSTabLine.Item.Text.Props, index: number) {\n    const { size: tabLineSize } = this.asProps;\n    const size = props.size\n      ? props.size\n      : tabLineSize === 'm' ? 200 : 300;\n\n    return {\n      size,\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Component,\n    typeof TabLineRoot,\n    'Item'\n  >,\n) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n            ref={buttonRef}\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Text.Component,\n    typeof TabLineRoot,\n    'ItemText'\n  >,\n) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={SemcoreText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Item.Addon.Component>,\n) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n}) as unknown as NSTabLine.Component;\n\nexport const wrapTabLine = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabLine.WrapperComponent<PropsExtending>;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","SemcoreText","React","style","_sstyled","insert","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","animationStartTimeout","clearTimeout","fromNode","itemRefs","toString","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","ellipsis","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.tsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\nimport type { NSTabLine } from './TabLine.type';\n\ntype State = {\n  animation: {\n    fromLeft: number;\n    fromWidth: number;\n    toLeft: number;\n    toWidth: number;\n    started: boolean;\n  } | null;\n};\n\nclass TabLineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Component>,\n  typeof TabLineRoot.enhance,\n  NSTabLine.Handlers,\n  {},\n  State,\n  NSTabLine.DefaultProps\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: 0,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  } as const;\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: ['role', 'tab'],\n  })] as const;\n\n  state: State = { animation: null };\n  prevValue: NSTabLine.Props['value'] = undefined;\n  itemRefs: Record<string, HTMLDivElement> = {};\n  containerRef = React.createRef<HTMLDivElement>();\n  animationStartTimeout: ReturnType<typeof setTimeout> | null = null;\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n  }\n\n  animate() {\n    if (this.prevValue === undefined || this.asProps.value === undefined) return;\n\n    const fromNode = this.itemRefs[this.prevValue.toString()];\n    const toNode = this.itemRefs[this.asProps.value.toString()];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value: NSTabLine.Props['value']) => (e: React.SyntheticEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props: NSTabLine.Item.Props, index: number) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node: HTMLDivElement) => {\n        if (props.value === undefined) return;\n\n        this.itemRefs[props.value.toString()] = node;\n      },\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props: NSTabLine.Item.Text.Props, index: number) {\n    const { size: tabLineSize } = this.asProps;\n    const size = props.size\n      ? props.size\n      : tabLineSize === 'm' ? 200 : 300;\n\n    return {\n      size,\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Component,\n    typeof TabLineRoot,\n    'Item'\n  >,\n) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n            ref={buttonRef}\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Text.Component,\n    typeof TabLineRoot,\n    'ItemText'\n  >,\n) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={SemcoreText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Item.Addon.Component>,\n) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\n/**\n * TabLine\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}\n */\nconst TabLine = createComponent<\n  NSTabLine.Component,\n  typeof TabLineRoot\n>(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport const wrapTabLine = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabLine.WrapperComponent<PropsExtending>;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/TabLine.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps &\n    NeighborLocationProps & {\n      /** TabLine size\n       * @default m\n       * */\n      size?: 'm' | 'l' | false;\n      /** Adds a bottom border for the entire component\n       * @default true\n       * */\n      underlined?: boolean;\n      /** Is invoked when changing the selection */\n      onChange?:\n        | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n        | React.Dispatch<React.SetStateAction<T>>;\n      /** Value of the selected tab */\n      value?: T;\n      /** Default value of the selected tab\n       * @default null\n       * */\n      defaultValue?: T;\n\n      /**\n       * Behavior of tabs.\n       * In `auto`, changes the tab immediately when press arrow.\n       * In `manual`, needs to press `space` or `enter` for select a choice.\n       * @default 'auto'\n       */\n      behavior?: 'auto' | 'manual';\n    };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  namespace Item {\n    type Props = BoxProps &\n      NeighborItemProps & {\n        /** Makes a tab selected. This property is determined automatically depending on the value. */\n        selected?: boolean;\n        /** Disabled state  */\n        disabled?: boolean;\n        /** Tab value */\n        value?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps &\n    NeighborLocationProps & {\n      /** TabLine size\n       * @default m\n       * */\n      size?: 'm' | 'l' | false;\n      /** Adds a bottom border for the entire component\n       * @default true\n       * */\n      underlined?: boolean;\n      /** Is invoked when changing the selection */\n      onChange?:\n        | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n        | React.Dispatch<React.SetStateAction<T>>;\n      /** Value of the selected tab */\n      value?: T;\n      /** Default value of the selected tab\n       * @default null\n       * */\n      defaultValue?: T;\n\n      /**\n       * Behavior of tabs.\n       * In `auto`, changes the tab immediately when press arrow.\n       * In `manual`, needs to press `space` or `enter` for select a choice.\n       * @default 'auto'\n       */\n      behavior?: 'auto' | 'manual';\n    };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  type DefaultProps = {\n    defaultValue: 0;\n    size: 'm';\n    underlined: true;\n    behavior: 'auto';\n  };\n\n  namespace Item {\n    type Props = BoxProps &\n      NeighborItemProps & {\n        /** Makes a tab selected. This property is determined automatically depending on the value. */\n        selected?: boolean;\n        /** Disabled state  */\n        disabled?: boolean;\n        /** Tab value */\n        value?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}

package/lib/esm/TabLine.mjs

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box, NeighborLocation } from "@semcore/base-components";
 import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
@@ -10,22 +10,22 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabLine_wz7vf_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_wz7vf_gg_.__underlined_wz7vf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_wz7vf_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_wz7vf_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_wz7vf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_wz7vf_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_wz7vf_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_wz7vf_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgb(135, 150, 239))}.___STabLineItem_wz7vf_gg_ .___SAddon_wz7vf_gg_:not(:last-child),.___STabLineItem_wz7vf_gg_ .___SText_wz7vf_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_wz7vf_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, rgb(135, 150, 239));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_{flex-shrink:0}.___STabLineItem_wz7vf_gg_.__disabled_wz7vf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_wz7vf_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_wz7vf_gg_._size_m_wz7vf_gg_{height:28px;min-width:18px}.___STabLineItem_wz7vf_gg_._size_l_wz7vf_gg_{height:40px;min-width:26px}.___STabLineItem_wz7vf_gg_._neighborLocation_left_wz7vf_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_wz7vf_gg_.__selected_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::after,.___STabLineItem_wz7vf_gg_::before{transition:none}.___SCaret_wz7vf_gg_{display:none}}',
+    '.___STabLine_1de7a_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLine_1de7a_gg_.__underlined_1de7a_gg_{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabLineItem_1de7a_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:#0000;color:var(--intergalactic-text-primary,#010500e5);margin-right:var(--intergalactic-spacing-4x,16px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1de7a_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1de7a_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1de7a_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:initial}.___STabLineItem_1de7a_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLineItem_1de7a_gg_:hover:before{background-color:var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}}.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_:after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active,#8796ef)}.___STabLineItem_1de7a_gg_ .___SAddon_1de7a_gg_:not(:last-child),.___STabLineItem_1de7a_gg_ .___SText_1de7a_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x,8px)}.___SCaret_1de7a_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active,#8796ef);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_{flex-shrink:0}.___STabLineItem_1de7a_gg_.__disabled_1de7a_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1de7a_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1de7a_gg_._size_m_1de7a_gg_{height:28px;min-width:18px}.___STabLineItem_1de7a_gg_._size_l_1de7a_gg_{height:40px;min-width:26px}.___STabLineItem_1de7a_gg_._neighborLocation_left_1de7a_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1de7a_gg_.__selected_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:after,.___STabLineItem_1de7a_gg_:before{transition:none}.___SCaret_1de7a_gg_{display:none}}',
     /*__inner_css_end__*/
-    "wz7vf_gg_"
+    "1de7a_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STabLine": "___STabLine_wz7vf_gg_",
-    "_underlined": "__underlined_wz7vf_gg_",
-    "__SCaret": "___SCaret_wz7vf_gg_",
-    "__STabLineItem": "___STabLineItem_wz7vf_gg_",
-    "_selected": "__selected_wz7vf_gg_",
-    "_disabled": "__disabled_wz7vf_gg_",
-    "__SAddon": "___SAddon_wz7vf_gg_",
-    "_size_m": "_size_m_wz7vf_gg_",
-    "_size_l": "_size_l_wz7vf_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_wz7vf_gg_",
-    "__SText": "___SText_wz7vf_gg_"
+    "__STabLine": "___STabLine_1de7a_gg_",
+    "_underlined": "__underlined_1de7a_gg_",
+    "__SCaret": "___SCaret_1de7a_gg_",
+    "__STabLineItem": "___STabLineItem_1de7a_gg_",
+    "_selected": "__selected_1de7a_gg_",
+    "_disabled": "__disabled_1de7a_gg_",
+    "__SAddon": "___SAddon_1de7a_gg_",
+    "_size_m": "_size_m_1de7a_gg_",
+    "_size_l": "_size_l_1de7a_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1de7a_gg_",
+    "__SText": "___SText_1de7a_gg_"
   })
 );
 class TabLineRoot extends Component {
@@ -182,7 +182,7 @@ class TabLineRoot extends Component {
 _defineProperty(TabLineRoot, "displayName", "TabLine");
 _defineProperty(TabLineRoot, "style", style);
 _defineProperty(TabLineRoot, "defaultProps", {
-  defaultValue: null,
+  defaultValue: 0,
   size: "m",
   underlined: true,
   behavior: "auto"

package/lib/types/TabLine.d.ts

@@ -1,6 +1,11 @@
 import type { Intergalactic } from '@semcore/core';
 import React from 'react';
 import type { NSTabLine } from './TabLine.type';
+/**
+ * TabLine
+ *
+ * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}
+ */
 declare const TabLine: NSTabLine.Component;
 export declare const wrapTabLine: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabLine.WrapperComponent<PropsExtending>;
 export default TabLine;

package/lib/types/TabLine.type.d.ts

@@ -35,6 +35,12 @@ declare namespace NSTabLine {
     type Handlers = {
         value: null;
     };
+    type DefaultProps = {
+        defaultValue: 0;
+        size: 'm';
+        underlined: true;
+        behavior: 'auto';
+    };
     namespace Item {
         type Props = BoxProps & NeighborItemProps & {
             /** Makes a tab selected. This property is determined automatically depending on the value. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "17.1.0",
+  "version": "17.2.0-prerelease.5",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.1.0"
+    "@semcore/typography": "^17.2.0-prerelease.5"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.2"
+    "@semcore/base-components": "^17.2.0"
   },
   "repository": {
     "type": "git",
@@ -25,9 +25,9 @@
     "directory": "semcore/tab-line"
   },
   "devDependencies": {
-    "@semcore/testing-utils": "1.0.0",
-    "@semcore/base-components": "17.0.2",
-    "@semcore/core": "17.1.0"
+    "@semcore/core": "17.2.0-prerelease.5",
+    "@semcore/base-components": "17.2.0-prerelease.5",
+    "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"