@salutejs/plasma-new-hope 0.147.1-dev.0 → 0.148.0-canary.1392.10919911798.0

package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\n\nimport { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { CalendarState } from '../../store/types';\nimport { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';\nimport type { DateObject } from '../../Calendar.types';\nimport { classes } from '../../Calendar.tokens';\nimport { sizeMap } from '../../store/reducer';\n\nimport type { CalendarHeaderProps } from './CalendarHeader.types';\nimport {\n    StyledArrow,\n    StyledArrows,\n    StyledCalendarHeader,\n    StyledDoubleHeaderWrapper,\n    StyledHeader,\n    StyledHeaderDate,\n    StyledHeaderDouble,\n    StyledNavigation,\n} from './CalendarHeader.styles';\n\n/**\n * Компонент шапки календаря.\n */\nexport const CalendarHeader: React.FC<CalendarHeaderProps> = ({\n    type = 'Days',\n    startYear = 0,\n    size,\n    firstDate,\n    secondDate,\n    isDouble,\n    onPrev,\n    onNext,\n    onUpdateCalendarState,\n}) => {\n    const handleCalendarState = useCallback(() => {\n        const newSize: [number, number] = isDouble ? sizeMap.Months.double : sizeMap.Months.single;\n\n        if (type === CalendarState.Days) {\n            onUpdateCalendarState?.(CalendarState.Months, newSize);\n        }\n\n        if (type === CalendarState.Months || type === CalendarState.Quarters) {\n            onUpdateCalendarState?.(CalendarState.Years, newSize);\n        }\n    }, [type, onUpdateCalendarState]);\n\n    const getHeaderContent = useCallback(\n        (date?: DateObject, secondPart?: boolean) => {\n            if (!date) {\n                return '';\n            }\n\n            if (type === CalendarState.Days) {\n                return (\n                    <>\n                        <StyledHeaderDate>{MONTH_NAMES[date.monthIndex]}</StyledHeaderDate>\n                        <StyledHeaderDate>\n                            {date.year}\n                            <IconDisclosureDownFill color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n                        </StyledHeaderDate>\n                    </>\n                );\n            }\n\n            if (type === CalendarState.Months || type === CalendarState.Quarters) {\n                return (\n                    <StyledHeaderDate>\n                        {date.year}\n                        <IconDisclosureDownFill color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n                    </StyledHeaderDate>\n                );\n            }\n\n            if (type === CalendarState.Years) {\n                const yearValue = secondPart ? startYear + 12 : startYear;\n\n                return (\n                    <StyledHeaderDate>\n                        {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1}\n                        <IconDisclosureDownFill color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n                    </StyledHeaderDate>\n                );\n            }\n\n            return '';\n        },\n        [type, startYear, size],\n    );\n\n    const currentCalendarType = getCalendarType(type);\n\n    const PreviousButton = useMemo(\n        () => (\n            <StyledArrow aria-label={`Предыдущий ${currentCalendarType}`} onClick={() => onPrev()}>\n                <IconDisclosureLeft color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n            </StyledArrow>\n        ),\n        [currentCalendarType, size, onPrev],\n    );\n\n    const NextButton = useMemo(\n        () => (\n            <StyledArrow aria-label={`Следующий ${currentCalendarType}`} onClick={() => onNext()}>\n                <IconDisclosureRight color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n            </StyledArrow>\n        ),\n        [currentCalendarType, size, onNext],\n    );\n\n    return (\n        <StyledCalendarHeader>\n            {isDouble ? (\n                <StyledNavigation>\n                    <StyledDoubleHeaderWrapper>\n                        {PreviousButton}\n                        <StyledHeaderDouble onClick={handleCalendarState} aria-live=\"polite\">\n                            {getHeaderContent(firstDate)}\n                        </StyledHeaderDouble>\n                    </StyledDoubleHeaderWrapper>\n                    <StyledDoubleHeaderWrapper className={classes.doubleHeaderLastDateWrapper}>\n                        <StyledHeaderDouble onClick={handleCalendarState} aria-live=\"polite\">\n                            {getHeaderContent(secondDate, true)}\n                        </StyledHeaderDouble>\n                        {NextButton}\n                    </StyledDoubleHeaderWrapper>\n                </StyledNavigation>\n            ) : (\n                <>\n                    <StyledHeader\n                        type=\"button\"\n                        aria-live=\"polite\"\n                        id=\"id-grid-label\"\n                        onClick={handleCalendarState}\n                        tabIndex={0}\n                    >\n                        {getHeaderContent(firstDate)}\n                    </StyledHeader>\n                    <StyledArrows>\n                        {PreviousButton}\n                        {NextButton}\n                    </StyledArrows>\n                </>\n            )}\n        </StyledCalendarHeader>\n    );\n};\n"],"names":["CalendarHeader","_ref","_ref$type","type","_ref$startYear","startYear","size","firstDate","secondDate","isDouble","onPrev","onNext","onUpdateCalendarState","handleCalendarState","useCallback","newSize","sizeMap","Months","single","CalendarState","Days","Quarters","Years","getHeaderContent","date","secondPart","React","createElement","Fragment","StyledHeaderDate","MONTH_NAMES","monthIndex","year","IconDisclosureDownFill","color","yearValue","YEAR_RENDER_COUNT","currentCalendarType","getCalendarType","PreviousButton","useMemo","StyledArrow","concat","onClick","IconDisclosureLeft","NextButton","IconDisclosureRight","StyledCalendarHeader","StyledNavigation","StyledDoubleHeaderWrapper","StyledHeaderDouble","className","classes","doubleHeaderLastDateWrapper","StyledHeader","id","tabIndex","StyledArrows"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../../src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\n\nimport { IconDisclosureDownFill, IconDisclosureLeftCentered, IconDisclosureRightCentered } from '../../../_Icon';\nimport { CalendarState } from '../../store/types';\nimport { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';\nimport type { DateObject } from '../../Calendar.types';\nimport { classes } from '../../Calendar.tokens';\nimport { sizeMap } from '../../store/reducer';\n\nimport type { CalendarHeaderProps } from './CalendarHeader.types';\nimport {\n    StyledArrow,\n    StyledArrows,\n    StyledCalendarHeader,\n    StyledDoubleHeaderWrapper,\n    StyledHeader,\n    StyledHeaderDate,\n    StyledHeaderDouble,\n    StyledNavigation,\n} from './CalendarHeader.styles';\n\n/**\n * Компонент шапки календаря.\n */\nexport const CalendarHeader: React.FC<CalendarHeaderProps> = ({\n    type = 'Days',\n    startYear = 0,\n    size,\n    firstDate,\n    secondDate,\n    isDouble,\n    onPrev,\n    onNext,\n    onUpdateCalendarState,\n}) => {\n    const handleCalendarState = useCallback(() => {\n        const newSize: [number, number] = isDouble ? sizeMap.Months.double : sizeMap.Months.single;\n\n        if (type === CalendarState.Days) {\n            onUpdateCalendarState?.(CalendarState.Months, newSize);\n        }\n\n        if (type === CalendarState.Months || type === CalendarState.Quarters) {\n            onUpdateCalendarState?.(CalendarState.Years, newSize);\n        }\n    }, [type, onUpdateCalendarState]);\n\n    const getHeaderContent = useCallback(\n        (date?: DateObject, secondPart?: boolean) => {\n            if (!date) {\n                return '';\n            }\n\n            if (type === CalendarState.Days) {\n                return (\n                    <>\n                        <StyledHeaderDate>{MONTH_NAMES[date.monthIndex]}</StyledHeaderDate>\n                        <StyledHeaderDate>\n                            {date.year}\n                            <IconDisclosureDownFill color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n                        </StyledHeaderDate>\n                    </>\n                );\n            }\n\n            if (type === CalendarState.Months || type === CalendarState.Quarters) {\n                return (\n                    <StyledHeaderDate>\n                        {date.year}\n                        <IconDisclosureDownFill color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n                    </StyledHeaderDate>\n                );\n            }\n\n            if (type === CalendarState.Years) {\n                const yearValue = secondPart ? startYear + 12 : startYear;\n\n                return (\n                    <StyledHeaderDate>\n                        {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1}\n                        <IconDisclosureDownFill color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n                    </StyledHeaderDate>\n                );\n            }\n\n            return '';\n        },\n        [type, startYear, size],\n    );\n\n    const currentCalendarType = getCalendarType(type);\n\n    const PreviousButton = useMemo(\n        () => (\n            <StyledArrow aria-label={`Предыдущий ${currentCalendarType}`} onClick={() => onPrev()}>\n                <IconDisclosureLeftCentered color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n            </StyledArrow>\n        ),\n        [currentCalendarType, size, onPrev],\n    );\n\n    const NextButton = useMemo(\n        () => (\n            <StyledArrow aria-label={`Следующий ${currentCalendarType}`} onClick={() => onNext()}>\n                <IconDisclosureRightCentered color=\"inherit\" size={size === 'xs' ? 'xs' : 's'} />\n            </StyledArrow>\n        ),\n        [currentCalendarType, size, onNext],\n    );\n\n    return (\n        <StyledCalendarHeader>\n            {isDouble ? (\n                <StyledNavigation>\n                    <StyledDoubleHeaderWrapper>\n                        {PreviousButton}\n                        <StyledHeaderDouble onClick={handleCalendarState} aria-live=\"polite\">\n                            {getHeaderContent(firstDate)}\n                        </StyledHeaderDouble>\n                    </StyledDoubleHeaderWrapper>\n                    <StyledDoubleHeaderWrapper className={classes.doubleHeaderLastDateWrapper}>\n                        <StyledHeaderDouble onClick={handleCalendarState} aria-live=\"polite\">\n                            {getHeaderContent(secondDate, true)}\n                        </StyledHeaderDouble>\n                        {NextButton}\n                    </StyledDoubleHeaderWrapper>\n                </StyledNavigation>\n            ) : (\n                <>\n                    <StyledHeader\n                        type=\"button\"\n                        aria-live=\"polite\"\n                        id=\"id-grid-label\"\n                        onClick={handleCalendarState}\n                        tabIndex={0}\n                    >\n                        {getHeaderContent(firstDate)}\n                    </StyledHeader>\n                    <StyledArrows>\n                        {PreviousButton}\n                        {NextButton}\n                    </StyledArrows>\n                </>\n            )}\n        </StyledCalendarHeader>\n    );\n};\n"],"names":["CalendarHeader","_ref","_ref$type","type","_ref$startYear","startYear","size","firstDate","secondDate","isDouble","onPrev","onNext","onUpdateCalendarState","handleCalendarState","useCallback","newSize","sizeMap","Months","single","CalendarState","Days","Quarters","Years","getHeaderContent","date","secondPart","React","createElement","Fragment","StyledHeaderDate","MONTH_NAMES","monthIndex","year","IconDisclosureDownFill","color","yearValue","YEAR_RENDER_COUNT","currentCalendarType","getCalendarType","PreviousButton","useMemo","StyledArrow","concat","onClick","IconDisclosureLeftCentered","NextButton","IconDisclosureRightCentered","StyledCalendarHeader","StyledNavigation","StyledDoubleHeaderWrapper","StyledHeaderDouble","className","classes","doubleHeaderLastDateWrapper","StyledHeader","id","tabIndex","StyledArrows"],"mappings":"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"}

package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { classes } from '../../Dropdown.tokens.js';
 import { cx } from '../../../../utils/index.js';
 import '@linaria/react';
-import { IconDisclosureRight } from '../../../_Icon/Icons/IconDisclosureRight.js';
+import { IconDisclosureRightCentered } from '../../../_Icon/Icons/IconDisclosureRightCentered.js';
 import { Wrapper, StyledContentLeft, StyledText, StyledContentRight, DisclosureIconWrapper } from './DropdownItem.styles.js';
 
 var DropdownItem = function DropdownItem(_ref) {
@@ -78,7 +78,7 @@ var DropdownItem = function DropdownItem(_ref) {
     "aria-haspopup": ariaHasPopup,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+  }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, null, label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
     size: disclosureIconSize,
     color: "inherit"
   })));

package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.js","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx"],"sourcesContent":["import React, { useEffect, useRef, FC } from 'react';\n\nimport { classes } from '../../Dropdown.tokens';\nimport { cx } from '../../../../utils';\nimport { IconDisclosureRight } from '../../../_Icon';\n\nimport {\n    StyledContentLeft,\n    StyledContentRight,\n    StyledText,\n    Wrapper,\n    DisclosureIconWrapper,\n} from './DropdownItem.styles';\nimport type { DropdownItemProps } from './DropdownItem.type';\n\nexport const DropdownItem: FC<DropdownItemProps> = ({\n    item,\n    path,\n    focusedPath,\n    currentLevel,\n    index,\n    itemRole,\n    closeOnSelect,\n    handleGlobalToggle,\n    onHover,\n    onItemSelect,\n    onItemClick,\n    ariaControls,\n    ariaExpanded,\n    ariaHasPopup,\n    ariaLevel,\n    ariaLabel,\n    variant,\n    hasArrow,\n    size,\n}) => {\n    const { value, label, disabled, isDisabled, contentLeft, contentRight } = item;\n\n    const ref = useRef<HTMLLIElement | null>(null);\n\n    const disclosureIconSize = size === 'xs' ? 'xs' : 's';\n    const isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;\n    const focusedClass =\n        currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel]\n            ? classes.dropdownItemIsFocused\n            : undefined;\n    const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined;\n\n    useEffect(() => {\n        if (focusedClass && ref?.current) {\n            ref.current.scrollIntoView({\n                behavior: 'smooth',\n                block: 'center',\n                inline: 'center',\n            });\n        }\n    }, [focusedClass]);\n\n    const handleClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        if (disabled || isDisabled) {\n            return;\n        }\n\n        if (onItemSelect) {\n            onItemSelect(item, event);\n        }\n\n        if (onItemClick) {\n            onItemClick(item, event);\n        }\n\n        if (handleGlobalToggle && closeOnSelect) {\n            handleGlobalToggle(false, event);\n        }\n    };\n\n    const handleHover = () => {\n        if (onHover) {\n            onHover(index);\n        }\n    };\n\n    return (\n        <Wrapper\n            className={cx(isDisabledClassName, focusedClass, activeClass)}\n            id={value.toString()}\n            role={itemRole}\n            ref={ref}\n            aria-disabled={disabled || isDisabled}\n            onClick={handleClick}\n            onMouseEnter={handleHover}\n            variant={variant}\n            aria-controls={ariaControls}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n            aria-level={ariaLevel}\n            aria-label={ariaLabel}\n        >\n            {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n            <StyledText>{label}</StyledText>\n            {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n\n            {item.items && hasArrow && (\n                <DisclosureIconWrapper>\n                    <IconDisclosureRight size={disclosureIconSize} color=\"inherit\" />\n                </DisclosureIconWrapper>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["DropdownItem","_ref","item","path","focusedPath","currentLevel","index","itemRole","closeOnSelect","handleGlobalToggle","onHover","onItemSelect","onItemClick","ariaControls","ariaExpanded","ariaHasPopup","ariaLevel","ariaLabel","variant","hasArrow","size","value","label","disabled","isDisabled","contentLeft","contentRight","ref","useRef","disclosureIconSize","isDisabledClassName","classes","dropdownItemIsDisabled","undefined","focusedClass","length","dropdownItemIsFocused","activeClass","dropdownItemIsActive","useEffect","current","scrollIntoView","behavior","block","inline","handleClick","event","handleHover","React","createElement","Wrapper","className","cx","id","toString","role","onClick","onMouseEnter","StyledContentLeft","StyledText","StyledContentRight","items","DisclosureIconWrapper","IconDisclosureRight","color"],"mappings":"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"}
+{"version":3,"file":"DropdownItem.js","sources":["../../../../../src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx"],"sourcesContent":["import React, { useEffect, useRef, FC } from 'react';\n\nimport { classes } from '../../Dropdown.tokens';\nimport { cx } from '../../../../utils';\nimport { IconDisclosureRightCentered } from '../../../_Icon';\n\nimport {\n    StyledContentLeft,\n    StyledContentRight,\n    StyledText,\n    Wrapper,\n    DisclosureIconWrapper,\n} from './DropdownItem.styles';\nimport type { DropdownItemProps } from './DropdownItem.type';\n\nexport const DropdownItem: FC<DropdownItemProps> = ({\n    item,\n    path,\n    focusedPath,\n    currentLevel,\n    index,\n    itemRole,\n    closeOnSelect,\n    handleGlobalToggle,\n    onHover,\n    onItemSelect,\n    onItemClick,\n    ariaControls,\n    ariaExpanded,\n    ariaHasPopup,\n    ariaLevel,\n    ariaLabel,\n    variant,\n    hasArrow,\n    size,\n}) => {\n    const { value, label, disabled, isDisabled, contentLeft, contentRight } = item;\n\n    const ref = useRef<HTMLLIElement | null>(null);\n\n    const disclosureIconSize = size === 'xs' ? 'xs' : 's';\n    const isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;\n    const focusedClass =\n        currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel]\n            ? classes.dropdownItemIsFocused\n            : undefined;\n    const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined;\n\n    useEffect(() => {\n        if (focusedClass && ref?.current) {\n            ref.current.scrollIntoView({\n                behavior: 'smooth',\n                block: 'center',\n                inline: 'center',\n            });\n        }\n    }, [focusedClass]);\n\n    const handleClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        if (disabled || isDisabled) {\n            return;\n        }\n\n        if (onItemSelect) {\n            onItemSelect(item, event);\n        }\n\n        if (onItemClick) {\n            onItemClick(item, event);\n        }\n\n        if (handleGlobalToggle && closeOnSelect) {\n            handleGlobalToggle(false, event);\n        }\n    };\n\n    const handleHover = () => {\n        if (onHover) {\n            onHover(index);\n        }\n    };\n\n    return (\n        <Wrapper\n            className={cx(isDisabledClassName, focusedClass, activeClass)}\n            id={value.toString()}\n            role={itemRole}\n            ref={ref}\n            aria-disabled={disabled || isDisabled}\n            onClick={handleClick}\n            onMouseEnter={handleHover}\n            variant={variant}\n            aria-controls={ariaControls}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n            aria-level={ariaLevel}\n            aria-label={ariaLabel}\n        >\n            {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n            <StyledText>{label}</StyledText>\n            {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n\n            {item.items && hasArrow && (\n                <DisclosureIconWrapper>\n                    <IconDisclosureRightCentered size={disclosureIconSize} color=\"inherit\" />\n                </DisclosureIconWrapper>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["DropdownItem","_ref","item","path","focusedPath","currentLevel","index","itemRole","closeOnSelect","handleGlobalToggle","onHover","onItemSelect","onItemClick","ariaControls","ariaExpanded","ariaHasPopup","ariaLevel","ariaLabel","variant","hasArrow","size","value","label","disabled","isDisabled","contentLeft","contentRight","ref","useRef","disclosureIconSize","isDisabledClassName","classes","dropdownItemIsDisabled","undefined","focusedClass","length","dropdownItemIsFocused","activeClass","dropdownItemIsActive","useEffect","current","scrollIntoView","behavior","block","inline","handleClick","event","handleHover","React","createElement","Wrapper","className","cx","id","toString","role","onClick","onMouseEnter","StyledContentLeft","StyledText","StyledContentRight","items","DisclosureIconWrapper","IconDisclosureRightCentered","color"],"mappings":"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"}

package/es/components/Segment/tokens.js

@@ -2,7 +2,12 @@ var classes = {
   selectedSegmentItem: 'selected-segment-item',
   segmentPilled: 'segment-pilled',
   segmentGroupFilledBackground: 'segment-group-filled-background',
-  segmentStretch: 'segment-stretched'
+  segmentStretch: 'segment-stretched',
+  segmentVertical: 'segment-vertical',
+  segmentArrowPadding: 'segment-arrow-padding',
+  segmentGroupClipScroll: 'segment-group-clip-scroll',
+  segmentGroupClipShowAll: 'segment-group-clip-show-all',
+  segmentXsSize: 'segment-xs-size'
 };
 var tokens = {
   fontFamily: '--plasma-segment-item-font-family',
@@ -17,6 +22,8 @@ var tokens = {
   groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
   groupWidth: '--plasma-segment-group-width',
   groupHeight: '--plasma-segment-group-height',
+  groupArrowPadding: '--plasma-segment-group-arrow-padding',
+  groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
   groupBackgroundColor: '--plasma-segment-group-background-color',
   groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
   itemBorderRadius: '--plasma-segment-item-border-radius',
@@ -24,15 +31,22 @@ var tokens = {
   itemWidth: '--plasma-segment-item-width',
   itemHeight: '--plasma-segment-item-height',
   itemPadding: '--plasma-segment-item-padding',
+  itemPilledPadding: '--plasma-segment-item-pilled-padding',
   itemMarginLeft: '--plasma-segment-item-margin-left',
+  itemContentPadding: '--plasma-segment-item-content-padding',
+  itemIconMargin: '--plasma-segment-item-content-icon-margin',
   itemColor: '--plasma-segment-item-color',
   itemBackgroundColor: '--plasma-segment-item-background-color',
   itemColorHover: '--plasma-segment-item-color-hover',
   itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
+  itemAdditionalColor: '--plasma-segment-item-additional-color',
+  itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
   itemSelectedColor: '--plasma-segment-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
   itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
   itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
+  itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
+  itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
   disabledOpacity: '--plasma-segment-disabled-opacity'
 };
 

package/es/components/Segment/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/components/Segment/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedSegmentItem: 'selected-segment-item',\n    segmentPilled: 'segment-pilled',\n    segmentGroupFilledBackground: 'segment-group-filled-background',\n    segmentStretch: 'segment-stretched',\n};\n\nexport const tokens = {\n    fontFamily: '--plasma-segment-item-font-family',\n    fontSize: '--plasma-segment-item-font-size',\n    fontStyle: '--plasma-segment-item-font-style',\n    fontWeight: '--plasma-segment-item-font-weight',\n    letterSpacing: '--plasma-segment-item-letter-spacing',\n    lineHeight: '--plasma-segment-item-lineheight',\n\n    outlineFocusColor: '--plasma-segment-outline-focus-color',\n\n    arrowColor: '--plasma-segment-arrow-color',\n\n    groupBorderRadius: '--plasma-segment-group-border-radius',\n    groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',\n    groupWidth: '--plasma-segment-group-width',\n    groupHeight: '--plasma-segment-group-height',\n\n    groupBackgroundColor: '--plasma-segment-group-background-color',\n    groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',\n\n    itemBorderRadius: '--plasma-segment-item-border-radius',\n    itemPilledBorderRadius: '--plasma-segment-item-pilled-border-radius',\n    itemWidth: '--plasma-segment-item-width',\n    itemHeight: '--plasma-segment-item-height',\n    itemPadding: '--plasma-segment-item-padding',\n    itemMarginLeft: '--plasma-segment-item-margin-left',\n\n    itemColor: '--plasma-segment-item-color',\n    itemBackgroundColor: '--plasma-segment-item-background-color',\n    itemColorHover: '--plasma-segment-item-color-hover',\n    itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-segment-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',\n\n    disabledOpacity: '--plasma-segment-disabled-opacity',\n};\n"],"names":["classes","selectedSegmentItem","segmentPilled","segmentGroupFilledBackground","segmentStretch","tokens","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","outlineFocusColor","arrowColor","groupBorderRadius","groupPilledBorderRadius","groupWidth","groupHeight","groupBackgroundColor","groupFilledBackgroundColor","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemMarginLeft","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","disabledOpacity"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,mBAAmB,EAAE,uBAAuB;AAC5CC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,4BAA4B,EAAE,iCAAiC;AAC/DC,EAAAA,cAAc,EAAE,mBAAA;AACpB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,QAAQ,EAAE,iCAAiC;AAC3CC,EAAAA,SAAS,EAAE,kCAAkC;AAC7CC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,aAAa,EAAE,sCAAsC;AACrDC,EAAAA,UAAU,EAAE,kCAAkC;AAE9CC,EAAAA,iBAAiB,EAAE,sCAAsC;AAEzDC,EAAAA,UAAU,EAAE,8BAA8B;AAE1CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,uBAAuB,EAAE,6CAA6C;AACtEC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAE5CC,EAAAA,oBAAoB,EAAE,yCAAyC;AAC/DC,EAAAA,0BAA0B,EAAE,gDAAgD;AAE5EC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,sBAAsB,EAAE,4CAA4C;AACpEC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,cAAc,EAAE,mCAAmC;AAEnDC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,mBAAmB,EAAE,wCAAwC;AAC7DC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,wBAAwB,EAAE,8CAA8C;AAExEC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,2BAA2B,EAAE,iDAAiD;AAC9EC,EAAAA,sBAAsB,EAAE,4CAA4C;AACpEC,EAAAA,gCAAgC,EAAE,uDAAuD;AAEzFC,EAAAA,eAAe,EAAE,mCAAA;AACrB;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../src/components/Segment/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedSegmentItem: 'selected-segment-item',\n    segmentPilled: 'segment-pilled',\n    segmentGroupFilledBackground: 'segment-group-filled-background',\n    segmentStretch: 'segment-stretched',\n    segmentVertical: 'segment-vertical',\n    segmentArrowPadding: 'segment-arrow-padding',\n    segmentGroupClipScroll: 'segment-group-clip-scroll',\n    segmentGroupClipShowAll: 'segment-group-clip-show-all',\n    segmentXsSize: 'segment-xs-size',\n};\n\nexport const tokens = {\n    fontFamily: '--plasma-segment-item-font-family',\n    fontSize: '--plasma-segment-item-font-size',\n    fontStyle: '--plasma-segment-item-font-style',\n    fontWeight: '--plasma-segment-item-font-weight',\n    letterSpacing: '--plasma-segment-item-letter-spacing',\n    lineHeight: '--plasma-segment-item-lineheight',\n\n    outlineFocusColor: '--plasma-segment-outline-focus-color',\n\n    arrowColor: '--plasma-segment-arrow-color',\n\n    groupBorderRadius: '--plasma-segment-group-border-radius',\n    groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',\n    groupWidth: '--plasma-segment-group-width',\n    groupHeight: '--plasma-segment-group-height',\n    groupArrowPadding: '--plasma-segment-group-arrow-padding',\n    groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',\n\n    groupBackgroundColor: '--plasma-segment-group-background-color',\n    groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',\n\n    itemBorderRadius: '--plasma-segment-item-border-radius',\n    itemPilledBorderRadius: '--plasma-segment-item-pilled-border-radius',\n    itemWidth: '--plasma-segment-item-width',\n    itemHeight: '--plasma-segment-item-height',\n    itemPadding: '--plasma-segment-item-padding',\n    itemPilledPadding: '--plasma-segment-item-pilled-padding',\n    itemMarginLeft: '--plasma-segment-item-margin-left',\n    itemContentPadding: '--plasma-segment-item-content-padding',\n    itemIconMargin: '--plasma-segment-item-content-icon-margin',\n\n    itemColor: '--plasma-segment-item-color',\n    itemBackgroundColor: '--plasma-segment-item-background-color',\n    itemColorHover: '--plasma-segment-item-color-hover',\n    itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',\n    itemAdditionalColor: '--plasma-segment-item-additional-color',\n    itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',\n\n    itemSelectedColor: '--plasma-segment-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',\n    itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',\n    itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',\n\n    disabledOpacity: '--plasma-segment-disabled-opacity',\n};\n"],"names":["classes","selectedSegmentItem","segmentPilled","segmentGroupFilledBackground","segmentStretch","segmentVertical","segmentArrowPadding","segmentGroupClipScroll","segmentGroupClipShowAll","segmentXsSize","tokens","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","outlineFocusColor","arrowColor","groupBorderRadius","groupPilledBorderRadius","groupWidth","groupHeight","groupArrowPadding","groupVerticalArrowPadding","groupBackgroundColor","groupFilledBackgroundColor","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPilledPadding","itemMarginLeft","itemContentPadding","itemIconMargin","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemAdditionalColor","itemAdditionalColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemSelectedAdditionalColor","itemSelectedAdditionalColorHover","disabledOpacity"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,mBAAmB,EAAE,uBAAuB;AAC5CC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,4BAA4B,EAAE,iCAAiC;AAC/DC,EAAAA,cAAc,EAAE,mBAAmB;AACnCC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,mBAAmB,EAAE,uBAAuB;AAC5CC,EAAAA,sBAAsB,EAAE,2BAA2B;AACnDC,EAAAA,uBAAuB,EAAE,6BAA6B;AACtDC,EAAAA,aAAa,EAAE,iBAAA;AACnB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,QAAQ,EAAE,iCAAiC;AAC3CC,EAAAA,SAAS,EAAE,kCAAkC;AAC7CC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,aAAa,EAAE,sCAAsC;AACrDC,EAAAA,UAAU,EAAE,kCAAkC;AAE9CC,EAAAA,iBAAiB,EAAE,sCAAsC;AAEzDC,EAAAA,UAAU,EAAE,8BAA8B;AAE1CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,uBAAuB,EAAE,6CAA6C;AACtEC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,yBAAyB,EAAE,+CAA+C;AAE1EC,EAAAA,oBAAoB,EAAE,yCAAyC;AAC/DC,EAAAA,0BAA0B,EAAE,gDAAgD;AAE5EC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,sBAAsB,EAAE,4CAA4C;AACpEC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,kBAAkB,EAAE,uCAAuC;AAC3DC,EAAAA,cAAc,EAAE,2CAA2C;AAE3DC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,mBAAmB,EAAE,wCAAwC;AAC7DC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,wBAAwB,EAAE,8CAA8C;AACxEC,EAAAA,mBAAmB,EAAE,wCAAwC;AAC7DC,EAAAA,wBAAwB,EAAE,8CAA8C;AAExEC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzDC,EAAAA,2BAA2B,EAAE,iDAAiD;AAC9EC,EAAAA,sBAAsB,EAAE,4CAA4C;AACpEC,EAAAA,gCAAgC,EAAE,uDAAuD;AACzFC,EAAAA,2BAA2B,EAAE,iDAAiD;AAC9EC,EAAAA,gCAAgC,EAAE,uDAAuD;AAEzFC,EAAAA,eAAe,EAAE,mCAAA;AACrB;;;;"}

package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css

@@ -12,7 +12,13 @@
 
 .base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172{width:100%;}.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_spuzt9m__3b76a172,.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_sin9wo2__3b76a172,.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_sin9wo2__3b76a172 > button{width:100%;}
 
-.SegmentGroup_styles_m9i9p0_b2sori2__a29c0677{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.SegmentGroup_styles_m9i9p0_sin9wo2__a29c0677{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;}
-.SegmentGroup_styles_m9i9p0_spuzt9m__a29c0677{position:relative;height:100%;margin:0;padding:0.25rem;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;}.SegmentGroup_styles_m9i9p0_spuzt9m__a29c0677::-webkit-scrollbar{display:none;}
-.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;}.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677::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;}.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677.SegmentGroup_styles_m9i9p0_focusVisible__a29c0677:focus::before,.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677[disabled]{cursor:not-allowed;}
+.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+
+.SegmentGroup_styles_u742r1_b2sori2__bd84399a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}
+.SegmentGroup_styles_u742r1_sin9wo2__bd84399a{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;}
+.SegmentGroup_styles_u742r1_spuzt9m__bd84399a{position:relative;height:100%;width:100%;padding:0.125rem;box-sizing:content-box;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;}.SegmentGroup_styles_u742r1_spuzt9m__bd84399a.SegmentGroup_styles_u742r1_segmentGroupClipScroll__bd84399a{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;}.SegmentGroup_styles_u742r1_spuzt9m__bd84399a.SegmentGroup_styles_u742r1_segmentGroupClipScroll__bd84399a::-webkit-scrollbar{display:none;}.SegmentGroup_styles_u742r1_spuzt9m__bd84399a.SegmentGroup_styles_u742r1_segmentGroupClipShowAll__bd84399a{overflow:visible;}
+.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a::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;}.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a.SegmentGroup_styles_u742r1_focusVisible__bd84399a:focus::before,.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a[disabled]{cursor:not-allowed;}
+.SegmentGroup_styles_u742r1_s3pgccr__bd84399a.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
+.SegmentGroup_styles_u742r1_sax6mvm__bd84399a.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
+.SegmentGroup_styles_u742r1_s1n81rr8__bd84399a.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
+.SegmentGroup_styles_u742r1_s7ukuvj__bd84399a.SegmentGroup_styles_u742r1_s1qf4oye__bd84399a{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}

package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js

@@ -1,9 +1,11 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useState, Children, useCallback, useMemo, useEffect } from 'react';
-import { safeUseId, useCarousel } from '@salutejs/plasma-core';
+import React, { forwardRef, useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { safeUseId } from '@salutejs/plasma-core';
 import { IconDisclosureLeft } from '../../../_Icon/Icons/IconDisclosureLeft.js';
 import { IconDisclosureRight } from '../../../_Icon/Icons/IconDisclosureRight.js';
 import '@linaria/react';
+import { IconDisclosureDown } from '../../../_Icon/Icons/IconDisclosureDown.js';
+import { IconDisclosureUp } from '../../../_Icon/Icons/IconDisclosureUp.js';
 import { tokens, classes } from '../../tokens.js';
 import { cx } from '../../../../utils/index.js';
 import { useSegmentInner } from '../../SegmentProvider/SegmentProvider.js';
@@ -11,151 +13,228 @@ import { base as base$1 } from './variations/_size/base.js';
 import { base as base$2 } from './variations/_view/base.js';
 import { base as base$3 } from './variations/_disabled/base.js';
 import { base as base$4 } from './variations/_pilled/base.js';
-import { base as base$6 } from './variations/_filledBackgound/base.js';
+import { base as base$7 } from './variations/_filledBackgound/base.js';
 import { base as base$5 } from './variations/_stretch/base.js';
-import { StyledArrow, StyledContentWrapper, StyledContent, base } from './SegmentGroup.styles.js';
+import { base as base$6 } from './variations/_orientation/base.js';
+import { StyledContentWrapper, StyledContent, base, StyledTopArrow, StyledLeftArrow, StyledBottomArrow, StyledRightArrow } from './SegmentGroup.styles.js';
 
-var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
+var _excluded = ["id", "selectionMode", "pilled", "stretch", "clip", "orientation", "filledBackground", "hasBackground", "disabled", "size", "view", "children"];
+var Keys = /*#__PURE__*/function (Keys) {
+  Keys[Keys["end"] = 35] = "end";
+  Keys[Keys["home"] = 36] = "home";
+  Keys[Keys["left"] = 37] = "left";
+  Keys[Keys["right"] = 39] = "right";
+  return Keys;
+}(Keys || {});
+var getChildNodes = function getChildNodes(wrapper) {
+  var container = wrapper === null || wrapper === void 0 ? void 0 : wrapper.firstChild;
+  return container ? Array.from(container === null || container === void 0 ? void 0 : container.childNodes) : [];
+};
 var segmentGroupRoot = function segmentGroupRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var id = props.id,
       selectionMode = props.selectionMode,
       pilled = props.pilled,
       stretch = props.stretch,
+      clip = props.clip,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
       _props$filledBackgrou = props.filledBackground,
       filledBackground = _props$filledBackgrou === void 0 ? false : _props$filledBackgrou,
+      _props$hasBackground = props.hasBackground,
+      hasBackground = _props$hasBackground === void 0 ? false : _props$hasBackground,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       size = props.size,
       view = props.view,
       children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
+    var scrollRef = useRef(null);
+    var trackRef = useRef(null);
+    var leftArrowRef = useRef(null);
     var _useSegmentInner = useSegmentInner(),
       setSelectionMode = _useSegmentInner.setSelectionMode,
       setDisabledGroup = _useSegmentInner.setDisabledGroup;
-    var _useState = useState(0),
+    var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
-      index = _useState2[0],
-      setIndex = _useState2[1];
-    var _useState3 = useState(false),
+      firstItemVisible = _useState2[0],
+      setFirstItemVisible = _useState2[1];
+    var _useState3 = useState(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      firstItemVisible = _useState4[0],
-      setFirstItemVisible = _useState4[1];
-    var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      lastItemVisible = _useState6[0],
-      setLastItemVisible = _useState6[1];
+      lastItemVisible = _useState4[0],
+      setLastItemVisible = _useState4[1];
     var uniqId = safeUseId();
     var segmentGroupId = id || uniqId;
-    var pilledAttr = view !== 'clear' && pilled;
-    var filledBackgroundAttr = view !== 'clear' && filledBackground;
+    var isVertical = orientation === 'vertical';
+    var pilledAttr = (view !== 'clear' || hasBackground) && pilled;
+    var filledBackgroundAttr = view !== 'clear' && filledBackground || hasBackground;
+    var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;
+    var orientationClass = isVertical ? classes.segmentVertical : undefined;
+
+    // для появления scroll в fixed отображении
+    var clipScrollClass = clip !== 'showAll' ? classes.segmentGroupClipScroll : undefined;
+    var clipShowAllClass = clip === 'showAll' ? classes.segmentGroupClipShowAll : undefined;
     var pilledClass = pilledAttr ? classes.segmentPilled : undefined;
     var filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;
-    var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;
-    var items = (Children === null || Children === void 0 ? void 0 : Children.map(children, function (child) {
-      return child;
-    })) || [];
     var onPrev = useCallback(function () {
-      !disabled && setIndex(function (prevIndex) {
-        return prevIndex > 0 ? prevIndex - 1 : 0;
+      if (disabled || !scrollRef.current) {
+        return;
+      }
+      var childNodes = getChildNodes(scrollRef.current);
+      var scrollLeft = Math.round(scrollRef.current.scrollLeft);
+      var firstOverflowingTab = childNodes.slice().reverse().find(function (child) {
+        if (!child || child.offsetLeft === undefined) {
+          return;
+        }
+        var tabStartX = child.offsetLeft;
+        return tabStartX < scrollLeft;
+      });
+      firstOverflowingTab === null || firstOverflowingTab === void 0 || firstOverflowingTab.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
       });
-    }, [disabled]);
+    }, [disabled, scrollRef]);
     var onNext = useCallback(function () {
-      !disabled && setIndex(function (prevIndex) {
-        return prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex;
+      if (disabled || !scrollRef.current) {
+        return;
+      }
+      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
+      var childNodes = getChildNodes(scrollRef.current);
+      var lastOverflowingChild = childNodes.find(function (child) {
+        if (!child || child.offsetLeft === undefined) {
+          return;
+        }
+        var tabEndX = child.offsetLeft + child.offsetWidth;
+        return tabEndX > scrollRight;
       });
-    }, [disabled]);
-    var onIntersecting = function onIntersecting(setVisible) {
-      return function (entries) {
-        /*
-         * Пробегаемся по элементам на которых есть слушатель события появления.
-         * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости
-         */
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            setVisible(true);
-          } else {
-            setVisible(false);
-          }
+      lastOverflowingChild === null || lastOverflowingChild === void 0 || lastOverflowingChild.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, [disabled, scrollRef]);
+    var onKeyDown = useCallback(function (event) {
+      var childNodes = getChildNodes(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
+      var index = childNodes.findIndex(function (child) {
+        return document.activeElement === child;
+      });
+      var minIndex = 0;
+      var maxIndex = childNodes.length - 1;
+      var nextIndex;
+      switch (event.keyCode) {
+        case Keys.end:
+          nextIndex = maxIndex;
+          break;
+        case Keys.left:
+          nextIndex = index > minIndex ? index - 1 : index;
+          break;
+        case Keys.right:
+          nextIndex = index < maxIndex ? index + 1 : index;
+          break;
+        case Keys.home:
+          nextIndex = minIndex;
+          break;
+        default:
+          return;
+      }
+      if (nextIndex !== index) {
+        var _childNodes$nextIndex, _childNodes$nextIndex2;
+        event.preventDefault();
+        (_childNodes$nextIndex = childNodes[nextIndex]) === null || _childNodes$nextIndex === void 0 || _childNodes$nextIndex.focus();
+        (_childNodes$nextIndex2 = childNodes[nextIndex]) === null || _childNodes$nextIndex2 === void 0 || _childNodes$nextIndex2.scrollIntoView({
+          block: 'center',
+          inline: 'center',
+          behavior: 'smooth'
         });
-      };
-    };
-    var _useCarousel = useCarousel({
-        index: index,
-        axis: 'x',
-        scrollAlign: 'start',
-        detectActive: true,
-        debounceMs: 250,
-        onIndexChange: setIndex
-      }),
-      scrollRef = _useCarousel.scrollRef,
-      trackRef = _useCarousel.trackRef;
+      }
+    }, []);
+    var handleScroll = useCallback(function (event) {
+      event.stopPropagation();
+      if (isVertical) {
+        var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;
+        var scrollTop = Math.round(event.currentTarget.scrollTop);
+        setFirstItemVisible(scrollTop <= 0);
+        setLastItemVisible(scrollTop >= maxScrollTop);
+        return;
+      }
+      var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
+      var scrollLeft = Math.round(event.currentTarget.scrollLeft);
+      setFirstItemVisible(scrollLeft <= 0);
+      setLastItemVisible(scrollLeft >= maxScrollLeft);
+    }, [isVertical]);
+    useEffect(function () {
+      var _scrollRef$current3, _scrollRef$current4;
+      if (isVertical) {
+        var _scrollRef$current, _scrollRef$current2;
+        setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight));
+        return;
+      }
+      setLastItemVisible(((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) === ((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth));
+    }, [isVertical]);
+
+    // Этот хук компенсирует появление левой/верхней стрелки при прокрутке
+    useEffect(function () {
+      if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
+        return;
+      }
+      if (isVertical) {
+        scrollRef.current.scrollTo({
+          top: Math.round(scrollRef.current.scrollTop + leftArrowRef.current.clientHeight)
+        });
+        return;
+      }
+      scrollRef.current.scrollTo({
+        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
+      });
+    }, [firstItemVisible, isVertical]);
     var PreviousButton = useMemo(function () {
-      return /*#__PURE__*/React.createElement(StyledArrow, {
+      var ArrowNode = isVertical ? StyledTopArrow : StyledLeftArrow;
+      return /*#__PURE__*/React.createElement(ArrowNode, {
         type: "button",
         "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
         onClick: onPrev,
         tabIndex: disabled ? -1 : 0,
         disabled: disabled
-      }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
+      }, isVertical ? /*#__PURE__*/React.createElement(IconDisclosureUp, {
+        color: "var(".concat(tokens.arrowColor, ")"),
+        size: "s"
+      }) : /*#__PURE__*/React.createElement(IconDisclosureLeft, {
         color: "var(".concat(tokens.arrowColor, ")")
       }));
-    }, [onPrev]);
+    }, [onPrev, isVertical]);
     var NextButton = useMemo(function () {
-      return /*#__PURE__*/React.createElement(StyledArrow, {
+      var ArrowNode = isVertical ? StyledBottomArrow : StyledRightArrow;
+      return /*#__PURE__*/React.createElement(ArrowNode, {
         type: "button",
         "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0441\u0435\u0433\u043C\u0435\u043D\u0442",
         onClick: onNext,
         tabIndex: disabled ? -1 : 0,
         disabled: disabled
-      }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+      }, isVertical ? /*#__PURE__*/React.createElement(IconDisclosureDown, {
+        color: "var(".concat(tokens.arrowColor, ")"),
+        size: "s"
+      }) : /*#__PURE__*/React.createElement(IconDisclosureRight, {
         color: "var(".concat(tokens.arrowColor, ")")
       }));
-    }, [onNext]);
+    }, [onNext, isVertical]);
     useEffect(function () {
       selectionMode && setSelectionMode(selectionMode);
       setDisabledGroup(disabled);
     }, [selectionMode, disabled]);
-    useEffect(function () {
-      var _trackRef$current;
-      // Intersection observer для первого сегмента
-      var observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-      });
-
-      // Intersection observer для последнего сегмента
-      var observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-      });
-
-      // получаем список сегментов внутри SegmentGroup
-      var childrenArray = Array.from(((_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.children) || []);
-      if (childrenArray.length) {
-        // подписываемся на событие появление внутри SegmentGroup
-        observeFirstItem.observe(childrenArray[0]);
-        observeLastItem.observe(childrenArray[childrenArray.length - 1]);
-      }
-      return function () {
-        // отписываемся от события появления внутри SegmentGroup
-        observeFirstItem.disconnect();
-        observeLastItem.disconnect();
-      };
-    }, [children]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
+      orientation: orientation,
       id: segmentGroupId,
       ref: outerRef,
       filledBackground: filledBackgroundAttr,
       disabled: disabled,
       pilled: pilledAttr,
-      className: cx(pilledClass, filledClass, stretchClass)
+      className: cx(pilledClass, filledClass, stretchClass, orientationClass),
+      onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
-      ref: scrollRef
+      className: cx(clipScrollClass, clipShowAllClass),
+      ref: scrollRef,
+      onScroll: handleScroll
     }, /*#__PURE__*/React.createElement(StyledContent, {
       ref: trackRef
     }, children)), !lastItemVisible && NextButton);
@@ -185,8 +264,11 @@ var segmentGroupConfig = {
       css: base$5,
       attrs: true
     },
+    orientation: {
+      css: base$6
+    },
     filledBackground: {
-      css: base$6,
+      css: base$7,
       attrs: true
     }
   },
@@ -196,5 +278,5 @@ var segmentGroupConfig = {
   }
 };
 
-export { segmentGroupConfig, segmentGroupRoot };
+export { getChildNodes, segmentGroupConfig, segmentGroupRoot };
 //# sourceMappingURL=SegmentGroup.js.map