@semcore/tab-panel 17.1.0-prerelease.3 → 17.2.0-prerelease.3

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [17.2.0] - 2026-06-05
6
+
7
+ ### Added
8
+
9
+ - Links to the API and examples in the docs.
10
+
5
11
  ## [17.1.0] - 2026-05-13
6
12
 
7
13
  ### Added
@@ -13,15 +13,15 @@ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhan
13
13
  var _typography = require("@semcore/typography");
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
  /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
16
- const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_a53rj_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_a53rj_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_a53rj_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_a53rj_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_a53rj_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_a53rj_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_a53rj_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_{cursor:default;pointer-events:none}.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_ .___SAddon_a53rj_gg_,.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_ .___SText_a53rj_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{color:var(--intergalactic-text-link, rgb(35, 95, 226));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_::after{border-bottom:none}.___SText_a53rj_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_a53rj_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"a53rj_gg_"),
16
+ const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_t8jqv_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_t8jqv_gg_:after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid #0000;border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanel_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabPanelItem_t8jqv_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary,#00030095);border:1px solid #0000;border-bottom:none;border-radius:var(--intergalactic-control-rounded,6px) var(--intergalactic-control-rounded,6px) 0 0;background:#0000;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___STabPanelItem_t8jqv_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_t8jqv_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_t8jqv_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary,#010500e5)}}.___STabPanelItem_t8jqv_gg_:after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabPanelItem_t8jqv_gg_.__disabled_t8jqv_gg_{cursor:default;pointer-events:none}.___STabPanelItem_t8jqv_gg_.__disabled_t8jqv_gg_ :is(.___SAddon_t8jqv_gg_,.___SText_t8jqv_gg_){opacity:var(--intergalactic-disabled-opacity,.4)}.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{color:var(--intergalactic-text-link,#235fe2);border-color:var(--intergalactic-border-primary,#000c0829);flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{border-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{border-color:var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}@media (hover:hover){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_:hover{color:var(--intergalactic-text-link-hover-active,#2159d7)}}.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_:after{border-bottom:none}.___SText_t8jqv_gg_{margin:auto var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_t8jqv_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_:not(:only-child):last-child,.___SAddon_t8jqv_gg_:only-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px)}", /*__inner_css_end__*/"t8jqv_gg_"),
17
17
  /*__reshadow_css_end__*/
18
18
  {
19
- "__SText": "___SText_a53rj_gg_",
20
- "__SAddon": "___SAddon_a53rj_gg_",
21
- "__STabPanel": "___STabPanel_a53rj_gg_",
22
- "__STabPanelItem": "___STabPanelItem_a53rj_gg_",
23
- "_disabled": "__disabled_a53rj_gg_",
24
- "_selected": "__selected_a53rj_gg_"
19
+ "__SText": "___SText_t8jqv_gg_",
20
+ "__SAddon": "___SAddon_t8jqv_gg_",
21
+ "__STabPanel": "___STabPanel_t8jqv_gg_",
22
+ "__STabPanelItem": "___STabPanelItem_t8jqv_gg_",
23
+ "_disabled": "__disabled_t8jqv_gg_",
24
+ "_selected": "__selected_t8jqv_gg_"
25
25
  });
26
26
  class TabPanelRoot extends _core.Component {
27
27
  constructor(...args) {
@@ -80,7 +80,7 @@ class TabPanelRoot extends _core.Component {
80
80
  (0, _defineProperty2.default)(TabPanelRoot, "displayName", 'TabPanel');
81
81
  (0, _defineProperty2.default)(TabPanelRoot, "style", style);
82
82
  (0, _defineProperty2.default)(TabPanelRoot, "defaultProps", {
83
- defaultValue: null,
83
+ defaultValue: 0,
84
84
  behavior: 'manual'
85
85
  });
86
86
  (0, _defineProperty2.default)(TabPanelRoot, "enhance", [(0, _a11yEnhance.default)({
@@ -155,6 +155,12 @@ function Addon(props) {
155
155
  }, _ref4)
156
156
  }));
157
157
  }
158
+
159
+ /**
160
+ * TabPanel
161
+ *
162
+ * {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-code/|Examples}
163
+ */
158
164
  const TabPanel = (0, _core.createComponent)(TabPanelRoot, {
159
165
  Item: [TabPanelItem, {
160
166
  Text,
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { 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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n typeof TabPanelRoot.enhance,\n NSTabPanel.Handlers\n> {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n\n static enhance = [\n 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 }),\n ] as const;\n\n buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props: NSTabPanel.Item.Props, index: number) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n 'selected': isSelected,\n 'onClick': this.handleClick(props.value),\n 'onKeyDown': this.handleKeyDown(props.value),\n 'tabIndex': isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n};\n\nfunction TabPanelItem(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Component,\n typeof TabPanelRoot,\n 'Item'\n >,\n) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n const buttonRef = React.useRef<HTMLButtonElement>();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nfunction Text(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Text.Component,\n typeof TabPanelRoot,\n 'ItemText'\n >,\n) {\n const SText = Root;\n const { styles, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n}) as unknown as NSTabPanel.Component;\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { 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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n typeof TabPanelRoot.enhance,\n NSTabPanel.Handlers,\n {},\n {},\n NSTabPanel.DefaultProps\n> {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: 0,\n behavior: 'manual',\n } as const;\n\n static enhance = [\n 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 }),\n ] as const;\n\n buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props: NSTabPanel.Item.Props, index: number) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n 'selected': isSelected,\n 'onClick': this.handleClick(props.value),\n 'onKeyDown': this.handleKeyDown(props.value),\n 'tabIndex': isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n};\n\nfunction TabPanelItem(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Component,\n typeof TabPanelRoot,\n 'Item'\n >,\n) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n const buttonRef = React.useRef<HTMLButtonElement>();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nfunction Text(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Text.Component,\n typeof TabPanelRoot,\n 'ItemText'\n >,\n) {\n const SText = Root;\n const { styles, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\n/**\n * TabPanel\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-code/|Examples}\n */\nconst TabPanel = createComponent<\n NSTabPanel.Component,\n typeof TabPanelRoot\n>(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n type Value = string | number | boolean;\n type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<V>>;\n /** Value of the selected tab */\n value?: V;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: V;\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 /** 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?: NSTabPanel.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: NSTabPanel.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends NSTabPanel.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) & 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 TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n type Value = string | number | boolean;\n type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<V>>;\n /** Value of the selected tab */\n value?: V;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: V;\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 type DefaultProps = {\n defaultValue: 0;\n behavior: 'manual';\n };\n\n namespace Item {\n type Props = BoxProps & {\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?: NSTabPanel.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: NSTabPanel.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends NSTabPanel.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) & 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 TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends NSTabPanel.Value = NSTabPanel.Value> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}
@@ -11,15 +11,15 @@ import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
11
11
  import { Text as UikitText } from '@semcore/typography';
12
12
  import React from 'react';
13
13
  /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
14
- const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_a53rj_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_a53rj_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_a53rj_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_a53rj_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_a53rj_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_a53rj_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_a53rj_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_{cursor:default;pointer-events:none}.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_ .___SAddon_a53rj_gg_,.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_ .___SText_a53rj_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{color:var(--intergalactic-text-link, rgb(35, 95, 226));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_::after{border-bottom:none}.___SText_a53rj_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_a53rj_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"a53rj_gg_"),
14
+ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_t8jqv_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_t8jqv_gg_:after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid #0000;border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanel_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabPanelItem_t8jqv_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary,#00030095);border:1px solid #0000;border-bottom:none;border-radius:var(--intergalactic-control-rounded,6px) var(--intergalactic-control-rounded,6px) 0 0;background:#0000;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___STabPanelItem_t8jqv_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_t8jqv_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_t8jqv_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary,#010500e5)}}.___STabPanelItem_t8jqv_gg_:after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabPanelItem_t8jqv_gg_.__disabled_t8jqv_gg_{cursor:default;pointer-events:none}.___STabPanelItem_t8jqv_gg_.__disabled_t8jqv_gg_ :is(.___SAddon_t8jqv_gg_,.___SText_t8jqv_gg_){opacity:var(--intergalactic-disabled-opacity,.4)}.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{color:var(--intergalactic-text-link,#235fe2);border-color:var(--intergalactic-border-primary,#000c0829);flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{border-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{border-color:var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}@media (hover:hover){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_:hover{color:var(--intergalactic-text-link-hover-active,#2159d7)}}.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_:after{border-bottom:none}.___SText_t8jqv_gg_{margin:auto var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_t8jqv_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_:not(:only-child):last-child,.___SAddon_t8jqv_gg_:only-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px)}", /*__inner_css_end__*/"t8jqv_gg_"),
15
15
  /*__reshadow_css_end__*/
16
16
  {
17
- "__SText": "___SText_a53rj_gg_",
18
- "__SAddon": "___SAddon_a53rj_gg_",
19
- "__STabPanel": "___STabPanel_a53rj_gg_",
20
- "__STabPanelItem": "___STabPanelItem_a53rj_gg_",
21
- "_disabled": "__disabled_a53rj_gg_",
22
- "_selected": "__selected_a53rj_gg_"
17
+ "__SText": "___SText_t8jqv_gg_",
18
+ "__SAddon": "___SAddon_t8jqv_gg_",
19
+ "__STabPanel": "___STabPanel_t8jqv_gg_",
20
+ "__STabPanelItem": "___STabPanelItem_t8jqv_gg_",
21
+ "_disabled": "__disabled_t8jqv_gg_",
22
+ "_selected": "__selected_t8jqv_gg_"
23
23
  });
24
24
  class TabPanelRoot extends Component {
25
25
  constructor(...args) {
@@ -78,7 +78,7 @@ class TabPanelRoot extends Component {
78
78
  _defineProperty(TabPanelRoot, "displayName", 'TabPanel');
79
79
  _defineProperty(TabPanelRoot, "style", style);
80
80
  _defineProperty(TabPanelRoot, "defaultProps", {
81
- defaultValue: null,
81
+ defaultValue: 0,
82
82
  behavior: 'manual'
83
83
  });
84
84
  _defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
@@ -153,6 +153,12 @@ function Addon(props) {
153
153
  }, _ref4)
154
154
  }));
155
155
  }
156
+
157
+ /**
158
+ * TabPanel
159
+ *
160
+ * {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-code/|Examples}
161
+ */
156
162
  const TabPanel = createComponent(TabPanelRoot, {
157
163
  Item: [TabPanelItem, {
158
164
  Text,
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { 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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n typeof TabPanelRoot.enhance,\n NSTabPanel.Handlers\n> {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n\n static enhance = [\n 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 }),\n ] as const;\n\n buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props: NSTabPanel.Item.Props, index: number) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n 'selected': isSelected,\n 'onClick': this.handleClick(props.value),\n 'onKeyDown': this.handleKeyDown(props.value),\n 'tabIndex': isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n};\n\nfunction TabPanelItem(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Component,\n typeof TabPanelRoot,\n 'Item'\n >,\n) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n const buttonRef = React.useRef<HTMLButtonElement>();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nfunction Text(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Text.Component,\n typeof TabPanelRoot,\n 'ItemText'\n >,\n) {\n const SText = Root;\n const { styles, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n}) as unknown as NSTabPanel.Component;\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":";;;;;;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAE9C,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;AAAA;AAK1B,MAAMC,YAAY,SAASX,SAAS,CAIlC;EAAAY,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,yBAsB+E,EAAE;IAAAA,eAAA,sBAQlEC,KAAgC,IAAMC,KAA0C,IAAK;MAClG,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;IACnC,CAAC;IAAAF,eAAA,wBAEgBC,KAAgC,IAAMC,KAA6C,IAAK;MACvG,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC9CF,KAAK,CAACG,cAAc,CAAC,CAAC;QACtB,IAAI,CAACF,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;MACnC;IACF,CAAC;EAAA;EAfDI,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLL,KAAK,EAAE;IACT,CAAC;EACH;EAaAM,YAAYA,CAACC,KAA4B,EAAEC,KAAa,EAAE;IACxD,MAAM;MAAER;IAAM,CAAC,GAAG,IAAI,CAACS,OAAO;IAC9B,MAAMC,UAAU,GAAGV,KAAK,KAAKO,KAAK,CAACP,KAAK;IACxC,OAAO;MACL,UAAU,EAAEU,UAAU;MACtB,SAAS,EAAE,IAAI,CAACC,WAAW,CAACJ,KAAK,CAACP,KAAK,CAAC;MACxC,WAAW,EAAE,IAAI,CAACY,aAAa,CAACL,KAAK,CAACP,KAAK,CAAC;MAC5C,UAAU,EAAEU,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC/B,eAAe,EAAEA,UAAU;MAC3B,gBAAgB,EAAE,IAAI,CAACG,cAAc;MACrCL;IACF,CAAC;EACH;EAEAM,gBAAgBA,CAACC,CAA6B,EAAEP,KAAa,EAAE;IAC7D,OAAO;MACLK,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCL;IACF,CAAC;EACH;EAEAQ,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAR,OAAA;MAAAS,KAAA;IACP,MAAMC,SAAS,GAG2BpC,GAAG;IAF7C,MAAM;MAAEqC;IAAO,CAAC,GAAG,IAAI,CAACX,OAAO;IAE/B,OAAAS,KAAA,GAAOhC,OAAO,CAACkC,MAAM,CAAC,eAAC5B,KAAA,CAAA6B,aAAA,CAACF,SAAS,EAAAD,KAAA,CAAAI,EAAA;MAAA,GAAAC,YAAA;QAAA,QAAmB;MAAS,GAAAN,IAAA;IAAA,EAAE,CAAC;EAClE;AACF;AAAClB,eAAA,CAxEKH,YAAY,iBAKK,UAAU;AAAAG,eAAA,CAL3BH,YAAY,WAMDH,KAAK;AAAAM,eAAA,CANhBH,YAAY,kBAOM;EACpB4B,YAAY,EAAE,IAAI;EAClBC,QAAQ,EAAE;AACZ,CAAC;AAAA1B,eAAA,CAVGH,YAAY,aAYC,CACfP,WAAW,CAAC;EACVqC,gBAAgB,EAAEA,CAACC,eAAe,EAAEpB,KAAK,KAAK;IAC5C,IAAIoB,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAIrB,KAAK,CAACkB,QAAQ,KAAK,MAAM,EAAE;QAC7BE,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC,CAAC,CACH;AAgDF;AAED,SAASC,YAAYA,CACnBxB,KAIC,EACD;EAAA,IAAAyB,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAMC,aAAa,GAOMpD,GAAG;EAN5B,MAAM;IAAEqD,QAAQ;IAAEhB,MAAM;IAAEiB,SAAS;IAAEC,UAAU;IAAEzB,cAAc;IAAEL;EAAM,CAAC,GAAGD,KAAK;EAChF,MAAMgC,SAAS,GAAG/C,KAAK,CAACgD,MAAM,CAAoB,CAAC;EAEnD3B,cAAc,CAACL,KAAK,CAAC,GAAG+B,SAAS;EAEjC,OAAAL,KAAA,GAAOhD,OAAO,CAACkC,MAAM,CAAC,eACpB5B,KAAA,CAAA6B,aAAA,CAACc,aAAa,EAAAD,KAAA,CAAAZ,EAAA;IAAA,GAAAmB,aAAA;MAAA,QAAmB,QAAQ;MAAA,OAAK,QAAQ;MAAA,YAAW,CAAC;MAAA,QAAO,KAAK;MAAA,OAAMF;IAAS,GAAAP,KAAA;EAAA,IAC1FK,SAAS,gBAAG7C,KAAA,CAAA6B,aAAA,CAACqB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAU,CAAE,CAAC,GAAG,IAAI,EAC1DjD,iBAAiB,CAACgD,QAAQ,EAAEM,QAAQ,CAACC,IAAI,CAACrD,IAAI,EAAEoD,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC,EACpEN,UAAU,gBAAG9C,KAAA,CAAA6B,aAAA,CAACqB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEP;EAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;AAEpB;AAEA,SAAShD,IAAIA,CACXiB,KAIC,EACD;EAAA,IAAAuC,KAAA,GAAAb,YAAA;IAAAc,KAAA;EACA,MAAMC,KAAK,GAE2BzD,SAAS;EAD/C,MAAM;IAAE6B,MAAM;IAAE6B,QAAQ,GAAG,IAAI;IAAEpC,cAAc;IAAEL;EAAM,CAAC,GAAGD,KAAK;EAChE,OAAAwC,KAAA,GAAO7D,OAAO,CAACkC,MAAM,CAAC,eAAC5B,KAAA,CAAA6B,aAAA,CAAC2B,KAAK,EAAAD,KAAA,CAAAzB,EAAA;IAAA,GAAA4B,aAAA;MAAA,QAA0B,GAAG;MAAA,YAAYD,QAAQ;MAAA;MAAA,mBAA0BpC,cAAc,CAACL,KAAK;IAAC,GAAAsC,KAAA;EAAA,EAAG,CAAC;AACnI;AAEA,SAASF,KAAKA,CACZrC,KAAyF,EACzF;EAAA,IAAA4C,KAAA,GAAAlB,YAAA;IAAAmB,KAAA;EACA,MAAMC,MAAM,GAE2BtE,GAAG;EAD1C,MAAM;IAAEqC;EAAO,CAAC,GAAGb,KAAK;EACxB,OAAA6C,KAAA,GAAOlE,OAAO,CAACkC,MAAM,CAAC,eAAC5B,KAAA,CAAA6B,aAAA,CAACgC,MAAM,EAAAD,KAAA,CAAA9B,EAAA;IAAA,GAAAgC,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AAC3D;AAEA,MAAMT,QAAQ,GAAG1D,eAAe,CAACY,YAAY,EAAE;EAC7C+C,IAAI,EAAE,CAACZ,YAAY,EAAE;IAAEzC,IAAI;IAAEsD;EAAM,CAAC;AACtC,CAAC,CAAoC;AAErC,OAAO,MAAMW,YAAY,GAA+BC,OAKpC,IAAKA,OAAsD;AAE/E,eAAed,QAAQ","ignoreList":[]}
1
+ {"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { 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 UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n typeof TabPanelRoot.enhance,\n NSTabPanel.Handlers,\n {},\n {},\n NSTabPanel.DefaultProps\n> {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: 0,\n behavior: 'manual',\n } as const;\n\n static enhance = [\n 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 }),\n ] as const;\n\n buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props: NSTabPanel.Item.Props, index: number) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n 'selected': isSelected,\n 'onClick': this.handleClick(props.value),\n 'onKeyDown': this.handleKeyDown(props.value),\n 'tabIndex': isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n};\n\nfunction TabPanelItem(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Component,\n typeof TabPanelRoot,\n 'Item'\n >,\n) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n const buttonRef = React.useRef<HTMLButtonElement>();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nfunction Text(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Text.Component,\n typeof TabPanelRoot,\n 'ItemText'\n >,\n) {\n const SText = Root;\n const { styles, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\n/**\n * TabPanel\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-code/|Examples}\n */\nconst TabPanel = createComponent<\n NSTabPanel.Component,\n typeof TabPanelRoot\n>(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n type Value = string | number | boolean;\n type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<V>>;\n /** Value of the selected tab */\n value?: V;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: V;\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 /** 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?: NSTabPanel.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: NSTabPanel.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends NSTabPanel.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) & 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 TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n type Value = string | number | boolean;\n type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<V>>;\n /** Value of the selected tab */\n value?: V;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: V;\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 type DefaultProps = {\n defaultValue: 0;\n behavior: 'manual';\n };\n\n namespace Item {\n type Props = BoxProps & {\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?: NSTabPanel.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: NSTabPanel.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends NSTabPanel.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) & 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 TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends NSTabPanel.Value = NSTabPanel.Value> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
3
3
  import { Box } from "@semcore/base-components";
4
4
  import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
@@ -10,17 +10,17 @@ const style = (
10
10
  /*__reshadow_css_start__*/
11
11
  (sstyled.insert(
12
12
  /*__inner_css_start__*/
13
- '.___STabPanel_a53rj_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_a53rj_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_a53rj_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_a53rj_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_a53rj_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_a53rj_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_a53rj_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_{cursor:default;pointer-events:none}.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_ .___SAddon_a53rj_gg_,.___STabPanelItem_a53rj_gg_.__disabled_a53rj_gg_ .___SText_a53rj_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{color:var(--intergalactic-text-link, rgb(35, 95, 226));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___STabPanelItem_a53rj_gg_.__selected_a53rj_gg_::after{border-bottom:none}.___SText_a53rj_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_a53rj_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_a53rj_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
13
+ '.___STabPanel_t8jqv_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_t8jqv_gg_:after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid #0000;border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanel_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabPanelItem_t8jqv_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary,#00030095);border:1px solid #0000;border-bottom:none;border-radius:var(--intergalactic-control-rounded,6px) var(--intergalactic-control-rounded,6px) 0 0;background:#0000;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___STabPanelItem_t8jqv_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_t8jqv_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_t8jqv_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary,#010500e5)}}.___STabPanelItem_t8jqv_gg_:after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_:after{border-bottom:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___STabPanelItem_t8jqv_gg_.__disabled_t8jqv_gg_{cursor:default;pointer-events:none}.___STabPanelItem_t8jqv_gg_.__disabled_t8jqv_gg_ :is(.___SAddon_t8jqv_gg_,.___SText_t8jqv_gg_){opacity:var(--intergalactic-disabled-opacity,.4)}.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{color:var(--intergalactic-text-link,#235fe2);border-color:var(--intergalactic-border-primary,#000c0829);flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{border-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_{border-color:var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}@media (hover:hover){.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_:hover{color:var(--intergalactic-text-link-hover-active,#2159d7)}}.___STabPanelItem_t8jqv_gg_.__selected_t8jqv_gg_:after{border-bottom:none}.___SText_t8jqv_gg_{margin:auto var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_t8jqv_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_:not(:only-child):last-child,.___SAddon_t8jqv_gg_:only-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SAddon_t8jqv_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px)}',
14
14
  /*__inner_css_end__*/
15
- "a53rj_gg_"
15
+ "t8jqv_gg_"
16
16
  ), /*__reshadow_css_end__*/
17
17
  {
18
- "__SText": "___SText_a53rj_gg_",
19
- "__SAddon": "___SAddon_a53rj_gg_",
20
- "__STabPanel": "___STabPanel_a53rj_gg_",
21
- "__STabPanelItem": "___STabPanelItem_a53rj_gg_",
22
- "_disabled": "__disabled_a53rj_gg_",
23
- "_selected": "__selected_a53rj_gg_"
18
+ "__SText": "___SText_t8jqv_gg_",
19
+ "__SAddon": "___SAddon_t8jqv_gg_",
20
+ "__STabPanel": "___STabPanel_t8jqv_gg_",
21
+ "__STabPanelItem": "___STabPanelItem_t8jqv_gg_",
22
+ "_disabled": "__disabled_t8jqv_gg_",
23
+ "_selected": "__selected_t8jqv_gg_"
24
24
  })
25
25
  );
26
26
  class TabPanelRoot extends Component {
@@ -79,7 +79,7 @@ class TabPanelRoot extends Component {
79
79
  _defineProperty(TabPanelRoot, "displayName", "TabPanel");
80
80
  _defineProperty(TabPanelRoot, "style", style);
81
81
  _defineProperty(TabPanelRoot, "defaultProps", {
82
- defaultValue: null,
82
+ defaultValue: 0,
83
83
  behavior: "manual"
84
84
  });
85
85
  _defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
@@ -1,6 +1,11 @@
1
1
  import type { Intergalactic } from '@semcore/core';
2
2
  import React from 'react';
3
3
  import type { NSTabPanel } from './TabPanel.type';
4
+ /**
5
+ * TabPanel
6
+ *
7
+ * {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-panel/tab-panel-code/|Examples}
8
+ */
4
9
  declare const TabPanel: NSTabPanel.Component;
5
10
  export declare const wrapTabPanel: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabPanel.WrapperComponent<PropsExtending>;
6
11
  export default TabPanel;
@@ -26,6 +26,10 @@ declare namespace NSTabPanel {
26
26
  type Handlers = {
27
27
  value: null;
28
28
  };
29
+ type DefaultProps = {
30
+ defaultValue: 0;
31
+ behavior: 'manual';
32
+ };
29
33
  namespace Item {
30
34
  type Props = BoxProps & {
31
35
  /** Makes a tab selected. This property is determined automatically depending on the value. */
@@ -61,7 +65,7 @@ declare namespace NSTabPanel {
61
65
  /** @deprecated It will be removed in v18. */
62
66
  export type TabPanelValue = NSTabPanel.Value;
63
67
  /** @deprecated It will be removed in v18. */
64
- export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;
68
+ export type TabPanelProps<T extends NSTabPanel.Value = NSTabPanel.Value> = NSTabPanel.Props<T>;
65
69
  /** @deprecated It will be removed in v18. */
66
70
  export type TabPanelItemProps = NSTabPanel.Item.Props;
67
71
  /** @deprecated It will be removed in v18. */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/tab-panel",
3
3
  "description": "Semrush TabPanel Component",
4
- "version": "17.1.0-prerelease.3",
4
+ "version": "17.2.0-prerelease.3",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
14
14
  "require": "./lib/cjs/index.js"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/typography": "^17.1.0-prerelease.3"
17
+ "@semcore/typography": "^17.2.0-prerelease.3"
18
18
  },
19
19
  "peerDependencies": {
20
- "@semcore/base-components": "^17.0.2"
20
+ "@semcore/base-components": "^17.2.0"
21
21
  },
22
22
  "repository": {
23
23
  "type": "git",
@@ -25,8 +25,8 @@
25
25
  "directory": "semcore/tab-panel"
26
26
  },
27
27
  "devDependencies": {
28
- "@semcore/core": "17.1.0-prerelease.3",
29
- "@semcore/base-components": "17.0.2-prerelease.3",
28
+ "@semcore/core": "17.2.0-prerelease.3",
29
+ "@semcore/base-components": "17.2.0-prerelease.3",
30
30
  "@semcore/testing-utils": "1.0.0",
31
31
  "@semcore/icon": "17.1.0"
32
32
  },