@salutejs/plasma-new-hope 0.172.0-canary.1493.11404929441.0 → 0.172.0-canary.1495.11435163325.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (138) hide show
  1. package/cjs/components/Tabs/createTabsController.js.map +1 -1
  2. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -2
  3. package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
  4. package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
  5. package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
  6. package/cjs/index.js +0 -6
  7. package/cjs/index.js.map +1 -1
  8. package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +4 -22
  9. package/emotion/cjs/components/Tabs/index.js +0 -26
  10. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
  11. package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
  12. package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +0 -6
  13. package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +1 -7
  14. package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
  15. package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
  16. package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
  17. package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
  18. package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
  19. package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
  20. package/emotion/es/components/Tabs/Tabs.template-doc.mdx +4 -22
  21. package/emotion/es/components/Tabs/index.js +0 -2
  22. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
  23. package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
  24. package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.js +1 -7
  25. package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.js +2 -8
  26. package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
  27. package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
  28. package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
  29. package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
  30. package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
  31. package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
  32. package/es/components/Tabs/createTabsController.js.map +1 -1
  33. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -2
  34. package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
  35. package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
  36. package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
  37. package/es/index.js +0 -2
  38. package/es/index.js.map +1 -1
  39. package/package.json +4 -4
  40. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +4 -22
  41. package/styled-components/cjs/components/Tabs/index.js +0 -26
  42. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
  43. package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
  44. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +0 -6
  45. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +1 -7
  46. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
  47. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
  48. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
  49. package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
  50. package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
  51. package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
  52. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +4 -22
  53. package/styled-components/es/components/Tabs/index.js +0 -2
  54. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
  55. package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
  56. package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js +1 -7
  57. package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.js +2 -8
  58. package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
  59. package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
  60. package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
  61. package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
  62. package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
  63. package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
  64. package/types/components/Tabs/TabItem.types.d.ts +10 -52
  65. package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
  66. package/types/components/Tabs/Tabs.types.d.ts +2 -39
  67. package/types/components/Tabs/Tabs.types.d.ts.map +1 -1
  68. package/types/components/Tabs/createTabsController.d.ts +3 -3
  69. package/types/components/Tabs/createTabsController.d.ts.map +1 -1
  70. package/types/components/Tabs/index.d.ts +1 -3
  71. package/types/components/Tabs/index.d.ts.map +1 -1
  72. package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
  73. package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts +2 -2
  74. package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts.map +1 -1
  75. package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +1 -74
  76. package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
  77. package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +2 -22
  78. package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
  79. package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -4
  80. package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
  81. package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.d.ts +0 -4
  82. package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
  83. package/types/examples/plasma_web/components/Tabs/TabItem.d.ts +0 -18
  84. package/types/examples/plasma_web/components/Tabs/TabItem.d.ts.map +1 -1
  85. package/types/examples/plasma_web/components/Tabs/Tabs.d.ts +1 -1
  86. package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map +1 -1
  87. package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -4
  88. package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
  89. package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts +0 -4
  90. package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
  91. package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +0 -13
  92. package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -37
  93. package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +0 -1
  94. package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +0 -16
  95. package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -37
  96. package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +0 -1
  97. package/emotion/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -34
  98. package/emotion/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -34
  99. package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -29
  100. package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -30
  101. package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -29
  102. package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -30
  103. package/emotion/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -28
  104. package/emotion/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -28
  105. package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -23
  106. package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -24
  107. package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -23
  108. package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -24
  109. package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +0 -13
  110. package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -32
  111. package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +0 -1
  112. package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +0 -16
  113. package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -32
  114. package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +0 -1
  115. package/styled-components/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -34
  116. package/styled-components/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -34
  117. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -29
  118. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -30
  119. package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -29
  120. package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -30
  121. package/styled-components/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -28
  122. package/styled-components/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -28
  123. package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -23
  124. package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -24
  125. package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -23
  126. package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -24
  127. package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts +0 -25
  128. package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts.map +0 -1
  129. package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts +0 -25
  130. package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts.map +0 -1
  131. package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts +0 -22
  132. package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts.map +0 -1
  133. package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts +0 -23
  134. package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts.map +0 -1
  135. package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts +0 -22
  136. package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts.map +0 -1
  137. package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts +0 -23
  138. package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"HorizontalTabItem.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../../engines';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabsContext } from '../../../TabsContext';\nimport { HorizontalTabItemProps } from '../../../TabItem.types';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';\n\nexport const horizontalTabItemRoot = (Root: RootProps<HTMLDivElement, HorizontalTabItemProps>) =>\n forwardRef<HTMLDivElement, HorizontalTabItemProps>((props, outerRef) => {\n const {\n size,\n view,\n isActive,\n selected,\n disabled = false,\n pilled = false,\n children,\n value,\n contentLeft,\n contentRight,\n animated = true,\n onIndexChange,\n itemIndex,\n tabIndex,\n className,\n onClick,\n header: _header,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n const refs = useContext(TabsContext);\n\n const role = 'tab';\n\n const pilledAttr = view !== 'clear' && pilled;\n const animatedClass = animated ? classes.tabItemAnimated : undefined;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n useEffect(() => {\n if (!refs) {\n return;\n }\n\n refs.register(innerRef);\n\n return () => refs.unregister(innerRef);\n }, [refs]);\n\n const onItemFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (disabled) {\n return;\n }\n\n if (!hasKeyNavigation && innerRef?.current) {\n innerRef.current.scrollTo({\n top: 0,\n left: innerRef.current.offsetLeft,\n behavior: 'smooth',\n });\n\n return;\n }\n\n if (!refs) {\n return;\n }\n\n const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n if (focusIndex === refs.current) {\n return;\n }\n\n onIndexChange?.(focusIndex);\n refs.setCurrent(focusIndex);\n },\n [refs, innerRef, onIndexChange, disabled],\n );\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n if (!onClick) {\n return;\n }\n\n onClick(event);\n };\n\n return (\n <Root\n ref={ref}\n disabled={disabled}\n role={role}\n view={view}\n size={size}\n pilled={pilled}\n onFocus={onItemFocus}\n tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n className={cx(pilledClass, selectedClass, animatedClass, className)}\n onClick={handleClick}\n {...rest}\n >\n <>\n {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n <StyledContent className={classes.tabContent}>{children}</StyledContent>\n {!contentRight && value && <TabItemValue>{value}</TabItemValue>}\n {!value && contentRight && (\n <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>\n )}\n </>\n </Root>\n );\n });\n\nexport const horizontalTabItemConfig = {\n name: 'HorizontalTabItem',\n tag: 'button',\n layout: horizontalTabItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["horizontalTabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","value","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","block","inline","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","TabItemValue","RightContent","tabRightContent","horizontalTabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":";;;;;;;;;;;;;IAeaA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,IAAuD,EAAA;AAAA,EAAA,oBACzFC,UAAU,CAAyC,UAACC,KAAK,EAAEC,QAAQ,EAAK;AACpE,IAAA,IACIC,IAAI,GAkBJF,KAAK,CAlBLE,IAAI,CAAA;MACJC,IAAI,GAiBJH,KAAK,CAjBLG,IAAI,CAAA;MACJC,QAAQ,GAgBRJ,KAAK,CAhBLI,QAAQ,CAAA;MACRC,QAAQ,GAeRL,KAAK,CAfLK,QAAQ,CAAA;MAAAC,eAAA,GAeRN,KAAK,CAdLO,QAAQ,CAAA;AAARA,MAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA,CAAA;MAAAE,aAAA,GAchBR,KAAK,CAbLS,MAAM,CAAA;AAANA,MAAAA,MAAM,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA,CAAA;MACdE,QAAQ,GAYRV,KAAK,CAZLU,QAAQ,CAAA;MACRC,KAAK,GAWLX,KAAK,CAXLW,KAAK,CAAA;MACLC,WAAW,GAUXZ,KAAK,CAVLY,WAAW,CAAA;MACXC,YAAY,GASZb,KAAK,CATLa,YAAY,CAAA;MAAAC,eAAA,GASZd,KAAK,CARLe,QAAQ,CAAA;AAARA,MAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA,CAAA;MACfE,aAAa,GAObhB,KAAK,CAPLgB,aAAa,CAAA;MACbC,SAAS,GAMTjB,KAAK,CANLiB,SAAS,CAAA;MACTC,QAAQ,GAKRlB,KAAK,CALLkB,QAAQ,CAAA;MACRC,SAAS,GAITnB,KAAK,CAJLmB,SAAS,CAAA;MACTC,OAAO,GAGPpB,KAAK,CAHLoB,OAAO,CAAA;MAEJC,IAAI,GAAAC,wBAAA,CACPtB,KAAK,EAAAuB,SAAA,EAAA;AAET,IAAA,IAAMC,QAAQ,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAC7C,IAAA,IAAMC,GAAG,GAAGC,UAAU,CAAC1B,QAAQ,EAAEuB,QAAQ,CAAC,CAAA;AAC1C,IAAA,IAAMI,IAAI,GAAGC,UAAU,CAACC,WAAW,CAAC,CAAA;IAEpC,IAAMC,IAAI,GAAG,KAAK,CAAA;AAElB,IAAA,IAAMC,UAAU,GAAG7B,IAAI,KAAK,OAAO,IAAIM,MAAM,CAAA;IAC7C,IAAMwB,aAAa,GAAGlB,QAAQ,GAAGmB,OAAO,CAACC,eAAe,GAAGC,SAAS,CAAA;IACpE,IAAMC,WAAW,GAAGL,UAAU,GAAGE,OAAO,CAACI,UAAU,GAAGF,SAAS,CAAA;IAC/D,IAAMG,aAAa,GAAGnC,QAAQ,IAAIC,QAAQ,GAAG6B,OAAO,CAACM,gBAAgB,GAAGJ,SAAS,CAAA;IACjF,IAAMK,gBAAgB,GAAGxB,SAAS,KAAKmB,SAAS,IAAIpB,aAAa,KAAKoB,SAAS,CAAA;AAC/E,IAAA,IAAMM,kBAAkB,GAAG,CAACnC,QAAQ,IAAI,CAAAqB,IAAI,KAAJA,IAAAA,IAAAA,IAAI,uBAAJA,IAAI,CAAEe,OAAO,MAAK1B,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAE5E2B,IAAAA,SAAS,CAAC,YAAM;MACZ,IAAI,CAAChB,IAAI,EAAE;AACP,QAAA,OAAA;AACJ,OAAA;AAEAA,MAAAA,IAAI,CAACiB,QAAQ,CAACrB,QAAQ,CAAC,CAAA;MAEvB,OAAO,YAAA;AAAA,QAAA,OAAMI,IAAI,CAACkB,UAAU,CAACtB,QAAQ,CAAC,CAAA;AAAA,OAAA,CAAA;AAC1C,KAAC,EAAE,CAACI,IAAI,CAAC,CAAC,CAAA;AAEV,IAAA,IAAMmB,WAAW,GAAGC,WAAW,CAC3B,UAACC,KAAK,EAAK;AACP,MAAA,IAAI1C,QAAQ,EAAE;AACV,QAAA,OAAA;AACJ,OAAA;MAEA,IAAI,CAACkC,gBAAgB,IAAIjB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAEmB,OAAO,EAAE;AACxCnB,QAAAA,QAAQ,CAACmB,OAAO,CAACO,QAAQ,CAAC;AACtBC,UAAAA,GAAG,EAAE,CAAC;AACNC,UAAAA,IAAI,EAAE5B,QAAQ,CAACmB,OAAO,CAACU,UAAU;AACjCC,UAAAA,QAAQ,EAAE,QAAA;AACd,SAAC,CAAC,CAAA;AAEF,QAAA,OAAA;AACJ,OAAA;MAEA,IAAI,CAAC1B,IAAI,EAAE;AACP,QAAA,OAAA;AACJ,OAAA;MAEA,IAAM2B,UAAU,GAAG3B,IAAI,CAAC4B,KAAK,CAACC,SAAS,CAAC,UAACC,OAAO,EAAA;AAAA,QAAA,OAAKA,OAAO,CAACf,OAAO,KAAKM,KAAK,CAACU,MAAM,CAAA;OAAC,CAAA,CAAA;AAEtF,MAAA,IAAIJ,UAAU,KAAK3B,IAAI,CAACe,OAAO,EAAE;AAC7B,QAAA,OAAA;AACJ,OAAA;AAEA3B,MAAAA,aAAa,aAAbA,aAAa,KAAA,KAAA,CAAA,IAAbA,aAAa,CAAGuC,UAAU,CAAC,CAAA;AAC3B3B,MAAAA,IAAI,CAACgC,UAAU,CAACL,UAAU,CAAC,CAAA;KAC9B,EACD,CAAC3B,IAAI,EAAEJ,QAAQ,EAAER,aAAa,EAAET,QAAQ,CAC5C,CAAC,CAAA;AAED,IAAA,IAAMsD,WAAW,GAAG,SAAdA,WAAWA,CAAIZ,KAA0C,EAAK;AAChEA,MAAAA,KAAK,CAACa,aAAa,CAACC,cAAc,CAAC;AAAEC,QAAAA,KAAK,EAAE,SAAS;AAAEC,QAAAA,MAAM,EAAE,SAAA;AAAU,OAAC,CAAC,CAAA;MAE3E,IAAI,CAAC7C,OAAO,EAAE;AACV,QAAA,OAAA;AACJ,OAAA;MAEAA,OAAO,CAAC6B,KAAK,CAAC,CAAA;KACjB,CAAA;AAED,IAAA,oBACIiB,KAAA,CAAAC,aAAA,CAACrE,IAAI,EAAAsE,QAAA,CAAA;AACD1C,MAAAA,GAAG,EAAEA,GAAI;AACTnB,MAAAA,QAAQ,EAAEA,QAAS;AACnBwB,MAAAA,IAAI,EAAEA,IAAK;AACX5B,MAAAA,IAAI,EAAEA,IAAK;AACXD,MAAAA,IAAI,EAAEA,IAAK;AACXO,MAAAA,MAAM,EAAEA,MAAO;AACf4D,MAAAA,OAAO,EAAEtB,WAAY;AACrB7B,MAAAA,QAAQ,EAAEuB,gBAAgB,GAAGC,kBAAkB,GAAGxB,QAAS;MAC3DC,SAAS,EAAEmD,EAAE,CAACjC,WAAW,EAAEE,aAAa,EAAEN,aAAa,EAAEd,SAAS,CAAE;AACpEC,MAAAA,OAAO,EAAEyC,WAAAA;AAAY,KAAA,EACjBxC,IAAI,CAER6C,eAAAA,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAK,QAAA,EAAA,IAAA,EACK3D,WAAW,iBAAIsD,KAAA,CAAAC,aAAA,CAACK,WAAW,EAAA;MAACrD,SAAS,EAAEe,OAAO,CAACuC,cAAAA;AAAe,KAAA,EAAE7D,WAAyB,CAAC,eAC3FsD,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAA;MAACvD,SAAS,EAAEe,OAAO,CAACyC,UAAAA;KAAajE,EAAAA,QAAwB,CAAC,EACvE,CAACG,YAAY,IAAIF,KAAK,iBAAIuD,KAAA,CAAAC,aAAA,CAACS,YAAY,QAAEjE,KAAoB,CAAC,EAC9D,CAACA,KAAK,IAAIE,YAAY,iBACnBqD,KAAA,CAAAC,aAAA,CAACU,YAAY,EAAA;MAAC1D,SAAS,EAAEe,OAAO,CAAC4C,eAAAA;KAAkBjE,EAAAA,YAA2B,CAEpF,CACA,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAMkE,uBAAuB,GAAG;AACnCC,EAAAA,IAAI,EAAE,mBAAmB;AACzBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAErF,qBAAqB;AAC7BsF,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRlF,IAAAA,IAAI,EAAE;AACFmF,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDnF,IAAAA,IAAI,EAAE;AACFkF,MAAAA,GAAG,EAAEE,MAAAA;KACR;AACDhF,IAAAA,QAAQ,EAAE;AACN8E,MAAAA,GAAG,EAAEG,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDhF,IAAAA,MAAM,EAAE;AACJ4E,MAAAA,GAAG,EAAEK,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNxF,IAAAA,IAAI,EAAE,SAAA;AACV,GAAA;AACJ;;;;"}
1
+ {"version":3,"file":"HorizontalTabItem.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../../engines';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabsContext } from '../../../TabsContext';\nimport { HorizontalTabItemProps } from '../../../TabItem.types';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';\n\nexport const horizontalTabItemRoot = (Root: RootProps<HTMLDivElement, HorizontalTabItemProps>) =>\n forwardRef<HTMLDivElement, HorizontalTabItemProps>((props, outerRef) => {\n const {\n size,\n view,\n isActive,\n selected,\n disabled = false,\n pilled = false,\n children,\n value,\n contentLeft,\n contentRight,\n animated = true,\n onIndexChange,\n itemIndex,\n tabIndex,\n className,\n onClick,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n const refs = useContext(TabsContext);\n\n const role = 'tab';\n\n const pilledAttr = view !== 'clear' && pilled;\n const animatedClass = animated ? classes.tabItemAnimated : undefined;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n useEffect(() => {\n if (!refs) {\n return;\n }\n\n refs.register(innerRef);\n\n return () => refs.unregister(innerRef);\n }, [refs]);\n\n const onItemFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (disabled) {\n return;\n }\n\n if (!hasKeyNavigation && innerRef?.current) {\n innerRef.current.scrollTo({\n top: 0,\n left: innerRef.current.offsetLeft,\n behavior: 'smooth',\n });\n\n return;\n }\n\n if (!refs) {\n return;\n }\n\n const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n if (focusIndex === refs.current) {\n return;\n }\n\n onIndexChange?.(focusIndex);\n refs.setCurrent(focusIndex);\n },\n [refs, innerRef, onIndexChange, disabled],\n );\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n if (!onClick) {\n return;\n }\n\n onClick(event);\n };\n\n return (\n <Root\n ref={ref}\n disabled={disabled}\n pilled={pilled}\n role={role}\n view={view}\n size={size}\n onFocus={onItemFocus}\n tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n className={cx(pilledClass, selectedClass, animatedClass, className)}\n onClick={handleClick}\n {...rest}\n >\n <>\n {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n <StyledContent className={classes.tabContent}>{children}</StyledContent>\n {!contentRight && value && <TabItemValue>{value}</TabItemValue>}\n {!value && contentRight && (\n <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>\n )}\n </>\n </Root>\n );\n });\n\nexport const horizontalTabItemConfig = {\n name: 'HorizontalTabItem',\n tag: 'button',\n layout: horizontalTabItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["horizontalTabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","value","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","block","inline","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","TabItemValue","RightContent","tabRightContent","horizontalTabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
@@ -14,7 +14,7 @@ import { base as base$5 } from './variations/_pilled/base.js';
14
14
  import { base as base$4 } from './variations/_stretch/base.js';
15
15
  import { StyledArrow, StyledContentWrapper, StyledContent, base } from './HorizontalTabs.styles.js';
16
16
 
17
- var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "header"];
17
+ var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
18
18
  var Keys = /*#__PURE__*/function (Keys) {
19
19
  Keys[Keys["end"] = 35] = "end";
20
20
  Keys[Keys["home"] = 36] = "home";
@@ -186,8 +186,8 @@ var horizontalTabsRoot = function horizontalTabsRoot(Root) {
186
186
  view: view,
187
187
  role: "tablist",
188
188
  size: size,
189
- id: tabsId,
190
189
  pilled: pilled,
190
+ id: tabsId,
191
191
  ref: outerRef,
192
192
  disabled: disabled,
193
193
  className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
@@ -1 +1 @@
1
- {"version":3,"file":"HorizontalTabs.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';\nimport { classes, tokens } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { HorizontalTabsProps } from '../../../Tabs.types';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './HorizontalTabs.styles';\n\nenum Keys {\n end = 35,\n home = 36,\n left = 37,\n right = 39,\n}\n\n// TODO: https://github.com/salute-developers/plasma/issues/1474\nexport const horizontalTabsRoot = (Root: RootProps<HTMLDivElement, HorizontalTabsProps>) =>\n forwardRef<HTMLDivElement, HorizontalTabsProps>((props, outerRef) => {\n const {\n id,\n stretch = false,\n disabled = false,\n clip = 'scroll',\n size,\n view,\n children,\n pilled = false,\n index,\n className,\n header: _header,\n ...rest\n } = props;\n const [firstItemVisible, setFirstItemVisible] = useState(true);\n const [lastItemVisible, setLastItemVisible] = useState(true);\n\n const refs = useMemo(() => new TabItemRefs(index), []);\n\n const uniqId = safeUseId();\n const tabsId = id || uniqId;\n\n const isFilled = view === 'filled'; // outer padding is only for filled view\n const pilledAttr = view !== 'clear' && pilled;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;\n const hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;\n const hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;\n const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;\n const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;\n\n const scrollRef = useRef<HTMLElement | null>(null);\n const trackRef = useRef<HTMLElement | null>(null);\n const leftArrowRef = useRef<HTMLButtonElement | null>(null);\n\n const onPrev = useCallback(() => {\n if (disabled || !scrollRef.current) {\n return;\n }\n\n const scrollLeft = Math.round(scrollRef.current.scrollLeft);\n const firstOverflowingTab = refs.items\n .slice()\n .reverse()\n .find((item: MutableRefObject<HTMLElement | null>) => {\n if (!item.current || item.current.offsetLeft === undefined) {\n return;\n }\n const tabStartX = item.current.offsetLeft;\n\n return tabStartX < scrollLeft;\n });\n\n firstOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'start' });\n }, [disabled, scrollRef, refs]);\n\n const onNext = useCallback(() => {\n if (disabled || !scrollRef.current) {\n return;\n }\n\n const scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);\n const lastOverflowingTab = refs.items.find((item: MutableRefObject<HTMLElement | null>) => {\n if (!item.current || item.current.offsetLeft === undefined) {\n return;\n }\n const tabEndX = item.current.offsetLeft + item.current.offsetWidth;\n\n return tabEndX > scrollRight;\n });\n\n lastOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'end' });\n }, [disabled, scrollRef, refs]);\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий таб\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n ref={leftArrowRef}\n isLeftArrow\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev, disabled, isFilled],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий таб\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext, disabled, isFilled],\n );\n\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLElement>): void => {\n event.stopPropagation();\n const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;\n const scrollLeft = Math.round(event.currentTarget.scrollLeft);\n\n setFirstItemVisible(scrollLeft <= 0);\n setLastItemVisible(scrollLeft >= maxScrollLeft);\n },\n [setFirstItemVisible, setLastItemVisible],\n );\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (index === undefined) {\n return;\n }\n\n const minIndex = 0;\n const maxIndex = refs.items.length - 1;\n let nextIndex: number;\n\n switch (event.keyCode) {\n case Keys.end:\n nextIndex = maxIndex;\n break;\n case Keys.left:\n nextIndex = index > minIndex ? index - 1 : index;\n break;\n case Keys.right:\n nextIndex = index < maxIndex ? index + 1 : index;\n break;\n case Keys.home:\n nextIndex = minIndex;\n break;\n default:\n return;\n }\n\n if (nextIndex !== index) {\n event.preventDefault();\n refs.items[nextIndex].current?.focus();\n refs.items[nextIndex].current?.scrollIntoView({\n block: 'nearest',\n inline: 'center',\n behavior: 'smooth',\n });\n }\n },\n [index],\n );\n\n useEffect(() => {\n setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n }, []);\n\n // Этот хук компенсирует появление левой стрелки при прокрутке\n useEffect(() => {\n if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {\n return;\n }\n\n scrollRef.current.scrollTo({\n left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth),\n });\n }, [firstItemVisible, scrollRef, leftArrowRef]);\n\n return (\n <TabsContext.Provider value={refs}>\n <Root\n view={view}\n role=\"tablist\"\n size={size}\n id={tabsId}\n pilled={pilled}\n ref={outerRef}\n disabled={disabled}\n className={cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className)}\n onKeyDown={onKeyDown}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper\n className={cx(clipScrollClass, clipShowAllClass)}\n ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n onScroll={handleScroll}\n >\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n {children}\n </StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n </TabsContext.Provider>\n );\n });\n\nexport const horizontalTabsConfig = {\n name: 'HorizontalTabs',\n tag: 'div',\n layout: horizontalTabsRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["Keys","horizontalTabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","_props$clip","clip","size","view","children","_props$pilled","pilled","index","className","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","leftArrowRef","onPrev","useCallback","_firstOverflowingTab$","current","scrollLeft","Math","round","firstOverflowingTab","items","slice","reverse","find","item","offsetLeft","tabStartX","scrollIntoView","block","inline","onNext","_lastOverflowingTab$c","scrollRight","clientWidth","lastOverflowingTab","tabEndX","offsetWidth","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","isLeftArrow","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollLeft","currentTarget","scrollWidth","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","left","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","behavior","useEffect","_scrollRef$current","_scrollRef$current2","scrollTo","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","horizontalTabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"HorizontalTabs.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';\nimport { classes, tokens } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { HorizontalTabsProps } from '../../../Tabs.types';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './HorizontalTabs.styles';\n\nenum Keys {\n end = 35,\n home = 36,\n left = 37,\n right = 39,\n}\n\n// TODO: https://github.com/salute-developers/plasma/issues/1474\nexport const horizontalTabsRoot = (Root: RootProps<HTMLDivElement, HorizontalTabsProps>) =>\n forwardRef<HTMLDivElement, HorizontalTabsProps>((props, outerRef) => {\n const {\n id,\n stretch = false,\n disabled = false,\n clip = 'scroll',\n size,\n view,\n children,\n pilled = false,\n index,\n className,\n ...rest\n } = props;\n const [firstItemVisible, setFirstItemVisible] = useState(true);\n const [lastItemVisible, setLastItemVisible] = useState(true);\n\n const refs = useMemo(() => new TabItemRefs(index), []);\n\n const uniqId = safeUseId();\n const tabsId = id || uniqId;\n\n const isFilled = view === 'filled'; // outer padding is only for filled view\n const pilledAttr = view !== 'clear' && pilled;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;\n const hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;\n const hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;\n const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;\n const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;\n\n const scrollRef = useRef<HTMLElement | null>(null);\n const trackRef = useRef<HTMLElement | null>(null);\n const leftArrowRef = useRef<HTMLButtonElement | null>(null);\n\n const onPrev = useCallback(() => {\n if (disabled || !scrollRef.current) {\n return;\n }\n\n const scrollLeft = Math.round(scrollRef.current.scrollLeft);\n const firstOverflowingTab = refs.items\n .slice()\n .reverse()\n .find((item: MutableRefObject<HTMLElement | null>) => {\n if (!item.current || item.current.offsetLeft === undefined) {\n return;\n }\n const tabStartX = item.current.offsetLeft;\n\n return tabStartX < scrollLeft;\n });\n\n firstOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'start' });\n }, [disabled, scrollRef, refs]);\n\n const onNext = useCallback(() => {\n if (disabled || !scrollRef.current) {\n return;\n }\n\n const scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);\n const lastOverflowingTab = refs.items.find((item: MutableRefObject<HTMLElement | null>) => {\n if (!item.current || item.current.offsetLeft === undefined) {\n return;\n }\n const tabEndX = item.current.offsetLeft + item.current.offsetWidth;\n\n return tabEndX > scrollRight;\n });\n\n lastOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'end' });\n }, [disabled, scrollRef, refs]);\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий таб\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n ref={leftArrowRef}\n isLeftArrow\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev, disabled, isFilled],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий таб\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n isFilled={isFilled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext, disabled, isFilled],\n );\n\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLElement>): void => {\n event.stopPropagation();\n const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;\n const scrollLeft = Math.round(event.currentTarget.scrollLeft);\n\n setFirstItemVisible(scrollLeft <= 0);\n setLastItemVisible(scrollLeft >= maxScrollLeft);\n },\n [setFirstItemVisible, setLastItemVisible],\n );\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (index === undefined) {\n return;\n }\n\n const minIndex = 0;\n const maxIndex = refs.items.length - 1;\n let nextIndex: number;\n\n switch (event.keyCode) {\n case Keys.end:\n nextIndex = maxIndex;\n break;\n case Keys.left:\n nextIndex = index > minIndex ? index - 1 : index;\n break;\n case Keys.right:\n nextIndex = index < maxIndex ? index + 1 : index;\n break;\n case Keys.home:\n nextIndex = minIndex;\n break;\n default:\n return;\n }\n\n if (nextIndex !== index) {\n event.preventDefault();\n refs.items[nextIndex].current?.focus();\n refs.items[nextIndex].current?.scrollIntoView({\n block: 'nearest',\n inline: 'center',\n behavior: 'smooth',\n });\n }\n },\n [index],\n );\n\n useEffect(() => {\n setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n }, []);\n\n // Этот хук компенсирует появление левой стрелки при прокрутке\n useEffect(() => {\n if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {\n return;\n }\n\n scrollRef.current.scrollTo({\n left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth),\n });\n }, [firstItemVisible, scrollRef, leftArrowRef]);\n\n return (\n <TabsContext.Provider value={refs}>\n <Root\n view={view}\n role=\"tablist\"\n size={size}\n pilled={pilled}\n id={tabsId}\n ref={outerRef}\n disabled={disabled}\n className={cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className)}\n onKeyDown={onKeyDown}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper\n className={cx(clipScrollClass, clipShowAllClass)}\n ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n onScroll={handleScroll}\n >\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n {children}\n </StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n </TabsContext.Provider>\n );\n });\n\nexport const horizontalTabsConfig = {\n name: 'HorizontalTabs',\n tag: 'div',\n layout: horizontalTabsRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["Keys","horizontalTabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","_props$clip","clip","size","view","children","_props$pilled","pilled","index","className","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","leftArrowRef","onPrev","useCallback","_firstOverflowingTab$","current","scrollLeft","Math","round","firstOverflowingTab","items","slice","reverse","find","item","offsetLeft","tabStartX","scrollIntoView","block","inline","onNext","_lastOverflowingTab$c","scrollRight","clientWidth","lastOverflowingTab","tabEndX","offsetWidth","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","isLeftArrow","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollLeft","currentTarget","scrollWidth","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","left","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","behavior","useEffect","_scrollRef$current","_scrollRef$current2","scrollTo","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","horizontalTabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}
package/es/index.js CHANGED
@@ -59,8 +59,6 @@ export { horizontalTabsConfig, horizontalTabsRoot } from './components/Tabs/ui/h
59
59
  export { horizontalTabItemConfig, horizontalTabItemRoot } from './components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js';
60
60
  export { verticalTabsConfig, verticalTabsRoot } from './components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js';
61
61
  export { verticalTabItemConfig, verticalTabItemRoot } from './components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js';
62
- export { headerTabsConfig, headerTabsRoot } from './components/Tabs/ui/header/HeaderTabs/HeaderTabs.js';
63
- export { headerTabItemConfig, headerTabItemRoot } from './components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js';
64
62
  export { tokens as tabsTokens } from './components/Tabs/tokens.js';
65
63
  export { TabItemRefs, TabsContext } from './components/Tabs/TabsContext.js';
66
64
  export { createTabsController } from './components/Tabs/createTabsController.js';
package/es/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.172.0-canary.1493.11404929441.0",
3
+ "version": "0.172.0-canary.1495.11435163325.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -80,7 +80,7 @@
80
80
  "@rollup/plugin-babel": "^6.0.4",
81
81
  "@rollup/plugin-commonjs": "^25.0.4",
82
82
  "@rollup/plugin-node-resolve": "^15.1.0",
83
- "@salutejs/plasma-sb-utils": "0.180.0",
83
+ "@salutejs/plasma-sb-utils": "0.181.0-canary.1495.11435163325.0",
84
84
  "@storybook/addon-docs": "^7.6.17",
85
85
  "@storybook/addon-essentials": "^7.6.17",
86
86
  "@storybook/addons": "^7.6.17",
@@ -114,7 +114,7 @@
114
114
  "@linaria/react": "5.0.3",
115
115
  "@popperjs/core": "2.11.8",
116
116
  "@salutejs/input-core": "2.1.2",
117
- "@salutejs/plasma-core": "1.182.0",
117
+ "@salutejs/plasma-core": "1.183.0-canary.1495.11435163325.0",
118
118
  "@salutejs/react-maskinput": "3.2.6",
119
119
  "classnames": "2.5.1",
120
120
  "dayjs": "1.11.11",
@@ -124,5 +124,5 @@
124
124
  "react-popper": "2.3.0",
125
125
  "storeon": "3.1.5"
126
126
  },
127
- "gitHead": "6680e67a684aedfc711b8a4cc3987d195b36da78"
127
+ "gitHead": "345e40a6f27afadd034fb0d16735423021c12328"
128
128
  }
@@ -63,7 +63,6 @@ export function App() {
63
63
 
64
64
  ### Расположение табов
65
65
  Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
66
- Также у горизонтальных табов есть свойство `header`.
67
66
 
68
67
  ```tsx live
69
68
  import React, { useState } from 'react';
@@ -72,11 +71,10 @@ import { IconClock } from '@salutejs/plasma-icons';
72
71
 
73
72
  export function App() {
74
73
  const items = Array(8).fill(0);
75
- const [verticalIndex, setVerticalIndex] = useState(0);
76
- const [horizontalIndex, setHorizontalIndex] = useState(0);
74
+ const [index, setIndex] = useState(0);
77
75
 
78
76
  return (
79
- <div style=\{{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
77
+ <div>
80
78
  <Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
81
79
  {items.map((_, i) => (
82
80
  <TabItem
@@ -84,26 +82,10 @@ export function App() {
84
82
  orientation="vertical"
85
83
  key={`item:${i}`}
86
84
  size="xs"
87
- selected={i === verticalIndex}
85
+ selected={i === index}
88
86
  tabIndex={0}
89
87
  contentLeft={<IconClock size="xs" color="inherit" />}
90
- onClick={() => setVerticalIndex(i)}
91
- >
92
- {`Label${i + 1}`}
93
- </TabItem>
94
- ))}
95
- </Tabs>
96
-
97
- <Tabs header view="divider" size="h5" style=\{{ width: '15rem' }}>
98
- {items.map((_, i) => (
99
- <TabItem
100
- header
101
- view="divider"
102
- key={`item:${i}`}
103
- size="h5"
104
- selected={i === horizontalIndex}
105
- tabIndex={0}
106
- onClick={() => setHorizontalIndex(i)}
88
+ onClick={() => setIndex(i)}
107
89
  >
108
90
  {`Label${i + 1}`}
109
91
  </TabItem>
@@ -21,30 +21,6 @@ Object.defineProperty(exports, "createTabsController", {
21
21
  return _createTabsController.createTabsController;
22
22
  }
23
23
  });
24
- Object.defineProperty(exports, "headerTabItemConfig", {
25
- enumerable: true,
26
- get: function get() {
27
- return _HeaderTabItem.headerTabItemConfig;
28
- }
29
- });
30
- Object.defineProperty(exports, "headerTabItemRoot", {
31
- enumerable: true,
32
- get: function get() {
33
- return _HeaderTabItem.headerTabItemRoot;
34
- }
35
- });
36
- Object.defineProperty(exports, "headerTabsConfig", {
37
- enumerable: true,
38
- get: function get() {
39
- return _HeaderTabs.headerTabsConfig;
40
- }
41
- });
42
- Object.defineProperty(exports, "headerTabsRoot", {
43
- enumerable: true,
44
- get: function get() {
45
- return _HeaderTabs.headerTabsRoot;
46
- }
47
- });
48
24
  Object.defineProperty(exports, "horizontalTabItemConfig", {
49
25
  enumerable: true,
50
26
  get: function get() {
@@ -103,8 +79,6 @@ var _HorizontalTabs = /*#__PURE__*/require("./ui/horizontal/HorizontalTabs/Horiz
103
79
  var _HorizontalTabItem = /*#__PURE__*/require("./ui/horizontal/HorizontalTabItem/HorizontalTabItem");
104
80
  var _VerticalTabs = /*#__PURE__*/require("./ui/vertical/VerticalTabs/VerticalTabs");
105
81
  var _VerticalTabItem = /*#__PURE__*/require("./ui/vertical/VerticalTabItem/VerticalTabItem");
106
- var _HeaderTabs = /*#__PURE__*/require("./ui/header/HeaderTabs/HeaderTabs");
107
- var _HeaderTabItem = /*#__PURE__*/require("./ui/header/HeaderTabItem/HeaderTabItem");
108
82
  var _tokens = /*#__PURE__*/require("./tokens");
109
83
  var _TabsContext = /*#__PURE__*/require("./TabsContext");
110
84
  var _createTabsController = /*#__PURE__*/require("./createTabsController");
@@ -15,7 +15,7 @@ var _base2 = /*#__PURE__*/require("./variations/_size/base");
15
15
  var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
16
16
  var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
17
17
  var _HorizontalTabItem = /*#__PURE__*/require("./HorizontalTabItem.styles");
18
- var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "header"];
18
+ var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
19
19
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
20
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
21
21
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -42,7 +42,6 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
42
42
  tabIndex = props.tabIndex,
43
43
  className = props.className,
44
44
  onClick = props.onClick,
45
- _header = props.header,
46
45
  rest = _objectWithoutProperties(props, _excluded);
47
46
  var innerRef = (0, _react.useRef)(null);
48
47
  var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
@@ -100,10 +99,10 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
100
99
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
101
100
  ref: ref,
102
101
  disabled: disabled,
102
+ pilled: pilled,
103
103
  role: role,
104
104
  view: view,
105
105
  size: size,
106
- pilled: pilled,
107
106
  onFocus: onItemFocus,
108
107
  tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
109
108
  className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, className),
@@ -17,7 +17,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
17
17
  var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
18
18
  var _base5 = /*#__PURE__*/require("./variations/_stretch/base");
19
19
  var _HorizontalTabs = /*#__PURE__*/require("./HorizontalTabs.styles");
20
- var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "header"];
20
+ var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
23
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -52,7 +52,6 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
52
52
  pilled = _props$pilled === void 0 ? false : _props$pilled,
53
53
  index = props.index,
54
54
  className = props.className,
55
- _header = props.header,
56
55
  rest = _objectWithoutProperties(props, _excluded);
57
56
  var _useState = (0, _react.useState)(true),
58
57
  _useState2 = _slicedToArray(_useState, 2),
@@ -201,8 +200,8 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
201
200
  view: view,
202
201
  role: "tablist",
203
202
  size: size,
204
- id: tabsId,
205
203
  pilled: pilled,
204
+ id: tabsId,
206
205
  ref: outerRef,
207
206
  disabled: disabled,
208
207
  className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
@@ -9,20 +9,14 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
9
9
  var _engines = /*#__PURE__*/require("../../../../engines");
10
10
  var _HorizontalTabItem = /*#__PURE__*/require("./horizontal/HorizontalTabItem.config");
11
11
  var _VerticalTabItem = /*#__PURE__*/require("./vertical/VerticalTabItem.config");
12
- var _HeaderTabItem = /*#__PURE__*/require("./header/HeaderTabItem.config");
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
14
13
  var mergedHorizontalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabItemConfig, _HorizontalTabItem.config);
15
14
  var HorizontalTabItem = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabItemConfig);
16
15
  var mergedVerticalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabItemConfig, _VerticalTabItem.config);
17
16
  var VerticalTabItem = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabItemConfig);
18
- var mergedHeaderTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.headerTabItemConfig, _HeaderTabItem.config);
19
- var HeaderTabItem = /*#__PURE__*/(0, _engines.component)(mergedHeaderTabItemConfig);
20
17
  var TabItem = exports.TabItem = function TabItem(props) {
21
18
  if (props.orientation === 'vertical') {
22
19
  return /*#__PURE__*/_react["default"].createElement(VerticalTabItem, props);
23
20
  }
24
- if (props.header) {
25
- return /*#__PURE__*/_react["default"].createElement(HeaderTabItem, props);
26
- }
27
21
  return /*#__PURE__*/_react["default"].createElement(HorizontalTabItem, props);
28
22
  };
@@ -9,20 +9,14 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
9
9
  var _engines = /*#__PURE__*/require("../../../../engines");
10
10
  var _HorizontalTabs = /*#__PURE__*/require("./horizontal/HorizontalTabs.config");
11
11
  var _VerticalTabs = /*#__PURE__*/require("./vertical/VerticalTabs.config");
12
- var _HeaderTabs = /*#__PURE__*/require("./header/HeaderTabs.config");
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
14
13
  var mergedHorizontalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabsConfig, _HorizontalTabs.config);
15
- var HorizontalTabs = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabsConfig);
16
14
  var mergedVerticalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabsConfig, _VerticalTabs.config);
15
+ var HorizontalTabs = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabsConfig);
17
16
  var VerticalTabs = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabsConfig);
18
- var mergedHeaderTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.headerTabsConfig, _HeaderTabs.config);
19
- var HeaderTabs = /*#__PURE__*/(0, _engines.component)(mergedHeaderTabsConfig);
20
17
  var Tabs = exports.Tabs = function Tabs(props) {
21
18
  if (props.orientation === 'vertical') {
22
19
  return /*#__PURE__*/_react["default"].createElement(VerticalTabs, props);
23
20
  }
24
- if (props.header) {
25
- return /*#__PURE__*/_react["default"].createElement(HeaderTabs, props);
26
- }
27
21
  return /*#__PURE__*/_react["default"].createElement(HorizontalTabs, props);
28
22
  };
@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
12
12
  import { TabItem } from './TabItem';
13
13
 
14
14
  const clips = ['none', 'scroll', 'showAll'];
15
- const headerClips = ['none', 'scroll'];
16
15
  const sizes = ['xs', 's', 'm', 'l'] as const;
17
16
  const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
18
17
 
@@ -53,7 +52,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
53
52
  type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
54
53
  type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
55
54
  type VerticalStoryTabsProps = StoryTabsProps & { height: string };
56
- type HeaderStoryTabsProps = StoryTabsProps & { width: string };
57
55
 
58
56
  const meta: Meta<StoryTabsProps> = {
59
57
  title: 'plasma_b2c/Tabs',
@@ -70,7 +68,6 @@ const meta: Meta<StoryTabsProps> = {
70
68
  'forwardedAs',
71
69
  'outsideScroll',
72
70
  'index',
73
- 'header',
74
71
  ]),
75
72
  contentRight: {
76
73
  options: contentRightOptions,
@@ -606,55 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
606
603
  },
607
604
  };
608
605
 
609
- const StoryHeaderDefault = (props: HeaderStoryTabsProps) => {
610
- const { disabled, itemQuantity, size, hasDivider, helperText } = props;
611
- const items = Array(itemQuantity).fill(0);
612
- const [index, setIndex] = useState(0);
613
-
614
- return (
615
- <Tabs header view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size as HeaderSize}>
616
- {items.map((_, i) => (
617
- <TabItem
618
- header
619
- key={`item:${i}`}
620
- view="divider"
621
- selected={i === index}
622
- onClick={() => !disabled && setIndex(i)}
623
- tabIndex={!disabled ? 0 : -1}
624
- disabled={disabled}
625
- value={helperText}
626
- size={size as HeaderSize}
627
- >
628
- {`Label${i + 1}`}
629
- </TabItem>
630
- ))}
631
- </Tabs>
632
- );
633
- };
634
-
635
- const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
636
- const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
606
+ const StoryHeaderTabs = (props: StoryTabsProps) => {
607
+ const {
608
+ disabled,
609
+ itemQuantity,
610
+ size,
611
+ contentLeft: contentLeftOption,
612
+ contentRight: contentRightOption,
613
+ hasDivider,
614
+ stretch,
615
+ } = props;
637
616
  const items = Array(itemQuantity).fill(0);
638
617
  const [index, setIndex] = useState(0);
639
618
 
640
619
  return (
641
- <Tabs
642
- header
643
- view={hasDivider ? 'divider' : 'clear'}
644
- disabled={disabled}
645
- size={size as HeaderSize}
646
- style={{ width }}
647
- >
620
+ <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
648
621
  {items.map((_, i) => (
649
622
  <TabItem
650
- header
651
623
  key={`item:${i}`}
652
624
  view="divider"
653
625
  selected={i === index}
654
626
  onClick={() => !disabled && setIndex(i)}
655
627
  tabIndex={!disabled ? 0 : -1}
656
628
  disabled={disabled}
657
- value={helperText}
629
+ contentLeft={getContentLeft(contentLeftOption, size as Size)}
630
+ contentRight={getContentRight(contentRightOption, size as Size)}
658
631
  size={size as HeaderSize}
659
632
  >
660
633
  {`Label${i + 1}`}
@@ -664,14 +637,12 @@ const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
664
637
  );
665
638
  };
666
639
 
667
- export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
640
+ export const HeaderTabs: StoryObj<StoryTabsProps> = {
668
641
  args: {
669
642
  size: 'h5',
670
643
  disabled: false,
671
644
  hasDivider: true,
672
- helperText: '',
673
- itemQuantity: 6,
674
- width: '12rem',
645
+ itemQuantity: 4,
675
646
  },
676
647
  argTypes: {
677
648
  size: {
@@ -680,36 +651,23 @@ export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
680
651
  type: 'select',
681
652
  },
682
653
  },
683
- clip: {
684
- options: headerClips,
654
+ contentLeft: {
655
+ options: contentLeftOptions,
685
656
  control: {
686
657
  type: 'select',
687
658
  },
688
- if: { arg: 'stretch', truthy: false },
689
659
  },
690
- width: {
660
+ contentRight: {
661
+ options: contentRightOptions,
691
662
  control: {
692
- type: 'text',
693
- },
694
- if: { arg: 'clip', eq: 'scroll' },
695
- },
696
- stretch: {
697
- table: {
698
- disable: true,
663
+ type: 'select',
699
664
  },
700
665
  },
701
- contentRight: {
666
+ clip: {
702
667
  table: {
703
668
  disable: true,
704
669
  },
705
670
  },
706
671
  },
707
- render: (args) => {
708
- switch (args.clip) {
709
- case 'scroll':
710
- return <StoryHeaderScroll {...args} />;
711
- default:
712
- return <StoryHeaderDefault {...args} />;
713
- }
714
- },
672
+ render: (args) => <StoryHeaderTabs {...args} />,
715
673
  };
@@ -23,10 +23,6 @@ var config = exports.config = {
23
23
  s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2.5rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
24
24
  m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":3rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.375rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
25
25
  l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3.5rem;", ":0 0.875rem;", ":0 0.75rem;", ":1.75rem;", ":0.5rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
26
- /**
27
- * @deprecated
28
- * вместо h1-h5 использовать HorizontalTabItem со свойством header
29
- */
30
26
  h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
31
27
  h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
32
28
  h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),