@salutejs/plasma-new-hope 0.154.0-canary.1392.11041436795.0 → 0.154.0-canary.1421.11039037651.0

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    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;;;;"}
+{"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;;;;"}

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

@@ -1,4 +1,6 @@
-.base_1dfesjp_b16s69xg__8774de01{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);}.base_1dfesjp_b16s69xg__8774de01:before{--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}
+.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_m358nl_b16s69xg__c51d77df{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}
 
 .base_hsx1sr_bo2wq9n__1e99adcc{background-color:var(--plasma-segment-group-background-color);}
 
@@ -6,12 +8,11 @@
 
 .base_fqbatz_b1re0ohg__24d92a6d.base_fqbatz_segmentPilled__24d92a6d{--plasma_private-outline-radius:var(--plasma-segment-group-pilled-border-radius);border-radius:var(--plasma-segment-group-pilled-border-radius);}
 
-.base_a7w5s0_b13sjoz1__a0df01cb{position:relative;}.base_a7w5s0_b13sjoz1__a0df01cb.base_a7w5s0_segmentGroupFilledBackground__a0df01cb:before{content:'';position:absolute;inset:-0.125rem;background-color:var(--plasma-segment-group-filled-background-color);}
+.base_escgtx_b13sjoz1__a1f0e6e1.base_escgtx_segmentGroupFilledBackground__a1f0e6e1{background-color:var(--plasma-segment-group-filled-background-color);}
 
 .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%;}
 
-.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_6y4o38_b2sori2__2daec6de{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;max-width:100%;--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}
-.SegmentGroup_styles_6y4o38_sin9wo2__2daec6de{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;max-width:100%;}
-.SegmentGroup_styles_6y4o38_spuzt9m__2daec6de{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;}
+.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;}

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

@@ -1,117 +1,164 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useCallback, useEffect } from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
-import { classes } from '../../tokens.js';
+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 { IconDisclosureLeft } from '../../../_Icon/Icons/IconDisclosureLeft.js';
+import { IconDisclosureRight } from '../../../_Icon/Icons/IconDisclosureRight.js';
+import '@linaria/react';
+import { tokens, classes } from '../../tokens.js';
 import { cx } from '../../../../utils/index.js';
 import { useSegmentInner } from '../../SegmentProvider/SegmentProvider.js';
 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$7 } from './variations/_filledBackgound/base.js';
+import { base as base$6 } from './variations/_filledBackgound/base.js';
 import { base as base$5 } from './variations/_stretch/base.js';
-import { base as base$6 } from './variations/_orientation/base.js';
-import { StyledContentWrapper, StyledContent, base } from './SegmentGroup.styles.js';
+import { StyledArrow, StyledContentWrapper, StyledContent, base } from './SegmentGroup.styles.js';
 
-var _excluded = ["id", "selectionMode", "pilled", "stretch", "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 _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
 var segmentGroupRoot = function segmentGroupRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var id = props.id,
       selectionMode = props.selectionMode,
       pilled = props.pilled,
       stretch = props.stretch,
-      _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 _useSegmentInner = useSegmentInner(),
       setSelectionMode = _useSegmentInner.setSelectionMode,
       setDisabledGroup = _useSegmentInner.setDisabledGroup;
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      firstItemVisible = _useState4[0],
+      setFirstItemVisible = _useState4[1];
+    var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      lastItemVisible = _useState6[0],
+      setLastItemVisible = _useState6[1];
     var uniqId = safeUseId();
     var segmentGroupId = id || uniqId;
-    var isVertical = orientation === 'vertical';
-    var pilledAttr = hasBackground && pilled;
-    var filledBackgroundAttr = filledBackground || hasBackground;
-    var stretchClass = stretch ? classes.segmentStretch : undefined;
-    var orientationClass = isVertical ? classes.segmentVertical : undefined;
+    var pilledAttr = view !== 'clear' && pilled;
+    var filledBackgroundAttr = view !== 'clear' && filledBackground;
     var pilledClass = pilledAttr ? classes.segmentPilled : undefined;
     var filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;
-    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 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;
       });
-      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'
+    }, [disabled]);
+    var onNext = useCallback(function () {
+      !disabled && setIndex(function (prevIndex) {
+        return prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex;
+      });
+    }, [disabled]);
+    var onIntersecting = function onIntersecting(setVisible) {
+      return function (entries) {
+        /*
+         * Пробегаемся по элементам на которых есть слушатель события появления.
+         * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости
+         */
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+          } else {
+            setVisible(false);
+          }
         });
-      }
-    }, []);
+      };
+    };
+    var _useCarousel = useCarousel({
+        index: index,
+        axis: 'x',
+        scrollAlign: 'start',
+        detectActive: true,
+        debounceMs: 250,
+        onIndexChange: setIndex
+      }),
+      scrollRef = _useCarousel.scrollRef,
+      trackRef = _useCarousel.trackRef;
+    var PreviousButton = useMemo(function () {
+      return /*#__PURE__*/React.createElement(StyledArrow, {
+        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, {
+        color: "var(".concat(tokens.arrowColor, ")")
+      }));
+    }, [onPrev]);
+    var NextButton = useMemo(function () {
+      return /*#__PURE__*/React.createElement(StyledArrow, {
+        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, {
+        color: "var(".concat(tokens.arrowColor, ")")
+      }));
+    }, [onNext]);
     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, orientationClass),
-      onKeyDown: onKeyDown
-    }, rest), /*#__PURE__*/React.createElement(StyledContentWrapper, {
+      className: cx(pilledClass, filledClass, stretchClass)
+    }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
       ref: scrollRef
     }, /*#__PURE__*/React.createElement(StyledContent, {
       ref: trackRef
-    }, children)));
+    }, children)), !lastItemVisible && NextButton);
   });
 };
 var segmentGroupConfig = {
@@ -138,18 +185,16 @@ var segmentGroupConfig = {
       css: base$5,
       attrs: true
     },
-    orientation: {
-      css: base$6
-    },
     filledBackground: {
-      css: base$7,
+      css: base$6,
       attrs: true
     }
   },
   defaults: {
+    view: 'clear',
     size: 'xs'
   }
 };
 
-export { getChildNodes, segmentGroupConfig, segmentGroupRoot };
+export { segmentGroupConfig, segmentGroupRoot };
 //# sourceMappingURL=SegmentGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\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 filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { base as orientationCSS } from './variations/_orientation/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    left = 37,\n    right = 39,\n}\n\nexport const getChildNodes = (wrapper: HTMLElement | null) => {\n    const container = wrapper?.firstChild;\n    return container ? (Array.from(container?.childNodes) as HTMLElement[]) : [];\n};\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n    forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n        const {\n            id,\n            selectionMode,\n            pilled,\n            stretch,\n            orientation = 'horizontal',\n            filledBackground = false,\n            hasBackground = false,\n            disabled = false,\n            size,\n            view,\n            children,\n            ...rest\n        } = props;\n\n        const scrollRef = useRef<HTMLElement | null>(null);\n        const trackRef = useRef<HTMLElement | null>(null);\n\n        const { setSelectionMode, setDisabledGroup } = useSegmentInner();\n\n        const uniqId = safeUseId();\n        const segmentGroupId = id || uniqId;\n        const isVertical = orientation === 'vertical';\n\n        const pilledAttr = hasBackground && pilled;\n        const filledBackgroundAttr = filledBackground || hasBackground;\n\n        const stretchClass = stretch ? classes.segmentStretch : undefined;\n        const orientationClass = isVertical ? classes.segmentVertical : undefined;\n\n        const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n        const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n\n        const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n            const childNodes = getChildNodes(scrollRef?.current);\n\n            const index = childNodes.findIndex((child) => document.activeElement === child);\n\n            const minIndex = 0;\n            const maxIndex = childNodes.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                childNodes[nextIndex]?.focus();\n                childNodes[nextIndex]?.scrollIntoView({\n                    block: 'center',\n                    inline: 'center',\n                    behavior: 'smooth',\n                });\n            }\n        }, []);\n\n        useEffect(() => {\n            selectionMode && setSelectionMode(selectionMode);\n            setDisabledGroup(disabled);\n        }, [selectionMode, disabled]);\n\n        return (\n            <Root\n                view={view}\n                size={size}\n                orientation={orientation}\n                id={segmentGroupId}\n                ref={outerRef}\n                filledBackground={filledBackgroundAttr}\n                disabled={disabled}\n                pilled={pilledAttr}\n                className={cx(pilledClass, filledClass, stretchClass, orientationClass)}\n                onKeyDown={onKeyDown}\n                {...rest}\n            >\n                <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n                    <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n                </StyledContentWrapper>\n            </Root>\n        );\n    });\n\nexport const segmentGroupConfig = {\n    name: 'SegmentGroup',\n    tag: 'div',\n    layout: segmentGroupRoot,\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            attrs: true,\n        },\n        stretch: {\n            css: stretchCSS,\n            attrs: true,\n        },\n        orientation: {\n            css: orientationCSS,\n        },\n        filledBackground: {\n            css: filledBackgroundCSS,\n            attrs: true,\n        },\n    },\n    defaults: {\n        size: 'xs',\n    },\n};\n"],"names":["Keys","getChildNodes","wrapper","container","firstChild","Array","from","childNodes","segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$orientation","orientation","_props$filledBackgrou","filledBackground","_props$hasBackground","hasBackground","_props$disabled","disabled","size","view","children","rest","_objectWithoutProperties","_excluded","scrollRef","useRef","trackRef","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","uniqId","safeUseId","segmentGroupId","isVertical","pilledAttr","filledBackgroundAttr","stretchClass","classes","segmentStretch","undefined","orientationClass","segmentVertical","pilledClass","segmentPilled","filledClass","segmentGroupFilledBackground","onKeyDown","useCallback","event","current","index","findIndex","child","document","activeElement","minIndex","maxIndex","length","nextIndex","keyCode","end","left","right","home","_childNodes$nextIndex","_childNodes$nextIndex2","preventDefault","focus","scrollIntoView","block","inline","behavior","useEffect","React","createElement","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","orientationCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, Children, useEffect } from 'react';\nimport type { SetStateAction, RefObject, MutableRefObject } from 'react';\nimport { safeUseId, useCarousel } 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 { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\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 filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n    forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n        const {\n            id,\n            selectionMode,\n            pilled,\n            stretch,\n            filledBackground = false,\n            disabled = false,\n            size,\n            view,\n            children,\n            ...rest\n        } = props;\n\n        const { setSelectionMode, setDisabledGroup } = useSegmentInner();\n\n        const [index, setIndex] = useState(0);\n        const [firstItemVisible, setFirstItemVisible] = useState(false);\n        const [lastItemVisible, setLastItemVisible] = useState(false);\n\n        const uniqId = safeUseId();\n        const segmentGroupId = id || uniqId;\n\n        const pilledAttr = view !== 'clear' && pilled;\n        const filledBackgroundAttr = view !== 'clear' && filledBackground;\n        const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n        const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n        const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;\n\n        const items = Children?.map(children, (child) => child) || [];\n\n        const onPrev = useCallback(() => {\n            !disabled && setIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));\n        }, [disabled]);\n\n        const onNext = useCallback(() => {\n            !disabled && setIndex((prevIndex) => (prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex));\n        }, [disabled]);\n\n        const onIntersecting = (setVisible: (value: SetStateAction<boolean>) => void) => (\n            entries: IntersectionObserverEntry[],\n        ) => {\n            /*\n             * Пробегаемся по элементам на которых есть слушатель события появления.\n             * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости\n             */\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    setVisible(true);\n                } else {\n                    setVisible(false);\n                }\n            });\n        };\n\n        const { scrollRef, trackRef } = useCarousel({\n            index,\n            axis: 'x',\n            scrollAlign: 'start',\n            detectActive: true,\n            debounceMs: 250,\n            onIndexChange: setIndex,\n        });\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                >\n                    <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n                </StyledArrow>\n            ),\n            [onPrev],\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                >\n                    <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n                </StyledArrow>\n            ),\n            [onNext],\n        );\n\n        useEffect(() => {\n            selectionMode && setSelectionMode(selectionMode);\n            setDisabledGroup(disabled);\n        }, [selectionMode, disabled]);\n\n        useEffect(() => {\n            // Intersection observer для первого сегмента\n            const observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {\n                root: null,\n                rootMargin: '0px',\n                threshold: 0.5,\n            });\n\n            // Intersection observer для последнего сегмента\n            const observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {\n                root: null,\n                rootMargin: '0px',\n                threshold: 0.5,\n            });\n\n            // получаем список сегментов внутри SegmentGroup\n            const childrenArray = Array.from(trackRef.current?.children || []) as Array<Element>;\n            if (childrenArray.length) {\n                // подписываемся на событие появление внутри SegmentGroup\n                observeFirstItem.observe(childrenArray[0]);\n                observeLastItem.observe(childrenArray[childrenArray.length - 1]);\n            }\n\n            return () => {\n                // отписываемся от события появления внутри SegmentGroup\n                observeFirstItem.disconnect();\n                observeLastItem.disconnect();\n            };\n        }, [children]);\n\n        return (\n            <Root\n                view={view}\n                size={size}\n                id={segmentGroupId}\n                ref={outerRef}\n                filledBackground={filledBackgroundAttr}\n                disabled={disabled}\n                pilled={pilledAttr}\n                className={cx(pilledClass, filledClass, stretchClass)}\n                {...rest}\n            >\n                {!firstItemVisible && PreviousButton}\n                <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n                    <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n                </StyledContentWrapper>\n                {!lastItemVisible && NextButton}\n            </Root>\n        );\n    });\n\nexport const segmentGroupConfig = {\n    name: 'SegmentGroup',\n    tag: 'div',\n    layout: segmentGroupRoot,\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            attrs: true,\n        },\n        stretch: {\n            css: stretchCSS,\n            attrs: true,\n        },\n        filledBackground: {\n            css: filledBackgroundCSS,\n            attrs: true,\n        },\n    },\n    defaults: {\n        view: 'clear',\n        size: 'xs',\n    },\n};\n"],"names":["segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$filledBackgrou","filledBackground","_props$disabled","disabled","size","view","children","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","firstItemVisible","setFirstItemVisible","_useState5","_useState6","lastItemVisible","setLastItemVisible","uniqId","safeUseId","segmentGroupId","pilledAttr","filledBackgroundAttr","pilledClass","classes","segmentPilled","undefined","filledClass","segmentGroupFilledBackground","stretchClass","segmentStretch","items","Children","map","child","onPrev","useCallback","prevIndex","onNext","length","onIntersecting","setVisible","entries","forEach","entry","isIntersecting","_useCarousel","useCarousel","axis","scrollAlign","detectActive","debounceMs","onIndexChange","scrollRef","trackRef","PreviousButton","useMemo","React","createElement","StyledArrow","type","onClick","tabIndex","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","useEffect","_trackRef$current","observeFirstItem","IntersectionObserver","root","rootMargin","threshold","observeLastItem","childrenArray","Array","from","current","observe","disconnect","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","filledBackgroundCSS","defaults"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import './SegmentGroup.styles_6y4o38.css';
+import './SegmentGroup.styles_m9i9p0.css';
 import { styled } from '@linaria/react';
 
 var base = "b2sori2";
@@ -12,6 +12,11 @@ var StyledContentWrapper = /*#__PURE__*/styled('div')({
   "class": "spuzt9m",
   propsAsIs: false
 });
+var StyledArrow = /*#__PURE__*/styled('button')({
+  name: "StyledArrow",
+  "class": "s1qf4oye",
+  propsAsIs: false
+});
 
-export { StyledContent, StyledContentWrapper, base };
+export { StyledArrow, StyledContent, StyledContentWrapper, base };
 //# sourceMappingURL=SegmentGroup.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n\n    --plasma_private-outline-radius: var(${tokens.groupBorderRadius});\n    border-radius: var(${tokens.groupBorderRadius});\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    max-width: 100%;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    position: relative;\n    height: 100%;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper"],"mappings":";;AAKO,IAAMA,IAAI,GAOhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOzC;;;;"}
+{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    position: relative;\n    height: 100%;\n    margin: 0;\n\n    /* allows correctly display outline focus on segment item */\n    padding: 0.25rem;\n\n    /* stylelint-disable-next-line selector-max-empty-lines, selector-nested-pattern, selector-type-no-unknown */\n    ::-webkit-scrollbar {\n        display: none;\n    }\n\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scroll-snap-type: x mandatory;\n`;\n\nexport const StyledArrow = styled.button`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow"],"mappings":";;AAMO,IAAMA,IAAI,GAGhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,MAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAkBhC;;;;"}

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

@@ -0,0 +1,4 @@
+.b2sori2{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;}
+.sin9wo2{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;}
+.spuzt9m{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;}.spuzt9m::-webkit-scrollbar{display:none;}
+.s1qf4oye{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;}.s1qf4oye::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;}.s1qf4oye.focus-visible:focus::before,.s1qf4oye[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.s1qf4oye[disabled]{cursor:not-allowed;}

package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js

@@ -1,4 +1,4 @@
-import './base_a7w5s0.css';
+import './base_escgtx.css';
 var base = "b13sjoz1";
 
 export { base };

package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    position: relative;\n\n    &.${String(classes.segmentGroupFilledBackground)} {\n        &:before {\n            content: '';\n            position: absolute;\n            inset: -0.125rem;\n            background-color: var(${tokens.groupFilledBackgroundColor});\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAWhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    &.${String(classes.segmentGroupFilledBackground)} {\n        background-color: var(${tokens.groupFilledBackgroundColor});\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAIhB;;;;"}

package/es/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css

@@ -0,0 +1 @@
+.b13sjoz1.segment-group-filled-background{background-color:var(--plasma-segment-group-filled-background-color);}

package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js

@@ -1,4 +1,4 @@
-import './base_1dfesjp.css';
+import './base_m358nl.css';
 var base = "b16s69xg";
 
 export { base };

package/es/components/Segment/ui/SegmentGroup/variations/_size/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../tokens';\n\nexport const base = css`\n    width: var(${tokens.groupWidth});\n    height: var(${tokens.groupHeight});\n\n    &:before {\n        --plasma_private-outline-radius: var(${tokens.groupBorderRadius});\n        border-radius: var(${tokens.groupBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAQhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../tokens';\n\nexport const base = css`\n    width: var(${tokens.groupWidth});\n    height: var(${tokens.groupHeight});\n\n    --plasma_private-outline-radius: var(${tokens.groupBorderRadius});\n    border-radius: var(${tokens.groupBorderRadius});\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAMhB;;;;"}

package/es/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css

@@ -0,0 +1 @@
+.b16s69xg{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}

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

@@ -1,12 +1,10 @@
 .base_7kjuok_b1kyapt7__5060a19f{font-family:var(--plasma-segment-item-font-family);font-size:var(--plasma-segment-item-font-size);font-style:var(--plasma-segment-item-font-style);font-weight:var(--plasma-segment-item-font-weight);-webkit-letter-spacing:var(--plasma-segment-item-letter-spacing);-moz-letter-spacing:var(--plasma-segment-item-letter-spacing);-ms-letter-spacing:var(--plasma-segment-item-letter-spacing);letter-spacing:var(--plasma-segment-item-letter-spacing);line-height:var(--plasma-segment-item-lineheight);--plasma_private-outline-radius:var(--plasma-segment-item-border-radius);border-radius:var(--plasma-segment-item-border-radius);width:var(--plasma-segment-item-width);height:var(--plasma-segment-item-height);padding:var(--plasma-segment-item-padding);}
 
-.base_jww0qh_b1tykljf__a25b43c7{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_jww0qh_b1tykljf__a25b43c7:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_jww0qh_b1tykljf__a25b43c7:hover .base_jww0qh_r1gg7fed__a25b43c7{color:var(--plasma-segment-item-additional-color-hover);}.base_jww0qh_b1tykljf__a25b43c7.base_jww0qh_selectedSegmentItem__a25b43c7{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_jww0qh_b1tykljf__a25b43c7.base_jww0qh_selectedSegmentItem__a25b43c7 .base_jww0qh_r1gg7fed__a25b43c7{color:var(--plasma-segment-item-selected-additional-color);}.base_jww0qh_b1tykljf__a25b43c7.base_jww0qh_selectedSegmentItem__a25b43c7:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}.base_jww0qh_b1tykljf__a25b43c7.base_jww0qh_selectedSegmentItem__a25b43c7:hover .base_jww0qh_r1gg7fed__a25b43c7{color:var(--plasma-segment-item-selected-additional-color-hover);}
+.base_1m1u2ys_b1tykljf__1c5eb012{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}
 
 .base_y6af8r_bwprat9__353907e1[disabled]{cursor:not-allowed;}.base_y6af8r_bwprat9__353907e1[disabled]:hover{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_y6af8r_bwprat9__353907e1[disabled].base_y6af8r_selectedSegmentItem__353907e1:hover{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}
 
-.base_omc5u1_b795lc7__e9b122aa.base_omc5u1_segmentPilled__e9b122aa{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);padding:var(--plasma-segment-item-pilled-padding);}
+.base_15s0fel_b795lc7__4501241a.base_15s0fel_segmentPilled__4501241a{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);}
 
-.SegmentItem_styles_1s77lh9_bxcdyja__b36be36d{position:relative;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_1s77lh9_bxcdyja__b36be36d:first-child{margin-left:0;}.SegmentItem_styles_1s77lh9_bxcdyja__b36be36d::before{content:'';position:absolute;top:0.063rem;left:0.063rem;right:0.063rem;bottom:0.063rem;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;}.SegmentItem_styles_1s77lh9_bxcdyja__b36be36d.SegmentItem_styles_1s77lh9_focusVisible__b36be36d:focus::before,.SegmentItem_styles_1s77lh9_bxcdyja__b36be36d[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
-.SegmentItem_styles_1s77lh9_sxjfe87__b36be36d{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--plasma-segment-item-content-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:var(--sxjfe87-0);margin-left:var(--sxjfe87-1);}
-.SegmentItem_styles_1s77lh9_r1gg7fed__b36be36d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-segment-item-content-icon-margin);overflow:hidden;color:var(--plasma-segment-item-additional-color);}
-.SegmentItem_styles_1s77lh9_lctm1j9__b36be36d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:var(--plasma-segment-item-content-icon-margin);color:inherit;}
+.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c{position:relative;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;-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;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c:first-child{margin-left:0;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c::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;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c.SegmentItem_styles_18h1p52_focusVisible__b7ac762c:focus::before,.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
+.SegmentItem_styles_18h1p52_sxjfe87__b7ac762c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

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

@@ -8,23 +8,19 @@ 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 { LeftContent, StyledContent, RightContent, base } from './SegmentItem.styles.js';
+import { StyledContent, base } from './SegmentItem.styles.js';
 import { extractTextFrom } from '../../../../utils/extractTextFrom.js';
 
-var _excluded = ["size", "view", "id", "label", "value", "pilled", "contentLeft", "contentRight", "customHandleSelect", "skipSelection", "aria-label"];
+var _excluded = ["size", "view", "id", "label", "value", "pilled", "customHandleSelect", "aria-label"];
 var segmentItemRoot = function segmentItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
-      _props$view = props.view,
-      view = _props$view === void 0 ? 'default' : _props$view,
+      view = props.view,
       id = props.id,
       label = props.label,
       value = props.value,
       pilled = props.pilled,
-      contentLeft = props.contentLeft,
-      contentRight = props.contentRight,
       customHandleSelect = props.customHandleSelect,
-      skipSelection = props.skipSelection,
       ariaLabelExternal = props['aria-label'],
       rest = _objectWithoutProperties(props, _excluded);
     var _useSegmentInner = useSegmentInner(),
@@ -37,21 +33,17 @@ var segmentItemRoot = function segmentItemRoot(Root) {
     var ariaLabelDefault = useMemo(function () {
       return extractTextFrom(label);
     }, [label]);
-    var pilledAttr = pilled;
+    var pilledAttr = view !== 'clear' && pilled;
     var pilledClass = pilledAttr ? classes.segmentPilled : undefined;
-    var xsSize = size === 'xs' ? classes.segmentXsSize : undefined;
     var isSelected = selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.includes(value || ariaLabelDefault);
     var selectedClass = isSelected ? classes.selectedSegmentItem : undefined;
     var handleSelectSegment = useCallback(function (event) {
       if (disabledGroup) {
         return;
       }
-      if (skipSelection) {
-        return;
-      }
       customHandleSelect === null || customHandleSelect === void 0 || customHandleSelect(event);
       handleSelect === null || handleSelect === void 0 || handleSelect(value || ariaLabelDefault);
-    }, [selectionMode, disabledGroup, skipSelection]);
+    }, [selectionMode]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
@@ -60,11 +52,11 @@ var segmentItemRoot = function segmentItemRoot(Root) {
       "aria-label": ariaLabelExternal || ariaLabelDefault,
       value: value,
       pilled: pilledAttr,
-      className: cx(selectedClass, pilledClass, xsSize),
+      className: cx(selectedClass, pilledClass),
       onClick: handleSelectSegment,
       tabIndex: disabledGroup ? -1 : 0,
       disabled: disabledGroup
-    }, rest), contentLeft && /*#__PURE__*/React.createElement(LeftContent, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, null, label || value), contentRight && /*#__PURE__*/React.createElement(RightContent, null, contentRight));
+    }, rest), /*#__PURE__*/React.createElement(StyledContent, null, label || value));
   });
 };
 var segmentItemConfig = {
@@ -89,7 +81,7 @@ var segmentItemConfig = {
     }
   },
   defaults: {
-    view: 'default',
+    view: 'clear',
     size: 'xs'
   }
 };