@semcore/tab-line 17.0.0-prerelease.29 → 17.0.0-prerelease.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/lib/cjs/TabLine.js +2 -6
  3. package/lib/cjs/TabLine.js.map +1 -1
  4. package/lib/cjs/index.d.js.map +1 -1
  5. package/lib/es6/TabLine.js +2 -6
  6. package/lib/es6/TabLine.js.map +1 -1
  7. package/lib/es6/index.d.js.map +1 -1
  8. package/lib/esm/TabLine.mjs +3 -7
  9. package/lib/types/index.d.ts +2 -1
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [17.0.0] - 2026-02-27
5
+ ## [17.0.0] - 2026-03-27
6
6
 
7
7
  ### BREAK
8
8
 
package/lib/cjs/TabLine.js CHANGED
@@ -236,18 +236,14 @@ function Text(props) {
236
236
  ellipsis = true,
237
237
  size,
238
238
  buttonRefsList,
239
- index,
240
- hintProps = {}
239
+ index
241
240
  } = props;
242
241
  const SText = _typography.Text;
243
242
  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SText, _ref7.cn("SText", {
244
243
  ...(0, _core.assignProps)({
245
244
  "ellipsis": ellipsis,
246
245
  "size": size,
247
- "use:hintProps": {
248
- triggerRef: buttonRefsList[index],
249
- ...hintProps
250
- }
246
+ "hint:triggerRef": buttonRefsList[index]
251
247
  }, _ref3)
252
248
  }));
253
249
  }
package/lib/cjs/TabLine.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabLine.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","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","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","ellipsis","hintProps","SText","UikitText","triggerRef","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\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};\n\nclass TabLineRoot extends Component {\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(optionsA11yEnhance)];\n state = { animation: null };\n prevValue = undefined;\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n buttonRefsList = [];\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 clearTimeout(this.animationStartTimeout);\n }\n\n animate() {\n const fromNode = this.itemRefs[this.prevValue];\n const toNode = this.itemRefs[this.asProps.value];\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 clearTimeout(this.animationStartTimeout);\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) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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) => {\n this.itemRefs[props.value] = node;\n },\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(props, index) {\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(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n const buttonRef = React.useRef();\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(props) {\n const { styles, ellipsis = true, size, buttonRefsList, index, hintProps = {} } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={UikitText} ellipsis={ellipsis} size={size} use:hintProps={{ triggerRef: buttonRefsList[index], ...hintProps }} />);\n}\n\nfunction Addon(props) {\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});\n\nexport const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TabLine.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","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","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","ellipsis","SText","UikitText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\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};\n\nclass TabLineRoot extends Component {\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(optionsA11yEnhance)];\n state = { animation: null };\n prevValue = undefined;\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n buttonRefsList = [];\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 clearTimeout(this.animationStartTimeout);\n }\n\n animate() {\n const fromNode = this.itemRefs[this.prevValue];\n const toNode = this.itemRefs[this.asProps.value];\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 clearTimeout(this.animationStartTimeout);\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) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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) => {\n this.itemRefs[props.value] = node;\n },\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(props, index) {\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(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n const buttonRef = React.useRef();\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(props) {\n const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={UikitText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(props) {\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});\n\nexport const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAH,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAO,KAAA,8BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAEA,CAACC,eAAe,EAAEC,KAAK,KAAK;IAC5C,IAAID,eAAe,EAAE;MACnBA,eAAe,CAACE,KAAK,CAAC,CAAC;MACvB,IAAID,KAAK,CAACE,QAAQ,KAAK,MAAM,EAAE;QAC7BH,eAAe,CAACI,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAED,MAAMC,WAAW,SAASC,eAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iBAW1B;MAAEC,SAAS,EAAE;IAAK,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,qBACfE,SAAS;IAAA,IAAAH,gBAAA,CAAAC,OAAA,oBACV,CAAC,CAAC;IAAA,IAAAD,gBAAA,CAAAC,OAAA,qCACEG,cAAK,CAACC,SAAS,CAAC,CAAC;IAAA,IAAAL,gBAAA,CAAAC,OAAA,iCACR,CAAC,CAAC;IAAA,IAAAD,gBAAA,CAAAC,OAAA,0BACT,EAAE;IAAA,IAAAD,gBAAA,CAAAC,OAAA,gCAgDI,MAAM;MAC3B,IAAI,IAAI,CAACK,KAAK,CAACJ,SAAS,EAAEK,OAAO,KAAK,KAAK,EAAE;QAC3C,IAAI,CAACC,QAAQ,CAAC;UAAEN,SAAS,EAAE;YAAE,GAAG,IAAI,CAACI,KAAK,CAACJ,SAAS;YAAEK,OAAO,EAAE;UAAK;QAAE,CAAC,CAAC;MAC1E;IACF,CAAC;IAAA,IAAAP,gBAAA,CAAAC,OAAA,8BAEoB,MAAM;MACzB,IAAI,CAACO,QAAQ,CAAC;QAAEN,SAAS,EAAE;MAAK,CAAC,CAAC;IACpC,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,4BAEmBQ,KAAK,IAAMC,CAAC,IAAK;MACnC,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;IAC/B,CAAC;EAAA;EA1DDE,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLH,KAAK,EAAE;IACT,CAAC;EACH;EAEAI,kBAAkBA,CAAA,EAAG;IACnB,IACE,IAAI,CAACC,SAAS,KAAK,IAAI,IACvB,IAAI,CAACC,OAAO,CAACN,KAAK,KAAK,IAAI,IAC3B,IAAI,CAACK,SAAS,KAAK,IAAI,CAACC,OAAO,CAACN,KAAK,EACrC;MACA,IAAI,CAACO,OAAO,CAAC,CAAC;IAChB;IACA,IAAI,CAACF,SAAS,GAAG,IAAI,CAACC,OAAO,CAACN,KAAK;EACrC;EAEAQ,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACH,SAAS,GAAG,IAAI,CAACC,OAAO,CAACN,KAAK;EACrC;EAEAS,oBAAoBA,CAAA,EAAG;IACrBC,YAAY,CAAC,IAAI,CAACC,qBAAqB,CAAC;EAC1C;EAEAJ,OAAOA,CAAA,EAAG;IACR,MAAMK,QAAQ,GAAG,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACR,SAAS,CAAC;IAC9C,MAAMS,MAAM,GAAG,IAAI,CAACD,QAAQ,CAAC,IAAI,CAACP,OAAO,CAACN,KAAK,CAAC;IAChD,MAAMe,aAAa,GAAG,IAAI,CAACC,YAAY,CAACC,OAAO;IAE/C,IAAI,CAACL,QAAQ,IAAI,CAACE,MAAM,IAAI,CAACC,aAAa,EAAE;IAC5C,MAAMG,aAAa,GAAGH,aAAa,CAACI,qBAAqB,CAAC,CAAC;IAC3D,MAAMC,QAAQ,GAAGR,QAAQ,CAACO,qBAAqB,CAAC,CAAC;IACjD,MAAME,MAAM,GAAGP,MAAM,CAACK,qBAAqB,CAAC,CAAC;IAC7C,MAAM1B,SAAS,GAAG;MAChB6B,QAAQ,EAAEF,QAAQ,CAACG,CAAC,GAAGL,aAAa,CAACK,CAAC;MACtCC,SAAS,EAAEJ,QAAQ,CAACK,KAAK;MACzBC,MAAM,EAAEL,MAAM,CAACE,CAAC,GAAGL,aAAa,CAACK,CAAC;MAClCI,OAAO,EAAEN,MAAM,CAACI,KAAK;MACrB3B,OAAO,EAAE;IACX,CAAC;IACD,IAAI,CAACC,QAAQ,CAAC;MAAEN;IAAU,CAAC,CAAC;IAC5BiB,YAAY,CAAC,IAAI,CAACC,qBAAqB,CAAC;IACxC,IAAI,CAACA,qBAAqB,GAAGiB,UAAU,CAAC,IAAI,CAACC,oBAAoB,EAAE,CAAC,CAAC;EACvE;EAgBAC,YAAYA,CAAChD,KAAK,EAAEiD,KAAK,EAAE;IACzB,MAAM;MAAE/B,KAAK;MAAEgC;IAAK,CAAC,GAAG,IAAI,CAAC1B,OAAO;IACpC,MAAM2B,UAAU,GAAGjC,KAAK,KAAKlB,KAAK,CAACkB,KAAK;IACxC,OAAO;MACLgC,IAAI;MACJ,UAAU,EAAEC,UAAU;MACtB,SAAS,EAAE,IAAI,CAACC,gBAAgB,CAACpD,KAAK,CAACkB,KAAK,CAAC;MAC7C,UAAU,EAAEiC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC/B,eAAe,EAAEA,UAAU;MAC3B,KAAK,EAAGE,IAAI,IAAK;QACf,IAAI,CAACtB,QAAQ,CAAC/B,KAAK,CAACkB,KAAK,CAAC,GAAGmC,IAAI;MACnC,CAAC;MACD,gBAAgB,EAAE,IAAI,CAACC,cAAc;MACrCL;IACF,CAAC;EACH;EAEAM,gBAAgBA,CAACvD,KAAK,EAAEiD,KAAK,EAAE;IAC7B,MAAM;MAAEC,IAAI,EAAEM;IAAY,CAAC,GAAG,IAAI,CAAChC,OAAO;IAC1C,MAAM0B,IAAI,GAAGlD,KAAK,CAACkD,IAAI,GACnBlD,KAAK,CAACkD,IAAI,GACVM,WAAW,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG;IAEnC,OAAO;MACLN,IAAI;MACJI,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCL;IACF,CAAC;EACH;EAEAQ,aAAaA,CAAA,EAAG;IACd,MAAM;MAAE9C;IAAU,CAAC,GAAG,IAAI,CAACI,KAAK;IAChC,IAAI,CAACJ,SAAS,EAAE,OAAO,CAAC,CAAC;IACzB,IAAIA,SAAS,CAACK,OAAO,EAAE;MACrB,OAAO;QACLtB,KAAK,EAAE;UACLgE,IAAI,EAAE/C,SAAS,CAACiC,MAAM;UACtBD,KAAK,EAAEhC,SAAS,CAACkC;QACnB,CAAC;QACDc,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACLlE,KAAK,EAAE;UACLgE,IAAI,EAAE/C,SAAS,CAAC6B,QAAQ;UACxBG,KAAK,EAAEhC,SAAS,CAAC+B;QACnB,CAAC;QACDiB,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC;IACH;EACF;EAEAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAtC,OAAA;MAAAuC,KAAA;IACP,MAAMC,QAAQ,GAMMC,mBAAG;IALvB,MAAMC,MAAM,GAAGD,mBAAG;IAClB,MAAM;MAAEE,MAAM;MAAEC,QAAQ;MAAEC;IAAe,CAAC,GAAG,IAAI,CAAC7C,OAAO;IACzD,MAAM;MAAEb;IAAU,CAAC,GAAG,IAAI,CAACI,KAAK;IAEhC,OAAAgD,KAAA,GAAO,IAAApE,aAAO,EAACwE,MAAM,CAAC,eACpB1E,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAACN,QAAQ,EAAAD,KAAA,CAAAQ,EAAA;MAAA,OAAArF,KAAA,CAAAsF,WAAA;QAAA,QAAmB,SAAS;QAAA,OAAM,IAAI,CAACtC;MAAY,GAAA4B,IAAA;IAAA,iBAC1DrE,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAAClF,eAAA,CAAAqF,gBAAgB,EAAAV,KAAA,CAAAQ,EAAA;MAAA,kBAAiBF;IAAc,iBAC9C5E,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAACF,QAAQ,EAAAL,KAAA,CAAAQ,EAAA,gBAAE,CACK,CAAC,EAClB5D,SAAS,iBAAIlB,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAACJ,MAAM,EAAAH,KAAA,CAAAQ,EAAA;MAAA,GAAK,IAAI,CAACd,aAAa,CAAC;IAAC,EAAG,CACzC,CAAC;EAEf;AACF;AAAC,IAAAhD,gBAAA,CAAAC,OAAA,EAjJKL,WAAW,iBACM,SAAS;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD1BL,WAAW,WAEAX,KAAK;AAAA,IAAAe,gBAAA,CAAAC,OAAA,EAFhBL,WAAW,kBAGO;EACpBqE,YAAY,EAAE,IAAI;EAClBxB,IAAI,EAAE,GAAG;EACTyB,UAAU,EAAE,IAAI;EAChBzE,QAAQ,EAAE;AACZ,CAAC;AAAA,IAAAO,gBAAA,CAAAC,OAAA,EARGL,WAAW,aAUE,CAAC,IAAAuE,oBAAW,EAAC/E,kBAAkB,CAAC,CAAC;AAyIpD,SAASgF,WAAWA,CAAC7E,KAAK,EAAE;EAAA,IAAA8E,KAAA,GAAAC,YAAA;EAC1B,MAAMC,YAAY,GAWAf,mBAAG;EAVrB,MAAM;IAAEG,QAAQ;IAAED,MAAM;IAAEc,SAAS;IAAEC,UAAU;IAAEC,gBAAgB;IAAE7B,cAAc;IAAEL;EAAM,CAAC,GAAGjD,KAAK;EAClG,MAAMoF,SAAS,GAAGvE,cAAK,CAACwE,MAAM,CAAC,CAAC;EAEhC/B,cAAc,CAACL,KAAK,CAAC,GAAGmC,SAAS;EAEjC,oBACE3F,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAAClF,eAAA,CAAAqF,gBAAgB,CAACa,MAAM;IAACH,gBAAgB,EAAEA;EAAiB,GACxDA,gBAAgB;IAAA,IAAAI,KAAA;IAAA,OAAAA,KAAA,GAChB,IAAA5F,aAAO,EAACwE,MAAM,CAAC,eACb1E,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAACU,YAAY,EAAAO,KAAA,CAAAhB,EAAA;MAAA,OAAArF,KAAA,CAAAsF,WAAA;QAAA,OAEP,QAAQ;QAAA,YACF,CAAC;QAAA,oBACOW,gBAAgB;QAAA,QAC7B,QAAQ;QAAA,QACR,KAAK;QAAA,OACLC;MAAS,GAAAN,KAAA;IAAA,IAEbG,SAAS,gBAAGxF,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAACkB,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAEV;IAAU,CAAE,CAAC,GAAG,IAAI,EACzD,IAAAW,0BAAiB,EAACxB,QAAQ,EAAEoB,OAAO,CAACC,IAAI,CAACI,IAAI,EAAEL,OAAO,CAACC,IAAI,CAACC,KAAK,CAAC,EAClER,UAAU,gBAAGzF,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAACkB,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAET;IAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;EAAA,CAEI,CAAC;AAE9B;AAEA,SAASW,IAAIA,CAAC7F,KAAK,EAAE;EAAA,IAAA8F,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACnB,MAAM;IAAE5B,MAAM;IAAE6B,QAAQ,GAAG,IAAI;IAAE9C,IAAI;IAAEI,cAAc;IAAEL;EAAM,CAAC,GAAGjD,KAAK;EACtE,MAAMiG,KAAK,GAC2BC,gBAAS;EAA/C,OAAAH,KAAA,GAAO,IAAApG,aAAO,EAACwE,MAAM,CAAC,eAAC1E,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAAC2B,KAAK,EAAAF,KAAA,CAAAxB,EAAA;IAAA,OAAArF,KAAA,CAAAsF,WAAA;MAAA,YAA8BwB,QAAQ;MAAA,QAAQ9C,IAAI;MAAA,mBAAmBI,cAAc,CAACL,KAAK;IAAC,GAAA6C,KAAA;EAAA,EAAG,CAAC;AAC7H;AAEA,SAASJ,KAAKA,CAAC1F,KAAK,EAAE;EAAA,IAAAmG,KAAA,GAAApB,YAAA;IAAAqB,KAAA;EACpB,MAAM;IAAEjC;EAAO,CAAC,GAAGnE,KAAK;EACxB,MAAMqG,MAAM,GAC2BpC,mBAAG;EAA1C,OAAAmC,KAAA,GAAO,IAAAzG,aAAO,EAACwE,MAAM,CAAC,eAAC1E,MAAA,CAAAiB,OAAA,CAAA4D,aAAA,CAAC+B,MAAM,EAAAD,KAAA,CAAA7B,EAAA;IAAA,OAAArF,KAAA,CAAAsF,WAAA;MAAA,OAAkB;IAAM,GAAA2B,KAAA;EAAA,EAAE,CAAC;AAC3D;AAEA,MAAMX,OAAO,GAAG,IAAAc,qBAAe,EAACjG,WAAW,EAAE;EAC3CoF,IAAI,EAAE,CAACZ,WAAW,EAAE;IAAEgB,IAAI;IAAEH;EAAM,CAAC;AACrC,CAAC,CAAC;AAEK,MAAMa,WAAW,GAAIC,OAAO,IAAKA,OAAO;AAACC,OAAA,CAAAF,WAAA,GAAAA,WAAA;AAAA,IAAAG,QAAA,GAAAD,OAAA,CAAA/F,OAAA,GAEjC8E,OAAO","ignoreList":[]}
package/lib/cjs/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type TabLineValue = string | number | boolean;\n\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = 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\nexport type TabLineItemProps = 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?: TabLineValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type TabLineContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type TabLineHandlers = {\n value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n Value extends TabLineValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabLineProps<Value>,\n TabLineContext,\n [handlers: TabLineHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TabLineValue = string | number | boolean;\n\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = 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\nexport type TabLineItemProps = 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?: TabLineValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type TabLineContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type TabLineHandlers = {\n value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n Value extends TabLineValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabLineProps<Value>,\n TabLineContext,\n [handlers: TabLineHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n Text: typeof Text;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}
package/lib/es6/TabLine.js CHANGED
@@ -234,18 +234,14 @@ function Text(props) {
234
234
  ellipsis = true,
235
235
  size,
236
236
  buttonRefsList,
237
- index,
238
- hintProps = {}
237
+ index
239
238
  } = props;
240
239
  const SText = UikitText;
241
240
  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", {
242
241
  ..._assignProps3({
243
242
  "ellipsis": ellipsis,
244
243
  "size": size,
245
- "use:hintProps": {
246
- triggerRef: buttonRefsList[index],
247
- ...hintProps
248
- }
244
+ "hint:triggerRef": buttonRefsList[index]
249
245
  }, _ref3)
250
246
  }));
251
247
  }
package/lib/es6/TabLine.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","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","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","ellipsis","hintProps","SText","_assignProps3","triggerRef","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\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};\n\nclass TabLineRoot extends Component {\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(optionsA11yEnhance)];\n state = { animation: null };\n prevValue = undefined;\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n buttonRefsList = [];\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 clearTimeout(this.animationStartTimeout);\n }\n\n animate() {\n const fromNode = this.itemRefs[this.prevValue];\n const toNode = this.itemRefs[this.asProps.value];\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 clearTimeout(this.animationStartTimeout);\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) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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) => {\n this.itemRefs[props.value] = node;\n },\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(props, index) {\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(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n const buttonRef = React.useRef();\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(props) {\n const { styles, ellipsis = true, size, buttonRefsList, index, hintProps = {} } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={UikitText} ellipsis={ellipsis} size={size} use:hintProps={{ triggerRef: buttonRefsList[index], ...hintProps }} />);\n}\n\nfunction Addon(props) {\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});\n\nexport const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","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","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.jsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\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};\n\nclass TabLineRoot extends Component {\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(optionsA11yEnhance)];\n state = { animation: null };\n prevValue = undefined;\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n buttonRefsList = [];\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 clearTimeout(this.animationStartTimeout);\n }\n\n animate() {\n const fromNode = this.itemRefs[this.prevValue];\n const toNode = this.itemRefs[this.asProps.value];\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 clearTimeout(this.animationStartTimeout);\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) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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) => {\n this.itemRefs[props.value] = node;\n },\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(props, index) {\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(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n const buttonRef = React.useRef();\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(props) {\n const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={UikitText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(props) {\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});\n\nexport const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":";;;;;;AAAA,SAASA,gBAAgB,EAAEC,GAAG,QAAQ,0BAA0B;AAChE,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,WAAW,MAAM,8CAA8C;AACtE,SAASC,IAAI,IAAIC,SAAS,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAEA,CAACC,eAAe,EAAEC,KAAK,KAAK;IAC5C,IAAID,eAAe,EAAE;MACnBA,eAAe,CAACE,KAAK,CAAC,CAAC;MACvB,IAAID,KAAK,CAACE,QAAQ,KAAK,MAAM,EAAE;QAC7BH,eAAe,CAACI,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAED,MAAMC,WAAW,SAASnB,SAAS,CAAC;EAAAoB,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gBAW1B;MAAEC,SAAS,EAAE;IAAK,CAAC;IAAAD,eAAA,oBACfE,SAAS;IAAAF,eAAA,mBACV,CAAC,CAAC;IAAAA,eAAA,oCACEf,KAAK,CAACkB,SAAS,CAAC,CAAC;IAAAH,eAAA,gCACR,CAAC,CAAC;IAAAA,eAAA,yBACT,EAAE;IAAAA,eAAA,+BAgDI,MAAM;MAC3B,IAAI,IAAI,CAACI,KAAK,CAACH,SAAS,EAAEI,OAAO,KAAK,KAAK,EAAE;QAC3C,IAAI,CAACC,QAAQ,CAAC;UAAEL,SAAS,EAAE;YAAE,GAAG,IAAI,CAACG,KAAK,CAACH,SAAS;YAAEI,OAAO,EAAE;UAAK;QAAE,CAAC,CAAC;MAC1E;IACF,CAAC;IAAAL,eAAA,6BAEoB,MAAM;MACzB,IAAI,CAACM,QAAQ,CAAC;QAAEL,SAAS,EAAE;MAAK,CAAC,CAAC;IACpC,CAAC;IAAAD,eAAA,2BAEmBO,KAAK,IAAMC,CAAC,IAAK;MACnC,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;IAC/B,CAAC;EAAA;EA1DDE,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLH,KAAK,EAAE;IACT,CAAC;EACH;EAEAI,kBAAkBA,CAAA,EAAG;IACnB,IACE,IAAI,CAACC,SAAS,KAAK,IAAI,IACvB,IAAI,CAACC,OAAO,CAACN,KAAK,KAAK,IAAI,IAC3B,IAAI,CAACK,SAAS,KAAK,IAAI,CAACC,OAAO,CAACN,KAAK,EACrC;MACA,IAAI,CAACO,OAAO,CAAC,CAAC;IAChB;IACA,IAAI,CAACF,SAAS,GAAG,IAAI,CAACC,OAAO,CAACN,KAAK;EACrC;EAEAQ,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACH,SAAS,GAAG,IAAI,CAACC,OAAO,CAACN,KAAK;EACrC;EAEAS,oBAAoBA,CAAA,EAAG;IACrBC,YAAY,CAAC,IAAI,CAACC,qBAAqB,CAAC;EAC1C;EAEAJ,OAAOA,CAAA,EAAG;IACR,MAAMK,QAAQ,GAAG,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACR,SAAS,CAAC;IAC9C,MAAMS,MAAM,GAAG,IAAI,CAACD,QAAQ,CAAC,IAAI,CAACP,OAAO,CAACN,KAAK,CAAC;IAChD,MAAMe,aAAa,GAAG,IAAI,CAACC,YAAY,CAACC,OAAO;IAE/C,IAAI,CAACL,QAAQ,IAAI,CAACE,MAAM,IAAI,CAACC,aAAa,EAAE;IAC5C,MAAMG,aAAa,GAAGH,aAAa,CAACI,qBAAqB,CAAC,CAAC;IAC3D,MAAMC,QAAQ,GAAGR,QAAQ,CAACO,qBAAqB,CAAC,CAAC;IACjD,MAAME,MAAM,GAAGP,MAAM,CAACK,qBAAqB,CAAC,CAAC;IAC7C,MAAMzB,SAAS,GAAG;MAChB4B,QAAQ,EAAEF,QAAQ,CAACG,CAAC,GAAGL,aAAa,CAACK,CAAC;MACtCC,SAAS,EAAEJ,QAAQ,CAACK,KAAK;MACzBC,MAAM,EAAEL,MAAM,CAACE,CAAC,GAAGL,aAAa,CAACK,CAAC;MAClCI,OAAO,EAAEN,MAAM,CAACI,KAAK;MACrB3B,OAAO,EAAE;IACX,CAAC;IACD,IAAI,CAACC,QAAQ,CAAC;MAAEL;IAAU,CAAC,CAAC;IAC5BgB,YAAY,CAAC,IAAI,CAACC,qBAAqB,CAAC;IACxC,IAAI,CAACA,qBAAqB,GAAGiB,UAAU,CAAC,IAAI,CAACC,oBAAoB,EAAE,CAAC,CAAC;EACvE;EAgBAC,YAAYA,CAAC7C,KAAK,EAAE8C,KAAK,EAAE;IACzB,MAAM;MAAE/B,KAAK;MAAEgC;IAAK,CAAC,GAAG,IAAI,CAAC1B,OAAO;IACpC,MAAM2B,UAAU,GAAGjC,KAAK,KAAKf,KAAK,CAACe,KAAK;IACxC,OAAO;MACLgC,IAAI;MACJ,UAAU,EAAEC,UAAU;MACtB,SAAS,EAAE,IAAI,CAACC,gBAAgB,CAACjD,KAAK,CAACe,KAAK,CAAC;MAC7C,UAAU,EAAEiC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC/B,eAAe,EAAEA,UAAU;MAC3B,KAAK,EAAGE,IAAI,IAAK;QACf,IAAI,CAACtB,QAAQ,CAAC5B,KAAK,CAACe,KAAK,CAAC,GAAGmC,IAAI;MACnC,CAAC;MACD,gBAAgB,EAAE,IAAI,CAACC,cAAc;MACrCL;IACF,CAAC;EACH;EAEAM,gBAAgBA,CAACpD,KAAK,EAAE8C,KAAK,EAAE;IAC7B,MAAM;MAAEC,IAAI,EAAEM;IAAY,CAAC,GAAG,IAAI,CAAChC,OAAO;IAC1C,MAAM0B,IAAI,GAAG/C,KAAK,CAAC+C,IAAI,GACnB/C,KAAK,CAAC+C,IAAI,GACVM,WAAW,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG;IAEnC,OAAO;MACLN,IAAI;MACJI,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCL;IACF,CAAC;EACH;EAEAQ,aAAaA,CAAA,EAAG;IACd,MAAM;MAAE7C;IAAU,CAAC,GAAG,IAAI,CAACG,KAAK;IAChC,IAAI,CAACH,SAAS,EAAE,OAAO,CAAC,CAAC;IACzB,IAAIA,SAAS,CAACI,OAAO,EAAE;MACrB,OAAO;QACLnB,KAAK,EAAE;UACL6D,IAAI,EAAE9C,SAAS,CAACgC,MAAM;UACtBD,KAAK,EAAE/B,SAAS,CAACiC;QACnB,CAAC;QACDc,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACL/D,KAAK,EAAE;UACL6D,IAAI,EAAE9C,SAAS,CAAC4B,QAAQ;UACxBG,KAAK,EAAE/B,SAAS,CAAC8B;QACnB,CAAC;QACDiB,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC;IACH;EACF;EAEAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAtC,OAAA;MAAAuC,KAAA;IACP,MAAMC,QAAQ,GAMM7E,GAAG;IALvB,MAAM8E,MAAM,GAAG9E,GAAG;IAClB,MAAM;MAAE+E,MAAM;MAAEC,QAAQ;MAAEC;IAAe,CAAC,GAAG,IAAI,CAAC5C,OAAO;IACzD,MAAM;MAAEZ;IAAU,CAAC,GAAG,IAAI,CAACG,KAAK;IAEhC,OAAAgD,KAAA,GAAOzE,OAAO,CAAC4E,MAAM,CAAC,eACpBtE,KAAA,CAAAyE,aAAA,CAACL,QAAQ,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA;QAAA,QAAmB,SAAS;QAAA,OAAM,IAAI,CAACrC;MAAY,GAAA4B,IAAA;IAAA,iBAC1DlE,KAAA,CAAAyE,aAAA,CAACnF,gBAAgB,EAAA6E,KAAA,CAAAO,EAAA;MAAA,kBAAiBF;IAAc,iBAC9CxE,KAAA,CAAAyE,aAAA,CAACF,QAAQ,EAAAJ,KAAA,CAAAO,EAAA,gBAAE,CACK,CAAC,EAClB1D,SAAS,iBAAIhB,KAAA,CAAAyE,aAAA,CAACJ,MAAM,EAAAF,KAAA,CAAAO,EAAA;MAAA,GAAK,IAAI,CAACb,aAAa,CAAC;IAAC,EAAG,CACzC,CAAC;EAEf;AACF;AAAC9C,eAAA,CAjJKH,WAAW,iBACM,SAAS;AAAAG,eAAA,CAD1BH,WAAW,WAEAX,KAAK;AAAAc,eAAA,CAFhBH,WAAW,kBAGO;EACpBgE,YAAY,EAAE,IAAI;EAClBtB,IAAI,EAAE,GAAG;EACTuB,UAAU,EAAE,IAAI;EAChBpE,QAAQ,EAAE;AACZ,CAAC;AAAAM,eAAA,CARGH,WAAW,aAUE,CAACf,WAAW,CAACO,kBAAkB,CAAC,CAAC;AAyIpD,SAAS0E,WAAWA,CAACvE,KAAK,EAAE;EAAA,IAAAwE,KAAA,GAAAC,YAAA;EAC1B,MAAMC,YAAY,GAWA1F,GAAG;EAVrB,MAAM;IAAEgF,QAAQ;IAAED,MAAM;IAAEY,SAAS;IAAEC,UAAU;IAAEC,gBAAgB;IAAE1B,cAAc;IAAEL;EAAM,CAAC,GAAG9C,KAAK;EAClG,MAAM8E,SAAS,GAAGrF,KAAK,CAACsF,MAAM,CAAC,CAAC;EAEhC5B,cAAc,CAACL,KAAK,CAAC,GAAGgC,SAAS;EAEjC,oBACErF,KAAA,CAAAyE,aAAA,CAACnF,gBAAgB,CAACiG,MAAM;IAACH,gBAAgB,EAAEA;EAAiB,GACxDA,gBAAgB;IAAA,IAAAI,KAAA;IAAA,OAAAA,KAAA,GAChB9F,OAAO,CAAC4E,MAAM,CAAC,eACbtE,KAAA,CAAAyE,aAAA,CAACQ,YAAY,EAAAO,KAAA,CAAAd,EAAA;MAAA,GAAAe,aAAA;QAAA,OAEP,QAAQ;QAAA,YACF,CAAC;QAAA,oBACOL,gBAAgB;QAAA,QAC7B,QAAQ;QAAA,QACR,KAAK;QAAA,OACLC;MAAS,GAAAN,KAAA;IAAA,IAEbG,SAAS,gBAAGlF,KAAA,CAAAyE,aAAA,CAACiB,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAEX;IAAU,CAAE,CAAC,GAAG,IAAI,EACzDtF,iBAAiB,CAAC2E,QAAQ,EAAEmB,OAAO,CAACC,IAAI,CAAC7F,IAAI,EAAE4F,OAAO,CAACC,IAAI,CAACC,KAAK,CAAC,EAClET,UAAU,gBAAGnF,KAAA,CAAAyE,aAAA,CAACiB,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAEV;IAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;EAAA,CAEI,CAAC;AAE9B;AAEA,SAASrF,IAAIA,CAACS,KAAK,EAAE;EAAA,IAAAuF,KAAA,GAAAd,YAAA;IAAAe,KAAA;EACnB,MAAM;IAAEzB,MAAM;IAAE0B,QAAQ,GAAG,IAAI;IAAE1C,IAAI;IAAEI,cAAc;IAAEL;EAAM,CAAC,GAAG9C,KAAK;EACtE,MAAM0F,KAAK,GAC2BlG,SAAS;EAA/C,OAAAgG,KAAA,GAAOrG,OAAO,CAAC4E,MAAM,CAAC,eAACtE,KAAA,CAAAyE,aAAA,CAACwB,KAAK,EAAAF,KAAA,CAAArB,EAAA;IAAA,GAAAwB,aAAA;MAAA,YAA8BF,QAAQ;MAAA,QAAQ1C,IAAI;MAAA,mBAAmBI,cAAc,CAACL,KAAK;IAAC,GAAAyC,KAAA;EAAA,EAAG,CAAC;AAC7H;AAEA,SAASF,KAAKA,CAACrF,KAAK,EAAE;EAAA,IAAA4F,KAAA,GAAAnB,YAAA;IAAAoB,KAAA;EACpB,MAAM;IAAE9B;EAAO,CAAC,GAAG/D,KAAK;EACxB,MAAM8F,MAAM,GAC2B9G,GAAG;EAA1C,OAAA6G,KAAA,GAAO1G,OAAO,CAAC4E,MAAM,CAAC,eAACtE,KAAA,CAAAyE,aAAA,CAAC4B,MAAM,EAAAD,KAAA,CAAA1B,EAAA;IAAA,GAAA4B,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AAC3D;AAEA,MAAMT,OAAO,GAAGlG,eAAe,CAACoB,WAAW,EAAE;EAC3C+E,IAAI,EAAE,CAACb,WAAW,EAAE;IAAEhF,IAAI;IAAE8F;EAAM,CAAC;AACrC,CAAC,CAAC;AAEF,OAAO,MAAMW,WAAW,GAAIC,OAAO,IAAKA,OAAO;AAE/C,eAAed,OAAO","ignoreList":[]}
package/lib/es6/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type TabLineValue = string | number | boolean;\n\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = 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\nexport type TabLineItemProps = 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?: TabLineValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type TabLineContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type TabLineHandlers = {\n value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n Value extends TabLineValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabLineProps<Value>,\n TabLineContext,\n [handlers: TabLineHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TabLineValue = string | number | boolean;\n\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = 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\nexport type TabLineItemProps = 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?: TabLineValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type TabLineContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type TabLineHandlers = {\n value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n Value extends TabLineValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabLineProps<Value>,\n TabLineContext,\n [handlers: TabLineHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n Text: typeof Text;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}
package/lib/esm/TabLine.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
- import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
2
+ import { sstyled, createComponent, Component, assignProps } from "@semcore/core";
3
3
  import { Box, NeighborLocation } from "@semcore/base-components";
4
4
  import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
5
5
  import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
@@ -235,18 +235,14 @@ function Text(props) {
235
235
  ellipsis = true,
236
236
  size,
237
237
  buttonRefsList,
238
- index,
239
- hintProps = {}
238
+ index
240
239
  } = props;
241
240
  const SText = Text$1;
242
241
  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", {
243
242
  ...assignProps({
244
243
  "ellipsis": ellipsis,
245
244
  "size": size,
246
- "use:hintProps": {
247
- triggerRef: buttonRefsList[index],
248
- ...hintProps
249
- }
245
+ "hint:triggerRef": buttonRefsList[index]
250
246
  }, _ref3)
251
247
  }));
252
248
  }
package/lib/types/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
2
2
  import type { PropGetterFn, Intergalactic } from '@semcore/core';
3
+ import type { Text } from '@semcore/typography';
3
4
  import type React from 'react';
4
5
 
5
6
  export type TabLineValue = string | number | boolean;
@@ -73,7 +74,7 @@ Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;
73
74
 
74
75
  declare const TabLine: IntergalacticTabLineComponent & {
75
76
  Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {
76
- Text: typeof Box;
77
+ Text: typeof Text;
77
78
  Addon: typeof Box;
78
79
  };
79
80
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/tab-line",
3
3
  "description": "Semrush TabLine Component",
4
- "version": "17.0.0-prerelease.29",
4
+ "version": "17.0.0-prerelease.31",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,7 +14,7 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/typography": "^17.0.0-prerelease.29"
17
+ "@semcore/typography": "^17.0.0-prerelease.31"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "@semcore/base-components": "^17.0.0 || ^17.0.0-0"
@@ -25,8 +25,8 @@
25
25
  "directory": "semcore/tab-line"
26
26
  },
27
27
  "devDependencies": {
28
- "@semcore/core": "17.0.0-prerelease.29",
29
- "@semcore/base-components": "17.0.0-prerelease.29",
28
+ "@semcore/base-components": "17.0.0-prerelease.31",
29
+ "@semcore/core": "17.0.0-prerelease.31",
30
30
  "@semcore/testing-utils": "1.0.0"
31
31
  },
32
32
  "scripts": {