npm - @salutejs/plasma-new-hope - Versions diffs - 0.171.0-dev.0 → 0.172.0-canary.1493.11403245502.0 - Mend

@salutejs/plasma-new-hope 0.171.0-dev.0 → 0.172.0-canary.1493.11403245502.0

Files changed (138) hide show

package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css ADDED Viewed

@@ -0,0 +1,13 @@
+.base_1blwjaf_b1vjpd4t__06d77ae1.base_1blwjaf_tabsPilled__06d77ae1{--plasma_private-outline-radius:var(--plasma-tab-item-pilled-border-radius);border-radius:var(--plasma-tab-item-pilled-border-radius);padding:var(--plasma-tab-item-padding-pilled);}
+.base_kcn71r_b1lnzg5o__73784135{font-family:var(--plasma-tab-item-font-family);font-size:var(--plasma-tab-item-font-size);font-style:var(--plasma-tab-item-font-style);font-weight:var(--plasma-tab-item-font-weight);-webkit-letter-spacing:var(--plasma-tab-item-letter-spacing);-moz-letter-spacing:var(--plasma-tab-item-letter-spacing);-ms-letter-spacing:var(--plasma-tab-item-letter-spacing);letter-spacing:var(--plasma-tab-item-letter-spacing);line-height:var(--plasma-tab-item-lineheight);--plasma_private-outline-radius:var(--plasma-tab-item-border-radius);border-radius:var(--plasma-tab-item-border-radius);width:var(--plasma-tab-item-width);height:var(--plasma-tab-item-height);}
+.HorizontalTabItem_styles_hfqv5b_bkuum0w__5835ec0b{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--plasma-tab-item-content-gap);padding:var(--plasma-tab-item-padding-clear,var(--plasma-tab-item-padding));-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;}.HorizontalTabItem_styles_hfqv5b_bkuum0w__5835ec0b:first-child{margin-left:0;}.HorizontalTabItem_styles_hfqv5b_bkuum0w__5835ec0b::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.HorizontalTabItem_styles_hfqv5b_bkuum0w__5835ec0b.HorizontalTabItem_styles_hfqv5b_focusVisible__5835ec0b:focus::before,.HorizontalTabItem_styles_hfqv5b_bkuum0w__5835ec0b[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}
+.HorizontalTabItem_styles_hfqv5b_s1l5e9z0__5835ec0b{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:0 var(--plasma-tab-item-content-padding-clear,var(--plasma-tab-item-content-padding));}
+.HorizontalTabItem_styles_hfqv5b_t1nh4m12__5835ec0b{color:var(--plasma-tab-item-value-color);}
+.HorizontalTabItem_styles_hfqv5b_r13nweg3__5835ec0b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:inherit;}.HorizontalTabItem_styles_hfqv5b_r13nweg3__5835ec0b:hover{color:inherit;}
+.HorizontalTabItem_styles_hfqv5b_l1iip2sx__5835ec0b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:inherit;}.HorizontalTabItem_styles_hfqv5b_l1iip2sx__5835ec0b:hover{color:inherit;}
+.base_4zingj_b1vyjqk2__b8b7d053{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_4zingj_b1vyjqk2__b8b7d053:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053:hover .base_4zingj_t1nh4m12__b8b7d053{color:var(--plasma-tab-item-value-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053:active{color:var(--plasma-tab-item-color-active);}.base_4zingj_b1vyjqk2__b8b7d053:active .base_4zingj_t1nh4m12__b8b7d053{color:var(--plasma-tab-item-value-color-active);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_tabItemAnimated__b8b7d053{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053 .base_4zingj_t1nh4m12__b8b7d053{color:var(--plasma-tab-item-selected-value-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053 .base_4zingj_t1nh4m12__b8b7d053:hover{color:var(--plasma-tab-item-selected-value-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053::after{content:'';position:absolute;bottom:0;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:0.063rem;}
+.base_1ogr2cm_bt431lh__e8119f61[disabled]{cursor:not-allowed;}.base_1ogr2cm_bt431lh__e8119f61[disabled]:hover{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);}.base_1ogr2cm_bt431lh__e8119f61[disabled].base_1ogr2cm_selectedTabsItem__e8119f61:hover{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}

package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { horizontalTabItemRoot } from '../../horizontal/HorizontalTabItem/HorizontalTabItem.js';
+import { base as base$1 } from '../../horizontal/HorizontalTabItem/variations/_size/base.js';
+import { base } from '../../horizontal/HorizontalTabItem/HorizontalTabItem.styles.js';
+import { base as base$2 } from '../../horizontal/HorizontalTabItem/variations/_view/base.js';
+import { base as base$3 } from '../../horizontal/HorizontalTabItem/variations/_disabled/base.js';
+var headerTabItemRoot = horizontalTabItemRoot;
+var headerTabItemConfig = {
+  name: 'HeaderTabItem',
+  tag: 'button',
+  layout: headerTabItemRoot,
+  base: base,
+  variations: {
+    size: {
+      css: base$1
+    },
+    view: {
+      css: base$2
+    },
+    disabled: {
+      css: base$3,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  }
+};
+export { headerTabItemConfig, headerTabItemRoot };
+//# sourceMappingURL=HeaderTabItem.js.map

package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderTabItem.js","sources":["../../../../../../src/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.tsx"],"sourcesContent":["import { horizontalTabItemRoot } from '../../horizontal/HorizontalTabItem/HorizontalTabItem';\nimport { base as sizeCSS } from '../../horizontal/HorizontalTabItem/variations/_size/base';\nimport { base } from '../../horizontal/HorizontalTabItem/HorizontalTabItem.styles';\nimport { base as viewCSS } from '../../horizontal/HorizontalTabItem/variations/_view/base';\nimport { base as disabledCSS } from '../../horizontal/HorizontalTabItem/variations/_disabled/base';\n\nexport const headerTabItemRoot = horizontalTabItemRoot;\n\nexport const headerTabItemConfig = {\n name: 'HeaderTabItem',\n tag: 'button',\n layout: headerTabItemRoot,\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 },\n defaults: {\n view: 'divider',\n size: 'h5',\n },\n};\n"],"names":["headerTabItemRoot","horizontalTabItemRoot","headerTabItemConfig","name","tag","layout","base","variations","size","css","sizeCSS","view","viewCSS","disabled","disabledCSS","attrs","defaults"],"mappings":";;;;;;AAMO,IAAMA,iBAAiB,GAAGC,sBAAqB;AAE/C,IAAMC,mBAAmB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,eAAe;AACrBC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAEL,iBAAiB;AACzBM,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;AACX,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNL,IAAAA,IAAI,EAAE,SAAS;AACfH,IAAAA,IAAI,EAAE,IAAA;AACV,GAAA;AACJ;;;;"}

package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css ADDED Viewed

@@ -0,0 +1,16 @@
+.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
+.base_r0ggur_bc7z19b__6485a778.base_r0ggur_tabsPilled__6485a778{--plasma_private-outline-radius:var(--plasma-tabs-pilled-border-radius);border-radius:var(--plasma-tabs-pilled-border-radius);}
+.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df{width:100%;}.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df .base_1j9ii1x_s158pfyo__666b97df,.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df .base_1j9ii1x_s191iwmt__666b97df,.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df .base_1j9ii1x_s191iwmt__666b97df > button{width:100%;margin-left:0;}
+.base_1sq08yf_bxoicu2__bb7a4868{width:var(--plasma-tabs-width);height:var(--plasma-tabs-height);--plasma_private-outline-radius:var(--plasma-tabs-border-radius);border-radius:var(--plasma-tabs-border-radius);}
+.HorizontalTabs_styles_16kuvxt_b7gl603__73e81f22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
+.HorizontalTabs_styles_16kuvxt_s191iwmt__73e81f22{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;}.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22.HorizontalTabs_styles_16kuvxt_tabsClipScroll__73e81f22{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22.HorizontalTabs_styles_16kuvxt_tabsClipScroll__73e81f22::-webkit-scrollbar{display:none;}.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22.HorizontalTabs_styles_16kuvxt_tabsClipShowAll__73e81f22{overflow:visible;}
+.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1in38wj-0);padding-right:var(--s1in38wj-1);padding-left:var(--s1in38wj-2);}.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22.HorizontalTabs_styles_16kuvxt_focusVisible__73e81f22:focus::before,.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22[disabled]{cursor:not-allowed;}
+.base_9miwn_bupjtit__d014f2e9{background-color:var(--plasma-tabs-background-color);}.base_9miwn_bupjtit__d014f2e9::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_9miwn_bupjtit__d014f2e9.base_9miwn_tabsHasLeftArrow__d014f2e9::after{left:1.5rem;}.base_9miwn_bupjtit__d014f2e9.base_9miwn_tabsHasRightArrow__d014f2e9::after{right:1.5rem;}
+.base_j9bg3m_bbh58a1__de7491f9{opacity:var(--plasma-tabs-disabled-opacity);}

package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { horizontalTabsRoot } from '../../horizontal/HorizontalTabs/HorizontalTabs.js';
+import { base as base$1 } from '../../horizontal/HorizontalTabs/variations/_size/base.js';
+import { base } from '../../horizontal/HorizontalTabs/HorizontalTabs.styles.js';
+import { base as base$2 } from '../../horizontal/HorizontalTabs/variations/_view/base.js';
+import { base as base$3 } from '../../horizontal/HorizontalTabs/variations/_disabled/base.js';
+var headerTabsRoot = horizontalTabsRoot;
+var headerTabsConfig = {
+  name: 'HeaderTabs',
+  tag: 'div',
+  layout: horizontalTabsRoot,
+  base: base,
+  variations: {
+    size: {
+      css: base$1
+    },
+    view: {
+      css: base$2
+    },
+    disabled: {
+      css: base$3,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  }
+};
+export { headerTabsConfig, headerTabsRoot };
+//# sourceMappingURL=HeaderTabs.js.map

package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderTabs.js","sources":["../../../../../../src/components/Tabs/ui/header/HeaderTabs/HeaderTabs.tsx"],"sourcesContent":["import { horizontalTabsRoot } from '../../horizontal/HorizontalTabs/HorizontalTabs';\nimport { base as sizeCSS } from '../../horizontal/HorizontalTabs/variations/_size/base';\nimport { base } from '../../horizontal/HorizontalTabs/HorizontalTabs.styles';\nimport { base as viewCSS } from '../../horizontal/HorizontalTabs/variations/_view/base';\nimport { base as disabledCSS } from '../../horizontal/HorizontalTabs/variations/_disabled/base';\n\nexport const headerTabsRoot = horizontalTabsRoot;\n\nexport const headerTabsConfig = {\n name: 'HeaderTabs',\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 },\n defaults: {\n view: 'divider',\n size: 'h5',\n },\n};\n"],"names":["headerTabsRoot","horizontalTabsRoot","headerTabsConfig","name","tag","layout","base","variations","size","css","sizeCSS","view","viewCSS","disabled","disabledCSS","attrs","defaults"],"mappings":";;;;;;AAMO,IAAMA,cAAc,GAAGC,mBAAkB;AAEzC,IAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEJ,kBAAkB;AAC1BK,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;AACX,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNL,IAAAA,IAAI,EAAE,SAAS;AACfH,IAAAA,IAAI,EAAE,IAAA;AACV,GAAA;AACJ;;;;"}

package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js CHANGED Viewed

@@ -89,7 +89,6 @@ var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
-      pilled: pilled,
       role: role,
       view: view,
       size: size,

package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map CHANGED Viewed

	@@ -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 ...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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"}
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 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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"}

package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js CHANGED Viewed

@@ -186,7 +186,6 @@ var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       view: view,
       role: "tablist",
       size: size,
-      pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,

package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map CHANGED Viewed

	@@ -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 ...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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"}
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 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 Viewed

@@ -59,6 +59,8 @@ export { horizontalTabsConfig, horizontalTabsRoot } from './components/Tabs/ui/h
 export { horizontalTabItemConfig, horizontalTabItemRoot } from './components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js';
 export { verticalTabsConfig, verticalTabsRoot } from './components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js';
 export { verticalTabItemConfig, verticalTabItemRoot } from './components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js';
+export { headerTabsConfig, headerTabsRoot } from './components/Tabs/ui/header/HeaderTabs/HeaderTabs.js';
+export { headerTabItemConfig, headerTabItemRoot } from './components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js';
 export { tokens as tabsTokens } from './components/Tabs/tokens.js';
 export { TabItemRefs, TabsContext } from './components/Tabs/TabsContext.js';
 export { createTabsController } from './components/Tabs/createTabsController.js';

package/es/index.js.map CHANGED Viewed

	@@ -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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.171.0-dev.0",
+  "version": "0.172.0-canary.1493.11403245502.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -124,5 +124,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "f433b33718e2f377361b6edc5fde51e693a6be28"
+  "gitHead": "f3d831d6841483d200ef143c1b001fb4e6a08797"
 }

package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx CHANGED Viewed

@@ -63,6 +63,7 @@ export function App() {
 ### Расположение табов
 Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
+Также у горизонтальных табов есть свойство `header`.
 ```tsx live
 import React, { useState } from 'react';
@@ -71,10 +72,11 @@ import { IconClock } from '@salutejs/plasma-icons';
 export function App() {
     const items = Array(8).fill(0);
-    const [index, setIndex] = useState(0);
+    const [verticalIndex, setVerticalIndex] = useState(0);
+    const [horizontalIndex, setHorizontalIndex] = useState(0);
     return (
-        <div>
+        <div style=\{{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
             <Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
                 {items.map((_, i) => (
                     <TabItem
@@ -82,10 +84,26 @@ export function App() {
                         orientation="vertical"
                         key={`item:${i}`}
                         size="xs"
-                        selected={i === index}
+                        selected={i === verticalIndex}
                         tabIndex={0}
                         contentLeft={<IconClock size="xs" color="inherit" />}
-                        onClick={() => setIndex(i)}
+                        onClick={() => setVerticalIndex(i)}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                ))}
+            </Tabs>
+            <Tabs header view="divider" size="h5" style=\{{ width: '15rem' }}>
+                {items.map((_, i) => (
+                    <TabItem
+                        header
+                        view="divider"
+                        key={`item:${i}`}
+                        size="h5"
+                        selected={i === horizontalIndex}
+                        tabIndex={0}
+                        onClick={() => setHorizontalIndex(i)}
                     >
                         {`Label${i + 1}`}
                     </TabItem>

package/styled-components/cjs/components/Tabs/index.js CHANGED Viewed

@@ -21,6 +21,30 @@ Object.defineProperty(exports, "createTabsController", {
     return _createTabsController.createTabsController;
   }
 });
+Object.defineProperty(exports, "headerTabItemConfig", {
+  enumerable: true,
+  get: function get() {
+    return _HeaderTabItem.headerTabItemConfig;
+  }
+});
+Object.defineProperty(exports, "headerTabItemRoot", {
+  enumerable: true,
+  get: function get() {
+    return _HeaderTabItem.headerTabItemRoot;
+  }
+});
+Object.defineProperty(exports, "headerTabsConfig", {
+  enumerable: true,
+  get: function get() {
+    return _HeaderTabs.headerTabsConfig;
+  }
+});
+Object.defineProperty(exports, "headerTabsRoot", {
+  enumerable: true,
+  get: function get() {
+    return _HeaderTabs.headerTabsRoot;
+  }
+});
 Object.defineProperty(exports, "horizontalTabItemConfig", {
   enumerable: true,
   get: function get() {
@@ -79,6 +103,8 @@ var _HorizontalTabs = /*#__PURE__*/require("./ui/horizontal/HorizontalTabs/Horiz
 var _HorizontalTabItem = /*#__PURE__*/require("./ui/horizontal/HorizontalTabItem/HorizontalTabItem");
 var _VerticalTabs = /*#__PURE__*/require("./ui/vertical/VerticalTabs/VerticalTabs");
 var _VerticalTabItem = /*#__PURE__*/require("./ui/vertical/VerticalTabItem/VerticalTabItem");
+var _HeaderTabs = /*#__PURE__*/require("./ui/header/HeaderTabs/HeaderTabs");
+var _HeaderTabItem = /*#__PURE__*/require("./ui/header/HeaderTabItem/HeaderTabItem");
 var _tokens = /*#__PURE__*/require("./tokens");
 var _TabsContext = /*#__PURE__*/require("./TabsContext");
 var _createTabsController = /*#__PURE__*/require("./createTabsController");

package/styled-components/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js ADDED Viewed

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.headerTabItemRoot = exports.headerTabItemConfig = void 0;
+var _HorizontalTabItem = /*#__PURE__*/require("../../horizontal/HorizontalTabItem/HorizontalTabItem");
+var _base = /*#__PURE__*/require("../../horizontal/HorizontalTabItem/variations/_size/base");
+var _HorizontalTabItem2 = /*#__PURE__*/require("../../horizontal/HorizontalTabItem/HorizontalTabItem.styles");
+var _base2 = /*#__PURE__*/require("../../horizontal/HorizontalTabItem/variations/_view/base");
+var _base3 = /*#__PURE__*/require("../../horizontal/HorizontalTabItem/variations/_disabled/base");
+var headerTabItemRoot = exports.headerTabItemRoot = _HorizontalTabItem.horizontalTabItemRoot;
+var headerTabItemConfig = exports.headerTabItemConfig = {
+  name: 'HeaderTabItem',
+  tag: 'button',
+  layout: headerTabItemRoot,
+  base: _HorizontalTabItem2.base,
+  variations: {
+    size: {
+      css: _base.base
+    },
+    view: {
+      css: _base2.base
+    },
+    disabled: {
+      css: _base3.base,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  }
+};

package/styled-components/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js ADDED Viewed

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.headerTabsRoot = exports.headerTabsConfig = void 0;
+var _HorizontalTabs = /*#__PURE__*/require("../../horizontal/HorizontalTabs/HorizontalTabs");
+var _base = /*#__PURE__*/require("../../horizontal/HorizontalTabs/variations/_size/base");
+var _HorizontalTabs2 = /*#__PURE__*/require("../../horizontal/HorizontalTabs/HorizontalTabs.styles");
+var _base2 = /*#__PURE__*/require("../../horizontal/HorizontalTabs/variations/_view/base");
+var _base3 = /*#__PURE__*/require("../../horizontal/HorizontalTabs/variations/_disabled/base");
+var headerTabsRoot = exports.headerTabsRoot = _HorizontalTabs.horizontalTabsRoot;
+var headerTabsConfig = exports.headerTabsConfig = {
+  name: 'HeaderTabs',
+  tag: 'div',
+  layout: _HorizontalTabs.horizontalTabsRoot,
+  base: _HorizontalTabs2.base,
+  variations: {
+    size: {
+      css: _base.base
+    },
+    view: {
+      css: _base2.base
+    },
+    disabled: {
+      css: _base3.base,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  }
+};

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js CHANGED Viewed

@@ -99,7 +99,6 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
-      pilled: pilled,
       role: role,
       view: view,
       size: size,

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js CHANGED Viewed

@@ -200,7 +200,6 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       view: view,
       role: "tablist",
       size: size,
-      pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.js CHANGED Viewed

@@ -9,14 +9,20 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _HorizontalTabItem = /*#__PURE__*/require("./horizontal/HorizontalTabItem.config");
 var _VerticalTabItem = /*#__PURE__*/require("./vertical/VerticalTabItem.config");
+var _HeaderTabItem = /*#__PURE__*/require("./header/HeaderTabItem.config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var mergedHorizontalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabItemConfig, _HorizontalTabItem.config);
 var HorizontalTabItem = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabItemConfig);
 var mergedVerticalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabItemConfig, _VerticalTabItem.config);
 var VerticalTabItem = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabItemConfig);
+var mergedHeaderTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.headerTabItemConfig, _HeaderTabItem.config);
+var HeaderTabItem = /*#__PURE__*/(0, _engines.component)(mergedHeaderTabItemConfig);
 var TabItem = exports.TabItem = function TabItem(props) {
   if (props.orientation === 'vertical') {
     return /*#__PURE__*/_react["default"].createElement(VerticalTabItem, props);
   }
+  if (props.header) {
+    return /*#__PURE__*/_react["default"].createElement(HeaderTabItem, props);
+  }
   return /*#__PURE__*/_react["default"].createElement(HorizontalTabItem, props);
 };

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.js CHANGED Viewed

@@ -9,14 +9,20 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _HorizontalTabs = /*#__PURE__*/require("./horizontal/HorizontalTabs.config");
 var _VerticalTabs = /*#__PURE__*/require("./vertical/VerticalTabs.config");
+var _HeaderTabs = /*#__PURE__*/require("./header/HeaderTabs.config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var mergedHorizontalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabsConfig, _HorizontalTabs.config);
-var mergedVerticalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabsConfig, _VerticalTabs.config);
 var HorizontalTabs = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabsConfig);
+var mergedVerticalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabsConfig, _VerticalTabs.config);
 var VerticalTabs = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabsConfig);
+var mergedHeaderTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.headerTabsConfig, _HeaderTabs.config);
+var HeaderTabs = /*#__PURE__*/(0, _engines.component)(mergedHeaderTabsConfig);
 var Tabs = exports.Tabs = function Tabs(props) {
   if (props.orientation === 'vertical') {
     return /*#__PURE__*/_react["default"].createElement(VerticalTabs, props);
   }
+  if (props.header) {
+    return /*#__PURE__*/_react["default"].createElement(HeaderTabs, props);
+  }
   return /*#__PURE__*/_react["default"].createElement(HorizontalTabs, props);
 };