@salutejs/plasma-new-hope 0.175.3-canary.1512.11555735717.0 → 0.176.0-canary.1452.11568379583.0

package/cjs/components/Slider/components/Single/Single.styles.js

@@ -1,4 +1,4 @@
-import './Single.styles_1r9f1e0.css';
+import './Single.styles_1h7n2s2.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -10,8 +10,8 @@ var LabelWrapper = /*#__PURE__*/react.styled('div')({
   "class": "l1p4kc08",
   propsAsIs: false
 });
-var LabelContentLeft = /*#__PURE__*/react.styled('div')({
-  name: "LabelContentLeft",
+var LabelContent = /*#__PURE__*/react.styled('div')({
+  name: "LabelContent",
   "class": "ly2gexi",
   propsAsIs: false
 });
@@ -37,7 +37,7 @@ var SingleWrapper = /*#__PURE__*/react.styled('div')({
 });
 
 exports.Label = Label;
-exports.LabelContentLeft = LabelContentLeft;
+exports.LabelContent = LabelContent;
 exports.LabelWrapper = LabelWrapper;
 exports.SingleWrapper = SingleWrapper;
 exports.SliderBaseWrapper = SliderBaseWrapper;

package/cjs/components/Slider/components/Single/Single.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Single.styles.js","sources":["../../../../../src/components/Slider/components/Single/Single.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { classes, tokens } from '../../Slider.tokens';\n\nexport const LabelWrapper = styled.div`\n    color: var(${tokens.labelColor});\n\n    display: flex;\n    gap: var(${tokens.labelWrapperGap});\n`;\n\nexport const LabelContentLeft = styled.div``;\n\nexport const Label = styled.label`\n    font-family: var(${tokens.labelFontFamily});\n    font-size: var(${tokens.labelFontSize});\n    font-style: var(${tokens.labelFontStyle});\n    font-weight: var(${tokens.labelFontWeight});\n    letter-spacing: var(${tokens.labelLetterSpacing});\n    line-height: var(${tokens.labelLineHeight});\n`;\n\nexport const StyledRangeValue = styled.span`\n    color: var(${tokens.rangeValueColor});\n    font-family: var(${tokens.rangeValueFontFamily});\n    font-size: var(${tokens.rangeValueFontSize});\n    font-style: var(${tokens.rangeValueFontStyle});\n    font-weight: var(${tokens.rangeValueFontWeight});\n    letter-spacing: var(${tokens.rangeValueLetterSpacing});\n    line-height: var(${tokens.rangeValueLineHeight});\n\n    transition: opacity 0.1s ease-in-out;\n\n    &.${classes.hideMinValue}, &.${classes.hideMaxValue} {\n        opacity: 0;\n    }\n\n    &.${classes.activeRangeValue} {\n        color: var(${tokens.labelColor});\n    }\n`;\n\nexport const SliderBaseWrapper = styled.div`\n    position: relative;\n    display: flex;\n    flex: 1;\n\n    &.${classes.rangeValuesPlacementOuter} {\n        ${StyledRangeValue} {\n            position: absolute;\n            bottom: var(${tokens.rangeValueBottomOffset});\n            left: 0;\n\n            &.${classes.maxRangeValue} {\n                left: unset;\n                right: 0;\n            }\n        }\n    }\n\n    &.${classes.rangeValuesPlacementInner} {\n        align-items: center;\n\n        ${StyledRangeValue} {\n            margin-right: var(${tokens.rangeMinValueMargin});\n\n            &.${classes.maxRangeValue} {\n                margin-right: 0;\n                margin-left: var(${tokens.rangeMaxValueMargin});\n            }\n        }\n    }\n`;\n\nexport const SingleWrapper = styled.div`\n    display: flex;\n    opacity: var(${tokens.disabledOpacity});\n\n    &.${classes.labelPlacementOuter} {\n        flex-direction: column;\n\n        ${LabelWrapper} {\n            margin-bottom: var(${tokens.labelWrapperMarginBottom});\n        }\n    }\n\n    &.${classes.labelPlacementInner} {\n        ${LabelWrapper} {\n            margin-right: var(${tokens.labelWrapperMarginRight});\n        }\n    }\n`;\n"],"names":["LabelWrapper","styled","name","class","propsAsIs","LabelContentLeft","Label","StyledRangeValue","SliderBaseWrapper","SingleWrapper"],"mappings":";;;;;;AAIO,IAAMA,YAAY,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKjC,EAAA;AAEM,IAAMC,gBAAgB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAErC,IAAME,KAAK,gBAAGL,YAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAO1B,EAAA;AAEM,IAAMG,gBAAgB,gBAAGN,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAkBrC,EAAA;AAEM,IAAMI,iBAAiB,gBAAGP,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA8BtC,EAAA;AAEM,IAAMK,aAAa,gBAAGR,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBlC;;;;;;;;;"}
+{"version":3,"file":"Single.styles.js","sources":["../../../../../src/components/Slider/components/Single/Single.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { classes, tokens } from '../../Slider.tokens';\n\nexport const LabelWrapper = styled.div`\n    color: var(${tokens.labelColor});\n\n    display: flex;\n    gap: var(${tokens.labelWrapperGap});\n`;\n\nexport const LabelContent = styled.div`\n    display: inline-flex;\n`;\n\nexport const Label = styled.label`\n    font-family: var(${tokens.labelFontFamily});\n    font-size: var(${tokens.labelFontSize});\n    font-style: var(${tokens.labelFontStyle});\n    font-weight: var(${tokens.labelFontWeight});\n    letter-spacing: var(${tokens.labelLetterSpacing});\n    line-height: var(${tokens.labelLineHeight});\n`;\n\nexport const StyledRangeValue = styled.span`\n    color: var(${tokens.rangeValueColor});\n    font-family: var(${tokens.valueFontFamily});\n    font-size: var(${tokens.valueFontSize});\n    font-style: var(${tokens.valueFontStyle});\n    font-weight: var(${tokens.valueFontWeight});\n    letter-spacing: var(${tokens.valueLetterSpacing});\n    line-height: var(${tokens.valueLineHeight});\n\n    transition: opacity 0.1s ease-in-out;\n\n    &.${classes.hideMinValue}, &.${classes.hideMaxValue} {\n        opacity: 0;\n    }\n\n    &.${classes.activeRangeValue} {\n        color: var(${tokens.labelColor});\n    }\n`;\n\nexport const SliderBaseWrapper = styled.div`\n    position: relative;\n    display: flex;\n    flex: 1;\n\n    &.${classes.rangeValuesPlacementOuter} {\n        ${StyledRangeValue} {\n            position: absolute;\n            bottom: calc(var(${tokens.railThickness}) * -1.5 - var(${tokens.rangeValueBottomOffset}));\n            left: 0;\n\n            &.${classes.maxRangeValue} {\n                left: unset;\n                right: 0;\n            }\n        }\n    }\n\n    &.${classes.rangeValuesPlacementInner} {\n        align-items: center;\n\n        ${StyledRangeValue} {\n            margin-right: var(${tokens.rangeValueHorizontalMargin});\n\n            &.${classes.maxRangeValue} {\n                margin-right: 0;\n                margin-left: var(${tokens.rangeValueHorizontalMargin});\n            }\n        }\n    }\n`;\n\nexport const SingleWrapper = styled.div`\n    display: flex;\n    opacity: var(${tokens.disabledOpacity});\n\n    &.${classes.labelPlacementOuter} {\n        flex-direction: column;\n\n        ${LabelWrapper} {\n            margin-bottom: var(${tokens.labelWrapperMarginBottom});\n        }\n    }\n\n    &.${classes.labelPlacementInner} {\n        ${LabelWrapper} {\n            margin-right: var(${tokens.labelWrapperMarginRight});\n        }\n    }\n\n    &.${classes.verticalOrientation} {\n        flex-direction: column;\n        align-items: center;\n\n        &.${classes.labelAlignCenter} {\n            ${LabelWrapper} {\n                flex-direction: column-reverse;\n            }\n\n            &.${classes.labelPlacementBottom} {\n                ${LabelWrapper} {\n                    flex-direction: column;\n                }\n\n                &.${classes.labelContentReversed} {\n                    ${LabelWrapper} {\n                        flex-direction: column-reverse;\n                    }\n                }\n            }\n\n            &.${classes.labelContentReversed} {\n                ${LabelWrapper} {\n                    flex-direction: column;\n                }\n            }\n        }\n\n        ${LabelWrapper} {\n            align-items: center;\n        }\n\n        ${SliderBaseWrapper} {\n            width: var(${tokens.size});\n        }\n\n        &.${classes.labelPlacementInner} {\n            ${LabelWrapper} {\n                margin-right: 0;\n                margin-bottom: var(${tokens.labelWrapperVerticalMargin});\n            }\n        }\n\n        &.${classes.labelAlignLeft} {\n            align-items: flex-end;\n\n            ${LabelWrapper} {\n                flex-direction: row-reverse;\n            }\n        }\n\n        &.${classes.labelAlignRight} {\n            align-items: flex-start;\n        }\n\n        &.${classes.labelPlacementBottom} {\n            flex-direction: column-reverse;\n\n            ${LabelWrapper} {\n                margin-top: var(${tokens.labelWrapperVerticalMargin});\n                margin-right: 0;\n                margin-bottom: 0;\n            }\n        }\n    }\n\n    &.${classes.verticalOrientation} {\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n\n        ${SliderBaseWrapper} {\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n        }\n\n        &.${classes.labelAlignCenter} {\n            ${StyledRangeValue} {\n                position: static;\n                bottom: 0;\n                left: 0;\n                margin-bottom: var(${tokens.rangeValueVerticalMargin});\n\n                &.${classes.maxRangeValue} {\n                    left: 0;\n                    right: 0;\n                    bottom: 0;\n                    margin-top: var(${tokens.rangeValueVerticalMargin});\n                    margin-bottom: 0;\n                }\n            }\n        }\n\n        &.${classes.labelAlignLeft}, &.${classes.labelAlignRight} {\n            ${StyledRangeValue} {\n                margin-right: 0;\n                margin-bottom: 0;\n                position: absolute;\n                top: 0;\n\n                right: calc(\n                    var(${tokens.railThickness}) / 2 + var(${tokens.size}) / 2 +\n                        var(${tokens.rangeValueHorizontalOffset})\n                );\n\n                &.${classes.maxRangeValue} {\n                    margin-right: 0;\n                    margin-left: 0;\n                    top: auto;\n                    bottom: 0;\n                }\n            }\n        }\n\n        &.${classes.labelAlignRight} {\n            ${StyledRangeValue} {\n                left: calc(var(${tokens.size}) + var(${tokens.railThickness}));\n            }\n        }\n    }\n`;\n"],"names":["LabelWrapper","styled","name","class","propsAsIs","LabelContent","Label","StyledRangeValue","SliderBaseWrapper","SingleWrapper"],"mappings":";;;;;;AAIO,IAAMA,YAAY,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKjC,EAAA;AAEM,IAAMC,YAAY,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEjC,EAAA;AAEM,IAAME,KAAK,gBAAGL,YAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAO1B,EAAA;AAEM,IAAMG,gBAAgB,gBAAGN,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAkBrC,EAAA;AAEM,IAAMI,iBAAiB,gBAAGP,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA8BtC,EAAA;AAEM,IAAMK,aAAa,gBAAGR,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA2IlC;;;;;;;;;"}

package/cjs/components/Slider/components/Single/Single.styles_1h7n2s2.css

@@ -0,0 +1,6 @@
+.l1p4kc08{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);}
+.ly2gexi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
+.lozb535{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
+.s1w9icbd{color:var(--plasma-slider-range-value-color);font-family:var(--plasma-slider-value-font-family);font-size:var(--plasma-slider-value-font-size);font-style:var(--plasma-slider-value-font-style);font-weight:var(--plasma-slider-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-value-letter-spacing);letter-spacing:var(--plasma-slider-value-letter-spacing);line-height:var(--plasma-slider-value-line-height);-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;}.s1w9icbd.slider-hide-min-value,.s1w9icbd.slider-hide-max-value{opacity:0;}.s1w9icbd.slider-active-range-value{color:var(--plasma-slider-label-color);}
+.s1d2sfgl{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}.s1d2sfgl.slider-range-values-placement-outer .s1w9icbd{position:absolute;bottom:calc(var(--plasma-slider-rail-thickness) * -1.5 - var(--plasma-slider-range-value-bottom-offset));left:0;}.s1d2sfgl.slider-range-values-placement-outer .s1w9icbd.slider-max-range-value{left:unset;right:0;}.s1d2sfgl.slider-range-values-placement-inner{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1d2sfgl.slider-range-values-placement-inner .s1w9icbd{margin-right:var(--plasma-slider-range-value-horizontal-margin);}.s1d2sfgl.slider-range-values-placement-inner .s1w9icbd.slider-max-range-value{margin-right:0;margin-left:var(--plasma-slider-range-value-horizontal-margin);}
+.ss3ujqx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:var(--plasma-slider-disabled-opacity);}.ss3ujqx.slider-label-placement-outer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.ss3ujqx.slider-label-placement-outer .l1p4kc08{margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}.ss3ujqx.slider-label-placement-inner .l1p4kc08{margin-right:var(--plasma-slider-label-wrapper-margin-right);}.ss3ujqx.slider-vertical-orientation{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ss3ujqx.slider-vertical-orientation.slider-label-align-center .l1p4kc08{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.ss3ujqx.slider-vertical-orientation.slider-label-align-center.slider-label-placement-bottom .l1p4kc08{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.ss3ujqx.slider-vertical-orientation.slider-label-align-center.slider-label-placement-bottom.slider-label-content-reversed .l1p4kc08{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.ss3ujqx.slider-vertical-orientation.slider-label-align-center.slider-label-content-reversed .l1p4kc08{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.ss3ujqx.slider-vertical-orientation .l1p4kc08{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ss3ujqx.slider-vertical-orientation .s1d2sfgl{width:var(--plasma-slider-size);}.ss3ujqx.slider-vertical-orientation.slider-label-placement-inner .l1p4kc08{margin-right:0;margin-bottom:var(--plasma-slider-label-wrapper-vertical-margin);}.ss3ujqx.slider-vertical-orientation.slider-label-align-left{-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}.ss3ujqx.slider-vertical-orientation.slider-label-align-left .l1p4kc08{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.ss3ujqx.slider-vertical-orientation.slider-label-align-right{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.ss3ujqx.slider-vertical-orientation.slider-label-placement-bottom{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.ss3ujqx.slider-vertical-orientation.slider-label-placement-bottom .l1p4kc08{margin-top:var(--plasma-slider-label-wrapper-vertical-margin);margin-right:0;margin-bottom:0;}.ss3ujqx.slider-vertical-orientation{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;}.ss3ujqx.slider-vertical-orientation .s1d2sfgl{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;}.ss3ujqx.slider-vertical-orientation.slider-label-align-center .s1w9icbd{position:static;bottom:0;left:0;margin-bottom:var(--plasma-slider-range-value-vertical-margin);}.ss3ujqx.slider-vertical-orientation.slider-label-align-center .s1w9icbd.slider-max-range-value{left:0;right:0;bottom:0;margin-top:var(--plasma-slider-range-value-vertical-margin);margin-bottom:0;}.ss3ujqx.slider-vertical-orientation.slider-label-align-left .s1w9icbd,.ss3ujqx.slider-vertical-orientation.slider-label-align-right .s1w9icbd{margin-right:0;margin-bottom:0;position:absolute;top:0;right:calc( var(--plasma-slider-rail-thickness) / 2 + var(--plasma-slider-size) / 2 + var(--plasma-slider-range-value-horizontal-offset) );}.ss3ujqx.slider-vertical-orientation.slider-label-align-left .s1w9icbd.slider-max-range-value,.ss3ujqx.slider-vertical-orientation.slider-label-align-right .s1w9icbd.slider-max-range-value{margin-right:0;margin-left:0;top:auto;bottom:0;}.ss3ujqx.slider-vertical-orientation.slider-label-align-right .s1w9icbd{left:calc(var(--plasma-slider-size) + var(--plasma-slider-rail-thickness));}

package/cjs/components/Slider/components/SliderBase/SliderBase.css

@@ -1,5 +1,5 @@
-.SliderBase_styles_9s4eb3_s33crq1__d6fac54b{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
-.SliderBase_styles_9s4eb3_rnaoqfb__d6fac54b{height:100%;}
-.SliderBase_styles_9s4eb3_r1bro5xo__d6fac54b{position:relative;top:50%;height:var(--plasma-slider-rail-height);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
-.SliderBase_styles_9s4eb3_fdg7yhg__d6fac54b{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
-.SliderBase_styles_9s4eb3_i17ya4q3__d6fac54b{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
+.SliderBase_styles_1qt1224_r33crq1__8fd7c64a{position:relative;top:50%;height:var(--plasma-slider-rail-thickness);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-size);}.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a.SliderBase_styles_1qt1224_sliderVerticalOrientation__8fd7c64a{width:var(--plasma-slider-size);height:auto;}.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a.SliderBase_styles_1qt1224_sliderVerticalOrientation__8fd7c64a .SliderBase_styles_1qt1224_r33crq1__8fd7c64a{top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:var(--plasma-slider-rail-thickness);height:100%;}
+.SliderBase_styles_1qt1224_r1bro5xo__8fd7c64a{height:100%;}
+.SliderBase_styles_1qt1224_fdg7yhg__8fd7c64a{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
+.SliderBase_styles_1qt1224_i17ya4q3__8fd7c64a{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}

package/cjs/components/Slider/components/SliderBase/SliderBase.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var Slider_tokens = require('../../Slider.tokens.js');
+var index = require('../../../../utils/index.js');
 var SliderBase_styles = require('./SliderBase.styles.js');
 var useIsomorphicLayoutEffect = require('../../../../hooks/useIsomorphicLayoutEffect.js');
 
@@ -18,6 +20,9 @@ var SliderBase = function SliderBase(_ref) {
     labelPlacement = _ref.labelPlacement,
     rangeValuesPlacement = _ref.rangeValuesPlacement,
     onChange = _ref.onChange,
+    orientation = _ref.orientation,
+    size = _ref.size,
+    sliderAlign = _ref.sliderAlign,
     _ref$settings = _ref.settings,
     settings = _ref$settings === void 0 ? {} : _ref$settings;
   var _settings$indent = settings.indent,
@@ -26,34 +31,43 @@ var SliderBase = function SliderBase(_ref) {
     fontSizeMultiplier = _settings$fontSizeMul === void 0 ? 16 : _settings$fontSizeMul;
   var ref = React.useRef(null);
   var gap = indent * fontSizeMultiplier * 2;
+  var isVertical = orientation === 'vertical';
   React.useEffect(function () {
     var resizeHandler = function resizeHandler() {
       if (ref.current) {
-        var railSize = ref.current.offsetWidth - gap;
+        var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
         var totalSteps = max - min;
         setStepSize(railSize / totalSteps);
       }
     };
     resizeHandler();
-  }, [labelPlacement, rangeValuesPlacement]);
+  }, [labelPlacement, rangeValuesPlacement, gap, isVertical,
+  // для перерасчета размеров
+  size, sliderAlign]);
   var onHandleChange = function onHandleChange(e) {
     if (!onChange || disabled) {
       return;
     }
     var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
       x = _e$currentTarget$getB.x,
-      width = _e$currentTarget$getB.width;
-    var lastX = e.clientX - x;
-    var position = min + lastX / (width - gap) * (max - min);
+      width = _e$currentTarget$getB.width,
+      y = _e$currentTarget$getB.y,
+      height = _e$currentTarget$getB.height;
+    var lastPos = isVertical ? e.clientY - y : e.clientX - x;
+    var sliderWidth = isVertical ? height : width;
+    var position = min + lastPos / (sliderWidth - gap) * (max - min);
     var result = Math.max(min, Math.min(max, position));
-    onChange(result, {
-      lastX: lastX
-    });
+    var data = isVertical ? {
+      lastY: lastPos
+    } : {
+      lastX: lastPos
+    };
+    onChange(result, data);
   };
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function () {
     var resizeHandler = function resizeHandler() {
       if (ref.current) {
-        var railSize = ref.current.offsetWidth - gap;
+        var railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;
         var totalSteps = max - min;
         setStepSize(railSize / totalSteps);
       }
@@ -63,13 +77,18 @@ var SliderBase = function SliderBase(_ref) {
     return function () {
       return window.removeEventListener('resize', resizeHandler);
     };
-  }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement]);
-  var fillStyle = {
+  }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement, isVertical]);
+  var fillStyle = isVertical ? {
+    top: "".concat(railFillXPosition, "px"),
+    height: "".concat(railFillWidth, "px"),
+    width: '100%'
+  } : {
     left: "".concat(railFillXPosition, "px"),
     width: "".concat(railFillWidth, "px")
   };
   return /*#__PURE__*/React.createElement(SliderBase_styles.Slider, {
-    ref: ref
+    ref: ref,
+    className: index.cx(orientation === 'vertical' && Slider_tokens.classes.verticalOrientation)
   }, /*#__PURE__*/React.createElement(SliderBase_styles.RailWrap, {
     "aria-hidden": "true",
     onMouseDown: onHandleChange

package/cjs/components/Slider/components/SliderBase/SliderBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderBase.js","sources":["../../../../../src/components/Slider/components/SliderBase/SliderBase.tsx"],"sourcesContent":["import React, { PropsWithChildren, useRef, MouseEventHandler, useEffect } from 'react';\nimport { DraggableData } from 'react-draggable';\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks';\n\nimport type { SliderViewProps } from './SliderBase.types';\nimport { Fill, Rail, RailWrap, Slider } from './SliderBase.styles';\n\nexport const SliderBase: React.FC<PropsWithChildren<SliderViewProps>> = ({\n    max,\n    min,\n    setStepSize,\n    railFillWidth,\n    children,\n    railFillXPosition = 0,\n    disabled,\n    labelPlacement,\n    rangeValuesPlacement,\n    onChange,\n    settings = {},\n}) => {\n    const { indent = 0.75, fontSizeMultiplier = 16 } = settings;\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const gap = indent * fontSizeMultiplier * 2;\n\n    useEffect(() => {\n        const resizeHandler = () => {\n            if (ref.current) {\n                const railSize = ref.current.offsetWidth - gap;\n                const totalSteps = max - min;\n\n                setStepSize(railSize / totalSteps);\n            }\n        };\n\n        resizeHandler();\n    }, [labelPlacement, rangeValuesPlacement]);\n\n    const onHandleChange: MouseEventHandler<HTMLDivElement> = (e) => {\n        if (!onChange || disabled) {\n            return;\n        }\n\n        const { x, width } = e.currentTarget.getBoundingClientRect();\n\n        const lastX = e.clientX - x;\n\n        const position = min + (lastX / (width - gap)) * (max - min);\n        const result = Math.max(min, Math.min(max, position));\n\n        onChange(result, { lastX } as DraggableData);\n    };\n\n    useIsomorphicLayoutEffect(() => {\n        const resizeHandler = () => {\n            if (ref.current) {\n                const railSize = ref.current.offsetWidth - gap;\n                const totalSteps = max - min;\n\n                setStepSize(railSize / totalSteps);\n            }\n        };\n\n        resizeHandler();\n        window.addEventListener('resize', resizeHandler);\n\n        return () => window.removeEventListener('resize', resizeHandler);\n    }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement]);\n\n    const fillStyle = { left: `${railFillXPosition}px`, width: `${railFillWidth}px` };\n\n    return (\n        <Slider ref={ref}>\n            <RailWrap aria-hidden=\"true\" onMouseDown={onHandleChange}>\n                <Rail>\n                    <Fill style={fillStyle} />\n                </Rail>\n            </RailWrap>\n\n            {children}\n        </Slider>\n    );\n};\n"],"names":["SliderBase","_ref","max","min","setStepSize","railFillWidth","children","_ref$railFillXPositio","railFillXPosition","disabled","labelPlacement","rangeValuesPlacement","onChange","_ref$settings","settings","_settings$indent","indent","_settings$fontSizeMul","fontSizeMultiplier","ref","useRef","gap","useEffect","resizeHandler","current","railSize","offsetWidth","totalSteps","onHandleChange","e","_e$currentTarget$getB","currentTarget","getBoundingClientRect","x","width","lastX","clientX","position","result","Math","useIsomorphicLayoutEffect","window","addEventListener","removeEventListener","fillStyle","left","concat","React","createElement","Slider","RailWrap","onMouseDown","Rail","Fill","style"],"mappings":"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"}
+{"version":3,"file":"SliderBase.js","sources":["../../../../../src/components/Slider/components/SliderBase/SliderBase.tsx"],"sourcesContent":["import React, { PropsWithChildren, useRef, MouseEventHandler, useEffect } from 'react';\nimport { DraggableData } from 'react-draggable';\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks';\nimport { classes } from '../../Slider.tokens';\nimport { cx } from '../../../../utils';\n\nimport type { SliderViewProps } from './SliderBase.types';\nimport { Fill, Rail, RailWrap, Slider } from './SliderBase.styles';\n\nexport const SliderBase: React.FC<PropsWithChildren<SliderViewProps>> = ({\n    max,\n    min,\n    setStepSize,\n    railFillWidth,\n    children,\n    railFillXPosition = 0,\n    disabled,\n    labelPlacement,\n    rangeValuesPlacement,\n    onChange,\n    orientation,\n    size,\n    sliderAlign,\n    settings = {},\n}) => {\n    const { indent = 0.75, fontSizeMultiplier = 16 } = settings;\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const gap = indent * fontSizeMultiplier * 2;\n    const isVertical = orientation === 'vertical';\n\n    useEffect(() => {\n        const resizeHandler = () => {\n            if (ref.current) {\n                const railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;\n                const totalSteps = max - min;\n\n                setStepSize(railSize / totalSteps);\n            }\n        };\n\n        resizeHandler();\n    }, [\n        labelPlacement,\n        rangeValuesPlacement,\n        gap,\n        isVertical,\n        // для перерасчета размеров\n        size,\n        sliderAlign,\n    ]);\n\n    const onHandleChange: MouseEventHandler<HTMLDivElement> = (e) => {\n        if (!onChange || disabled) {\n            return;\n        }\n\n        const { x, width, y, height } = e.currentTarget.getBoundingClientRect();\n\n        const lastPos = isVertical ? e.clientY - y : e.clientX - x;\n        const sliderWidth = isVertical ? height : width;\n\n        const position = min + (lastPos / (sliderWidth - gap)) * (max - min);\n        const result = Math.max(min, Math.min(max, position));\n\n        const data = isVertical ? { lastY: lastPos } : { lastX: lastPos };\n        onChange(result, (data as unknown) as DraggableData);\n    };\n\n    useIsomorphicLayoutEffect(() => {\n        const resizeHandler = () => {\n            if (ref.current) {\n                const railSize = isVertical ? ref.current.offsetHeight - gap : ref.current.offsetWidth - gap;\n                const totalSteps = max - min;\n\n                setStepSize(railSize / totalSteps);\n            }\n        };\n\n        resizeHandler();\n        window.addEventListener('resize', resizeHandler);\n\n        return () => window.removeEventListener('resize', resizeHandler);\n    }, [min, max, setStepSize, gap, labelPlacement, rangeValuesPlacement, isVertical]);\n\n    const fillStyle = isVertical\n        ? { top: `${railFillXPosition}px`, height: `${railFillWidth}px`, width: '100%' }\n        : { left: `${railFillXPosition}px`, width: `${railFillWidth}px` };\n\n    return (\n        <Slider ref={ref} className={cx(orientation === 'vertical' && classes.verticalOrientation)}>\n            <RailWrap aria-hidden=\"true\" onMouseDown={onHandleChange}>\n                <Rail>\n                    <Fill style={fillStyle} />\n                </Rail>\n            </RailWrap>\n\n            {children}\n        </Slider>\n    );\n};\n"],"names":["SliderBase","_ref","max","min","setStepSize","railFillWidth","children","_ref$railFillXPositio","railFillXPosition","disabled","labelPlacement","rangeValuesPlacement","onChange","orientation","size","sliderAlign","_ref$settings","settings","_settings$indent","indent","_settings$fontSizeMul","fontSizeMultiplier","ref","useRef","gap","isVertical","useEffect","resizeHandler","current","railSize","offsetHeight","offsetWidth","totalSteps","onHandleChange","e","_e$currentTarget$getB","currentTarget","getBoundingClientRect","x","width","y","height","lastPos","clientY","clientX","sliderWidth","position","result","Math","data","lastY","lastX","useIsomorphicLayoutEffect","window","addEventListener","removeEventListener","fillStyle","top","concat","left","React","createElement","Slider","className","cx","classes","verticalOrientation","RailWrap","onMouseDown","Rail","Fill","style"],"mappings":"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"}

package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js

@@ -1,22 +1,22 @@
-import './SliderBase.styles_9s4eb3.css';
+import './SliderBase.styles_1qt1224.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
 
+var Rail = /*#__PURE__*/react.styled('div')({
+  name: "Rail",
+  "class": "r33crq1",
+  propsAsIs: false
+});
 var Slider = /*#__PURE__*/react.styled('div')({
   name: "Slider",
-  "class": "s33crq1",
+  "class": "snaoqfb",
   propsAsIs: false
 });
 var RailWrap = /*#__PURE__*/react.styled('div')({
   name: "RailWrap",
-  "class": "rnaoqfb",
-  propsAsIs: false
-});
-var Rail = /*#__PURE__*/react.styled('div')({
-  name: "Rail",
   "class": "r1bro5xo",
   propsAsIs: false
 });

package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderBase.styles.js","sources":["../../../../../src/components/Slider/components/SliderBase/SliderBase.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { applyHidden } from '../../../../mixins';\nimport { tokens } from '../../Slider.tokens';\n\nexport const Slider = styled.div`\n    flex: 1;\n    position: relative;\n    user-select: none;\n    height: var(${tokens.height});\n`;\n\nexport const RailWrap = styled.div`\n    height: 100%;\n`;\n\nexport const Rail = styled.div`\n    position: relative;\n    top: 50%;\n\n    height: var(${tokens.railHeight});\n\n    border-radius: var(${tokens.railBorderRadius});\n    background-color: var(${tokens.railBackgroundColor});\n\n    overflow: hidden;\n    transform: translateY(-50%);\n`;\n\nexport const Fill = styled.div`\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: 0;\n    background: var(${tokens.fillColor});\n    width: 0;\n`;\n\nexport const InputHidden = styled.input`\n    ${applyHidden()};\n`;\n"],"names":["Slider","styled","name","class","propsAsIs","RailWrap","Rail","Fill","InputHidden"],"mappings":";;;;;;AAKO,IAAMA,MAAM,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,QAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAK3B,EAAA;AAEM,IAAMC,QAAQ,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,UAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE7B,EAAA;AAEM,IAAME,IAAI,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAWzB,EAAA;AAEM,IAAMG,IAAI,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOzB,EAAA;AAEM,IAAMI,WAAW,gBAAGP,YAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEhC;;;;;;;;"}
+{"version":3,"file":"SliderBase.styles.js","sources":["../../../../../src/components/Slider/components/SliderBase/SliderBase.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { applyHidden } from '../../../../mixins';\nimport { classes, tokens } from '../../Slider.tokens';\n\nexport const Rail = styled.div`\n    position: relative;\n    top: 50%;\n\n    height: var(${tokens.railThickness});\n\n    border-radius: var(${tokens.railBorderRadius});\n    background-color: var(${tokens.railBackgroundColor});\n\n    overflow: hidden;\n    transform: translateY(-50%);\n`;\n\nexport const Slider = styled.div`\n    flex: 1;\n    position: relative;\n    user-select: none;\n    height: var(${tokens.size});\n\n    &.${classes.verticalOrientation} {\n        width: var(${tokens.size});\n        height: auto;\n\n        ${Rail} {\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n            width: var(${tokens.railThickness});\n            height: 100%;\n        }\n    }\n`;\n\nexport const RailWrap = styled.div`\n    height: 100%;\n`;\n\nexport const Fill = styled.div`\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: 0;\n    background: var(${tokens.fillColor});\n    width: 0;\n`;\n\nexport const InputHidden = styled.input`\n    ${applyHidden()};\n`;\n"],"names":["Rail","styled","name","class","propsAsIs","Slider","RailWrap","Fill","InputHidden"],"mappings":";;;;;;AAKO,IAAMA,IAAI,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAWzB,EAAA;AAEM,IAAMC,MAAM,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,QAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAkB3B,EAAA;AAEM,IAAME,QAAQ,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,UAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE7B,EAAA;AAEM,IAAMG,IAAI,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOzB,EAAA;AAEM,IAAMI,WAAW,gBAAGP,YAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEhC;;;;;;;;"}

package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css

@@ -0,0 +1,5 @@
+.r33crq1{position:relative;top:50%;height:var(--plasma-slider-rail-thickness);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.snaoqfb{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-size);}.snaoqfb.slider-vertical-orientation{width:var(--plasma-slider-size);height:auto;}.snaoqfb.slider-vertical-orientation .r33crq1{top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:var(--plasma-slider-rail-thickness);height:100%;}
+.r1bro5xo{height:100%;}
+.fdg7yhg{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
+.i17ya4q3{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}

package/cjs/components/Slider/ui/Handler/Handler.css

@@ -1,4 +1,4 @@
-.Thumb_styles_4w4gzn_tqbdf8b__14129a5b{width:var(--plasma-slider-thumb-size);height:var(--plasma-slider-thumb-size);position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.125rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:after{background:var(--plasma-slider-thumb-border-color);margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):hover:after,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[disabled]{cursor:not-allowed;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:focus{outline:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b::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.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b.Thumb_styles_4w4gzn_focusVisible__14129a5b:focus::before,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
+.Thumb_styles_uyn20e_tqbdf8b__de0962c7{width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.0625rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:after{background:var(--plasma-slider-thumb-border-color);margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):hover:after,.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_uyn20e_tqbdf8b__de0962c7[disabled]{cursor:not-allowed;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:focus{outline:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7.Thumb_styles_uyn20e_focusVisible__de0962c7:focus::before,.Thumb_styles_uyn20e_tqbdf8b__de0962c7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
 
-.Handler_styles_8crx5z_h1tnrnip__2d4342c7{cursor:pointer;position:absolute;z-index:1;top:0;left:0;}
-.Handler_styles_8crx5z_s12uu2lj__2d4342c7{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-0.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-current-value-font-family);font-size:var(--plasma-slider-current-value-font-size);font-style:var(--plasma-slider-current-value-font-style);font-weight:var(--plasma-slider-current-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-current-value-letter-spacing);letter-spacing:var(--plasma-slider-current-value-letter-spacing);line-height:var(--plasma-slider-current-value-line-height);}
+.Handler_styles_irtcgm_s1tnrnip__e8f853c5{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-0.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-value-font-family);font-size:var(--plasma-slider-value-font-size);font-style:var(--plasma-slider-value-font-style);font-weight:var(--plasma-slider-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-value-letter-spacing);letter-spacing:var(--plasma-slider-value-letter-spacing);line-height:var(--plasma-slider-value-line-height);}
+.Handler_styles_irtcgm_h12uu2lj__e8f853c5{cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;--thumb-size:var(--h12uu2lj-0);}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderVerticalOrientation__e8f853c5{right:0;bottom:auto;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderVerticalOrientation__e8f853c5 .Handler_styles_irtcgm_s1tnrnip__e8f853c5{margin:0;top:0;bottom:0;right:0;left:calc(var(--plasma-slider-size) - (var(--plasma-slider-size) - var(--thumb-size)) / 2 + 0.25rem);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderValuePlacementLeft__e8f853c5 .Handler_styles_irtcgm_s1tnrnip__e8f853c5{left:auto;right:calc(var(--plasma-slider-size) - (var(--plasma-slider-size) - var(--thumb-size)) / 2 + 0.3125rem);-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}

package/cjs/components/Slider/ui/Handler/Handler.js

@@ -5,30 +5,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var Draggable = require('react-draggable');
-var index = require('../../utils/index.js');
+var index = require('../../../../utils/index.js');
+var index$1 = require('../../utils/index.js');
 var Thumb = require('../Thumb/Thumb.js');
+var Slider_tokens = require('../../Slider.tokens.js');
 var Handler_styles = require('./Handler.styles.js');
+var computeKeyPressData = require('./computeKeyPressData.js');
 
-var _excluded = ["stepSize", "onChangeCommitted", "onChange", "xPosition", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value"];
+var _excluded = ["size", "orientation", "stepSize", "onChangeCommitted", "onChange", "position", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value", "valuePlacement"];
 
 // TODO: PLASMA-1707
 
-var KeyboardSupport = {
-  PageUp: 33,
-  PageDown: 34,
-  End: 35,
-  Home: 36,
-  ArrowLeft: 37,
-  ArrowUp: 38,
-  ArrowRight: 39,
-  ArrowDown: 40
-};
 var Handler = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var stepSize = _ref.stepSize,
+  var size = _ref.size,
+    orientation = _ref.orientation,
+    stepSize = _ref.stepSize,
     onChangeCommitted = _ref.onChangeCommitted,
     onChange = _ref.onChange,
-    _ref$xPosition = _ref.xPosition,
-    xPosition = _ref$xPosition === void 0 ? 0 : _ref$xPosition,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 0 : _ref$position,
     min = _ref.min,
     max = _ref.max,
     _ref$bounds = _ref.bounds,
@@ -43,123 +38,89 @@ var Handler = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$endOffset = _ref.endOffset,
     endOffset = _ref$endOffset === void 0 ? 0 : _ref$endOffset,
     value = _ref.value,
+    valuePlacement = _ref.valuePlacement,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var isVertical = orientation === 'vertical';
   var lastOnChangeValue = React.useRef();
-  var _getOffsets = index.getOffsets(ref, side),
+  var _getOffsets = index$1.getOffsets(ref, side, isVertical),
     _getOffsets2 = _rollupPluginBabelHelpers.slicedToArray(_getOffsets, 2),
-    offsetLeft = _getOffsets2[0],
-    offsetRight = _getOffsets2[1];
+    startClientOffset = _getOffsets2[0],
+    endClientOffset = _getOffsets2[1];
   var _bounds = _rollupPluginBabelHelpers.slicedToArray(bounds, 2),
-    leftValueBound = _bounds[0],
-    rightValueBound = _bounds[1];
-  var leftPositionBound = leftValueBound ? (leftValueBound - min) * stepSize : null;
-  var rightPositionBound = rightValueBound ? (rightValueBound - min) * stepSize : null;
-  var position = typeof xPosition === 'number' ? {
-    x: xPosition,
-    y: 0
+    startValueBound = _bounds[0],
+    endValueBound = _bounds[1];
+  var startPositionBound = startValueBound ? (startValueBound - min) * stepSize : null;
+  var endPositionBound = endValueBound ? (endValueBound - min) * stepSize : null;
+  var dragPosition = typeof position === 'number' ? {
+    x: isVertical ? 0 : position,
+    y: isVertical ? position : 0
   } : undefined;
   var tabIndex = disabled ? -1 : 0;
-  var computedBounds = {
-    left: (leftPositionBound !== null && leftPositionBound !== void 0 ? leftPositionBound : 0) - (offsetLeft ? stepSize : 0),
-    right: (rightPositionBound !== null && rightPositionBound !== void 0 ? rightPositionBound : stepSize * (max - min)) - (offsetRight ? stepSize : 0)
-  };
-  var showCurrentValueCondition = showCurrentValue && (xPosition >= startOffset && xPosition <= max * stepSize - endOffset || xPosition === 0 && value !== 0);
+  var computedBounds = _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, isVertical ? 'top' : 'left', (startPositionBound !== null && startPositionBound !== void 0 ? startPositionBound : 0) - (startClientOffset ? stepSize : 0)), isVertical ? 'bottom' : 'right', (endPositionBound !== null && endPositionBound !== void 0 ? endPositionBound : stepSize * (max - min)) - (endClientOffset ? stepSize : 0));
+  var showCurrentValueCondition = showCurrentValue && (position >= startOffset && position <= max * stepSize - endOffset || position === 0 && value !== 0);
   var onDrag = function onDrag(_, data) {
-    var newValue = index.getSliderThumbValue(data.x, stepSize, min, max);
+    var newValue = index$1.getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);
     if (lastOnChangeValue.current !== newValue) {
       onChange === null || onChange === void 0 || onChange(newValue, data);
       lastOnChangeValue.current = newValue;
     }
   };
   var onStop = function onStop(_, data) {
-    var newValue = index.getSliderThumbValue(data.x, stepSize, min, max);
+    var newValue = index$1.getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);
     onChangeCommitted && onChangeCommitted(newValue, data);
   };
   var onKeyPress = function onKeyPress(event) {
     event.persist();
-    var keyCode = event.keyCode,
-      target = event.target;
-    if (!Object.values(KeyboardSupport).includes(keyCode)) {
-      return;
-    }
-    var ArrowUp = KeyboardSupport.ArrowUp,
-      ArrowRight = KeyboardSupport.ArrowRight,
-      ArrowDown = KeyboardSupport.ArrowDown,
-      ArrowLeft = KeyboardSupport.ArrowLeft,
-      Home = KeyboardSupport.Home,
-      End = KeyboardSupport.End,
-      PageDown = KeyboardSupport.PageDown,
-      PageUp = KeyboardSupport.PageUp;
     var computedMultipleSteps = stepSize * (rest.multipleStepSize / 100 * max);
-    var data = {
-      x: 0,
-      deltaX: stepSize,
-      lastX: xPosition,
-      y: 0,
-      deltaY: 0,
-      lastY: 0,
-      node: target
-    };
-    switch (keyCode) {
-      case ArrowUp:
-      case ArrowRight:
-        data.x = xPosition + stepSize;
-        break;
-      case ArrowDown:
-      case ArrowLeft:
-        data.x = xPosition - stepSize;
-        data.deltaX = -stepSize;
-        break;
-      case PageUp:
-        data.x = xPosition + computedMultipleSteps;
-        data.deltaX = computedMultipleSteps;
-        break;
-      case PageDown:
-        data.x = xPosition - computedMultipleSteps;
-        data.deltaX = -computedMultipleSteps;
-        break;
-      case End:
-        data.x = max * stepSize;
-        break;
-      case Home:
-        data.x = 0;
-        break;
-      default:
-        data.x = 0;
+    var data = computeKeyPressData.computeKeyPressData(event, {
+      isVertical: isVertical,
+      stepSize: stepSize,
+      position: position,
+      max: max,
+      computedMultipleSteps: computedMultipleSteps
+    });
+    if (!data) {
+      return;
     }
     var left = computedBounds.left,
-      right = computedBounds.right;
+      right = computedBounds.right,
+      top = computedBounds.top,
+      bottom = computedBounds.bottom;
 
     /*
      * INFO: Находим значение в диапазоне между указанными левой и правой границами.
+     * Или между верхней и нижней
      * Необходимо для правильного расчета положения SliderThumb.
      * см. функция clamp
      */
-    var boundedValue = Math.max(Math.min(right, data.x), left);
-    var computedValue = index.getSliderThumbValue(boundedValue, stepSize, min, max);
+    var boundedValue = isVertical ? Math.max(Math.min(bottom, data.y), top) : Math.max(Math.min(right, data.x), left);
+    var computedValue = index$1.getSliderThumbValue(boundedValue, stepSize, min, max);
     lastOnChangeValue.current = computedValue;
     onChangeCommitted && onChangeCommitted(computedValue, data);
   };
   return /*#__PURE__*/React.createElement(Draggable, {
-    axis: "x",
+    axis: isVertical ? 'y' : 'x',
     bounds: computedBounds,
-    grid: [stepSize, 1],
+    grid: isVertical ? [1, stepSize] : [stepSize, 1],
     onStop: onStop,
     onDrag: onDrag,
-    position: position,
+    position: dragPosition,
     disabled: disabled
   }, /*#__PURE__*/React.createElement(Handler_styles.HandlerStyled, {
     ref: ref,
     style: {
       zIndex: zIndex
     },
+    className: index.cx(isVertical && Slider_tokens.classes.verticalOrientation, valuePlacement === 'left' && Slider_tokens.classes.valuePlacementLeft),
+    isLarge: size === 'large',
     onKeyDown: onKeyPress
-  }, /*#__PURE__*/React.createElement(Thumb.Thumb, _rollupPluginBabelHelpers.extends({
+  }, size !== 'none' && /*#__PURE__*/React.createElement(Thumb.Thumb, _rollupPluginBabelHelpers.extends({
     tabIndex: tabIndex,
     min: min,
     max: max,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    orientation: orientation
   }, rest)), showCurrentValueCondition && /*#__PURE__*/React.createElement(Handler_styles.StyledValue, null, value)));
 });
 

package/cjs/components/Slider/ui/Handler/Handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","sources":["../../../../../src/components/Slider/ui/Handler/Handler.tsx"],"sourcesContent":["import React, { useRef, forwardRef, KeyboardEvent } from 'react';\nimport Draggable, { DraggableEventHandler } from 'react-draggable';\nimport type { DraggableData } from 'react-draggable';\n\nimport { getSliderThumbValue, getOffsets } from '../../utils';\nimport { Thumb } from '../Thumb/Thumb';\n\nimport type { HandlerProps } from './Handler.types';\nimport { HandlerStyled, StyledValue } from './Handler.styles';\n\n// TODO: PLASMA-1707\ndeclare module 'react-draggable' {\n    export interface DraggableProps {\n        children: React.ReactNode;\n    }\n}\n\nconst KeyboardSupport = {\n    PageUp: 33,\n    PageDown: 34,\n    End: 35,\n    Home: 36,\n    ArrowLeft: 37,\n    ArrowUp: 38,\n    ArrowRight: 39,\n    ArrowDown: 40,\n};\n\nexport const Handler = forwardRef<HTMLDivElement, HandlerProps>(\n    (\n        {\n            stepSize,\n            onChangeCommitted,\n            onChange,\n            xPosition = 0,\n            min,\n            max,\n            bounds = [],\n            zIndex,\n            disabled,\n            side,\n            showCurrentValue = false,\n            startOffset = 0,\n            endOffset = 0,\n            value,\n            ...rest\n        },\n        ref,\n    ) => {\n        const lastOnChangeValue = useRef<number>();\n\n        const [offsetLeft, offsetRight] = getOffsets(ref, side);\n\n        const [leftValueBound, rightValueBound] = bounds;\n        const leftPositionBound = leftValueBound ? (leftValueBound - min) * stepSize : null;\n        const rightPositionBound = rightValueBound ? (rightValueBound - min) * stepSize : null;\n\n        const position = typeof xPosition === 'number' ? { x: xPosition, y: 0 } : undefined;\n        const tabIndex = disabled ? -1 : 0;\n\n        const computedBounds = {\n            left: (leftPositionBound ?? 0) - (offsetLeft ? stepSize : 0),\n            right: (rightPositionBound ?? stepSize * (max - min)) - (offsetRight ? stepSize : 0),\n        };\n\n        const showCurrentValueCondition =\n            showCurrentValue &&\n            ((xPosition >= startOffset && xPosition <= max * stepSize - endOffset) || (xPosition === 0 && value !== 0));\n\n        const onDrag: DraggableEventHandler = (_, data) => {\n            const newValue = getSliderThumbValue(data.x, stepSize, min, max);\n            if (lastOnChangeValue.current !== newValue) {\n                onChange?.(newValue, data);\n                lastOnChangeValue.current = newValue;\n            }\n        };\n\n        const onStop: DraggableEventHandler = (_, data) => {\n            const newValue = getSliderThumbValue(data.x, stepSize, min, max);\n            onChangeCommitted && onChangeCommitted(newValue, data);\n        };\n\n        const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n            event.persist();\n\n            const { keyCode, target } = event;\n\n            if (!Object.values(KeyboardSupport).includes(keyCode)) {\n                return;\n            }\n\n            const { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Home, End, PageDown, PageUp } = KeyboardSupport;\n\n            const computedMultipleSteps = stepSize * ((rest.multipleStepSize / 100) * max);\n\n            const data: DraggableData = {\n                x: 0,\n                deltaX: stepSize,\n                lastX: xPosition,\n                y: 0,\n                deltaY: 0,\n                lastY: 0,\n                node: target as HTMLDivElement,\n            };\n\n            switch (keyCode) {\n                case ArrowUp:\n                case ArrowRight:\n                    data.x = xPosition + stepSize;\n                    break;\n                case ArrowDown:\n                case ArrowLeft:\n                    data.x = xPosition - stepSize;\n                    data.deltaX = -stepSize;\n                    break;\n                case PageUp:\n                    data.x = xPosition + computedMultipleSteps;\n                    data.deltaX = computedMultipleSteps;\n                    break;\n                case PageDown:\n                    data.x = xPosition - computedMultipleSteps;\n                    data.deltaX = -computedMultipleSteps;\n                    break;\n                case End:\n                    data.x = max * stepSize;\n                    break;\n                case Home:\n                    data.x = 0;\n                    break;\n                default:\n                    data.x = 0;\n            }\n\n            const { left, right } = computedBounds;\n\n            /*\n             * INFO: Находим значение в диапазоне между указанными левой и правой границами.\n             * Необходимо для правильного расчета положения SliderThumb.\n             * см. функция clamp\n             */\n            const boundedValue = Math.max(Math.min(right, data.x), left);\n\n            const computedValue = getSliderThumbValue(boundedValue, stepSize, min, max);\n            lastOnChangeValue.current = computedValue;\n\n            onChangeCommitted && onChangeCommitted(computedValue, data);\n        };\n\n        return (\n            <Draggable\n                axis=\"x\"\n                bounds={computedBounds}\n                grid={[stepSize, 1]}\n                onStop={onStop}\n                onDrag={onDrag}\n                position={position}\n                disabled={disabled}\n            >\n                <HandlerStyled ref={ref} style={{ zIndex }} onKeyDown={onKeyPress}>\n                    <Thumb tabIndex={tabIndex} min={min} max={max} value={value} disabled={disabled} {...rest} />\n                    {showCurrentValueCondition && <StyledValue>{value}</StyledValue>}\n                </HandlerStyled>\n            </Draggable>\n        );\n    },\n);\n"],"names":["KeyboardSupport","PageUp","PageDown","End","Home","ArrowLeft","ArrowUp","ArrowRight","ArrowDown","Handler","forwardRef","_ref","ref","stepSize","onChangeCommitted","onChange","_ref$xPosition","xPosition","min","max","_ref$bounds","bounds","zIndex","disabled","side","_ref$showCurrentValue","showCurrentValue","_ref$startOffset","startOffset","_ref$endOffset","endOffset","value","rest","_objectWithoutProperties","_excluded","lastOnChangeValue","useRef","_getOffsets","getOffsets","_getOffsets2","_slicedToArray","offsetLeft","offsetRight","_bounds","leftValueBound","rightValueBound","leftPositionBound","rightPositionBound","position","x","y","undefined","tabIndex","computedBounds","left","right","showCurrentValueCondition","onDrag","_","data","newValue","getSliderThumbValue","current","onStop","onKeyPress","event","persist","keyCode","target","Object","values","includes","computedMultipleSteps","multipleStepSize","deltaX","lastX","deltaY","lastY","node","boundedValue","Math","computedValue","React","createElement","Draggable","axis","grid","HandlerStyled","style","onKeyDown","Thumb","_extends","StyledValue"],"mappings":"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"}
+{"version":3,"file":"Handler.js","sources":["../../../../../src/components/Slider/ui/Handler/Handler.tsx"],"sourcesContent":["import React, { useRef, forwardRef, KeyboardEvent } from 'react';\nimport Draggable, { DraggableEventHandler } from 'react-draggable';\n\nimport { cx } from '../../../../utils';\nimport { getSliderThumbValue, getOffsets } from '../../utils';\nimport { Thumb } from '../Thumb/Thumb';\nimport { classes } from '../../Slider.tokens';\n\nimport type { HandlerProps } from './Handler.types';\nimport { HandlerStyled, StyledValue } from './Handler.styles';\nimport { computeKeyPressData } from './computeKeyPressData';\n\n// TODO: PLASMA-1707\ndeclare module 'react-draggable' {\n    export interface DraggableProps {\n        children: React.ReactNode;\n    }\n}\n\nexport const Handler = forwardRef<HTMLDivElement, HandlerProps>(\n    (\n        {\n            size,\n            orientation,\n            stepSize,\n            onChangeCommitted,\n            onChange,\n            position = 0,\n            min,\n            max,\n            bounds = [],\n            zIndex,\n            disabled,\n            side,\n            showCurrentValue = false,\n            startOffset = 0,\n            endOffset = 0,\n            value,\n            valuePlacement,\n            ...rest\n        },\n        ref,\n    ) => {\n        const isVertical = orientation === 'vertical';\n\n        const lastOnChangeValue = useRef<number>();\n        const [startClientOffset, endClientOffset] = getOffsets(ref, side, isVertical);\n\n        const [startValueBound, endValueBound] = bounds;\n        const startPositionBound = startValueBound ? (startValueBound - min) * stepSize : null;\n        const endPositionBound = endValueBound ? (endValueBound - min) * stepSize : null;\n\n        const dragPosition =\n            typeof position === 'number' ? { x: isVertical ? 0 : position, y: isVertical ? position : 0 } : undefined;\n        const tabIndex = disabled ? -1 : 0;\n\n        const computedBounds = {\n            [isVertical ? 'top' : 'left']: (startPositionBound ?? 0) - (startClientOffset ? stepSize : 0),\n            [isVertical ? 'bottom' : 'right']:\n                (endPositionBound ?? stepSize * (max - min)) - (endClientOffset ? stepSize : 0),\n        };\n\n        const showCurrentValueCondition =\n            showCurrentValue &&\n            ((position >= startOffset && position <= max * stepSize - endOffset) || (position === 0 && value !== 0));\n\n        const onDrag: DraggableEventHandler = (_, data) => {\n            const newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);\n            if (lastOnChangeValue.current !== newValue) {\n                onChange?.(newValue, data);\n                lastOnChangeValue.current = newValue;\n            }\n        };\n\n        const onStop: DraggableEventHandler = (_, data) => {\n            const newValue = getSliderThumbValue(isVertical ? data.y : data.x, stepSize, min, max);\n            onChangeCommitted && onChangeCommitted(newValue, data);\n        };\n\n        const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n            event.persist();\n\n            const computedMultipleSteps = stepSize * ((rest.multipleStepSize / 100) * max);\n\n            const data = computeKeyPressData(event, {\n                isVertical,\n                stepSize,\n                position,\n                max,\n                computedMultipleSteps,\n            });\n\n            if (!data) {\n                return;\n            }\n\n            const { left, right, top, bottom } = computedBounds;\n\n            /*\n             * INFO: Находим значение в диапазоне между указанными левой и правой границами.\n             * Или между верхней и нижней\n             * Необходимо для правильного расчета положения SliderThumb.\n             * см. функция clamp\n             */\n            const boundedValue = isVertical\n                ? Math.max(Math.min(bottom, data.y), top)\n                : Math.max(Math.min(right, data.x), left);\n\n            const computedValue = getSliderThumbValue(boundedValue, stepSize, min, max);\n            lastOnChangeValue.current = computedValue;\n\n            onChangeCommitted && onChangeCommitted(computedValue, data);\n        };\n\n        return (\n            <Draggable\n                axis={isVertical ? 'y' : 'x'}\n                bounds={computedBounds}\n                grid={isVertical ? [1, stepSize] : [stepSize, 1]}\n                onStop={onStop}\n                onDrag={onDrag}\n                position={dragPosition}\n                disabled={disabled}\n            >\n                <HandlerStyled\n                    ref={ref}\n                    style={{ zIndex }}\n                    className={cx(\n                        isVertical && classes.verticalOrientation,\n                        valuePlacement === 'left' && classes.valuePlacementLeft,\n                    )}\n                    isLarge={size === 'large'}\n                    onKeyDown={onKeyPress}\n                >\n                    {size !== 'none' && (\n                        <Thumb\n                            tabIndex={tabIndex}\n                            min={min}\n                            max={max}\n                            value={value}\n                            disabled={disabled}\n                            orientation={orientation}\n                            {...rest}\n                        />\n                    )}\n                    {showCurrentValueCondition && <StyledValue>{value}</StyledValue>}\n                </HandlerStyled>\n            </Draggable>\n        );\n    },\n);\n"],"names":["Handler","forwardRef","_ref","ref","size","orientation","stepSize","onChangeCommitted","onChange","_ref$position","position","min","max","_ref$bounds","bounds","zIndex","disabled","side","_ref$showCurrentValue","showCurrentValue","_ref$startOffset","startOffset","_ref$endOffset","endOffset","value","valuePlacement","rest","_objectWithoutProperties","_excluded","isVertical","lastOnChangeValue","useRef","_getOffsets","getOffsets","_getOffsets2","_slicedToArray","startClientOffset","endClientOffset","_bounds","startValueBound","endValueBound","startPositionBound","endPositionBound","dragPosition","x","y","undefined","tabIndex","computedBounds","_defineProperty","showCurrentValueCondition","onDrag","_","data","newValue","getSliderThumbValue","current","onStop","onKeyPress","event","persist","computedMultipleSteps","multipleStepSize","computeKeyPressData","left","right","top","bottom","boundedValue","Math","computedValue","React","createElement","Draggable","axis","grid","HandlerStyled","style","className","cx","classes","verticalOrientation","valuePlacementLeft","isLarge","onKeyDown","Thumb","_extends","StyledValue"],"mappings":";;;;;;;;;;;;;;;;AAYA;;AAOO,IAAMA,OAAO,gBAAGC,gBAAU,CAC7B,UAAAC,IAAA,EAqBIC,GAAG,EACF;AAAA,EAAA,IApBGC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,iBAAiB,GAAAL,IAAA,CAAjBK,iBAAiB;IACjBC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAAC,aAAA,GAAAP,IAAA,CACRQ,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,aAAA;IACZE,GAAG,GAAAT,IAAA,CAAHS,GAAG;IACHC,GAAG,GAAAV,IAAA,CAAHU,GAAG;IAAAC,WAAA,GAAAX,IAAA,CACHY,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,WAAA;IACXE,MAAM,GAAAb,IAAA,CAANa,MAAM;IACNC,QAAQ,GAAAd,IAAA,CAARc,QAAQ;IACRC,IAAI,GAAAf,IAAA,CAAJe,IAAI;IAAAC,qBAAA,GAAAhB,IAAA,CACJiB,gBAAgB;AAAhBA,IAAAA,gBAAgB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;IAAAE,gBAAA,GAAAlB,IAAA,CACxBmB,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,gBAAA;IAAAE,cAAA,GAAApB,IAAA,CACfqB,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA;IACbE,KAAK,GAAAtB,IAAA,CAALsB,KAAK;IACLC,cAAc,GAAAvB,IAAA,CAAduB,cAAc;AACXC,IAAAA,IAAI,GAAAC,iDAAA,CAAAzB,IAAA,EAAA0B,SAAA,CAAA,CAAA;AAIX,EAAA,IAAMC,UAAU,GAAGxB,WAAW,KAAK,UAAU,CAAA;AAE7C,EAAA,IAAMyB,iBAAiB,GAAGC,YAAM,EAAU,CAAA;EAC1C,IAAAC,WAAA,GAA6CC,kBAAU,CAAC9B,GAAG,EAAEc,IAAI,EAAEY,UAAU,CAAC;IAAAK,YAAA,GAAAC,uCAAA,CAAAH,WAAA,EAAA,CAAA,CAAA;AAAvEI,IAAAA,iBAAiB,GAAAF,YAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,YAAA,CAAA,CAAA,CAAA,CAAA;AAEzC,EAAA,IAAAI,OAAA,GAAAH,uCAAA,CAAyCrB,MAAM,EAAA,CAAA,CAAA;AAAxCyB,IAAAA,eAAe,GAAAD,OAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,aAAa,GAAAF,OAAA,CAAA,CAAA,CAAA,CAAA;EACrC,IAAMG,kBAAkB,GAAGF,eAAe,GAAG,CAACA,eAAe,GAAG5B,GAAG,IAAIL,QAAQ,GAAG,IAAI,CAAA;EACtF,IAAMoC,gBAAgB,GAAGF,aAAa,GAAG,CAACA,aAAa,GAAG7B,GAAG,IAAIL,QAAQ,GAAG,IAAI,CAAA;AAEhF,EAAA,IAAMqC,YAAY,GACd,OAAOjC,QAAQ,KAAK,QAAQ,GAAG;AAAEkC,IAAAA,CAAC,EAAEf,UAAU,GAAG,CAAC,GAAGnB,QAAQ;AAAEmC,IAAAA,CAAC,EAAEhB,UAAU,GAAGnB,QAAQ,GAAG,CAAA;AAAE,GAAC,GAAGoC,SAAS,CAAA;AAC7G,EAAA,IAAMC,QAAQ,GAAG/B,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;EAElC,IAAMgC,cAAc,GAAAC,wCAAA,CAAAA,wCAAA,KACfpB,UAAU,GAAG,KAAK,GAAG,MAAM,EAAG,CAACY,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAlBA,kBAAkB,GAAI,CAAC,KAAKL,iBAAiB,GAAG9B,QAAQ,GAAG,CAAC,CAAC,GAC5FuB,UAAU,GAAG,QAAQ,GAAG,OAAO,EAC5B,CAACa,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAA,KAAA,CAAA,GAAhBA,gBAAgB,GAAIpC,QAAQ,IAAIM,GAAG,GAAGD,GAAG,CAAC,KAAK0B,eAAe,GAAG/B,QAAQ,GAAG,CAAC,CAAC,CACtF,CAAA;EAED,IAAM4C,yBAAyB,GAC3B/B,gBAAgB,KACdT,QAAQ,IAAIW,WAAW,IAAIX,QAAQ,IAAIE,GAAG,GAAGN,QAAQ,GAAGiB,SAAS,IAAMb,QAAQ,KAAK,CAAC,IAAIc,KAAK,KAAK,CAAE,CAAC,CAAA;EAE5G,IAAM2B,MAA6B,GAAG,SAAhCA,MAA6BA,CAAIC,CAAC,EAAEC,IAAI,EAAK;AAC/C,IAAA,IAAMC,QAAQ,GAAGC,2BAAmB,CAAC1B,UAAU,GAAGwB,IAAI,CAACR,CAAC,GAAGQ,IAAI,CAACT,CAAC,EAAEtC,QAAQ,EAAEK,GAAG,EAAEC,GAAG,CAAC,CAAA;AACtF,IAAA,IAAIkB,iBAAiB,CAAC0B,OAAO,KAAKF,QAAQ,EAAE;MACxC9C,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAG8C,QAAQ,EAAED,IAAI,CAAC,CAAA;MAC1BvB,iBAAiB,CAAC0B,OAAO,GAAGF,QAAQ,CAAA;AACxC,KAAA;GACH,CAAA;EAED,IAAMG,MAA6B,GAAG,SAAhCA,MAA6BA,CAAIL,CAAC,EAAEC,IAAI,EAAK;AAC/C,IAAA,IAAMC,QAAQ,GAAGC,2BAAmB,CAAC1B,UAAU,GAAGwB,IAAI,CAACR,CAAC,GAAGQ,IAAI,CAACT,CAAC,EAAEtC,QAAQ,EAAEK,GAAG,EAAEC,GAAG,CAAC,CAAA;AACtFL,IAAAA,iBAAiB,IAAIA,iBAAiB,CAAC+C,QAAQ,EAAED,IAAI,CAAC,CAAA;GACzD,CAAA;AAED,EAAA,IAAMK,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;IACzDA,KAAK,CAACC,OAAO,EAAE,CAAA;IAEf,IAAMC,qBAAqB,GAAGvD,QAAQ,IAAKoB,IAAI,CAACoC,gBAAgB,GAAG,GAAG,GAAIlD,GAAG,CAAC,CAAA;AAE9E,IAAA,IAAMyC,IAAI,GAAGU,uCAAmB,CAACJ,KAAK,EAAE;AACpC9B,MAAAA,UAAU,EAAVA,UAAU;AACVvB,MAAAA,QAAQ,EAARA,QAAQ;AACRI,MAAAA,QAAQ,EAARA,QAAQ;AACRE,MAAAA,GAAG,EAAHA,GAAG;AACHiD,MAAAA,qBAAqB,EAArBA,qBAAAA;AACJ,KAAC,CAAC,CAAA;IAEF,IAAI,CAACR,IAAI,EAAE;AACP,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAQW,IAAI,GAAyBhB,cAAc,CAA3CgB,IAAI;MAAEC,KAAK,GAAkBjB,cAAc,CAArCiB,KAAK;MAAEC,GAAG,GAAalB,cAAc,CAA9BkB,GAAG;MAAEC,MAAM,GAAKnB,cAAc,CAAzBmB,MAAM,CAAA;;AAEhC;AACZ;AACA;AACA;AACA;AACA;AACY,IAAA,IAAMC,YAAY,GAAGvC,UAAU,GACzBwC,IAAI,CAACzD,GAAG,CAACyD,IAAI,CAAC1D,GAAG,CAACwD,MAAM,EAAEd,IAAI,CAACR,CAAC,CAAC,EAAEqB,GAAG,CAAC,GACvCG,IAAI,CAACzD,GAAG,CAACyD,IAAI,CAAC1D,GAAG,CAACsD,KAAK,EAAEZ,IAAI,CAACT,CAAC,CAAC,EAAEoB,IAAI,CAAC,CAAA;IAE7C,IAAMM,aAAa,GAAGf,2BAAmB,CAACa,YAAY,EAAE9D,QAAQ,EAAEK,GAAG,EAAEC,GAAG,CAAC,CAAA;IAC3EkB,iBAAiB,CAAC0B,OAAO,GAAGc,aAAa,CAAA;AAEzC/D,IAAAA,iBAAiB,IAAIA,iBAAiB,CAAC+D,aAAa,EAAEjB,IAAI,CAAC,CAAA;GAC9D,CAAA;AAED,EAAA,oBACIkB,KAAA,CAAAC,aAAA,CAACC,SAAS,EAAA;AACNC,IAAAA,IAAI,EAAE7C,UAAU,GAAG,GAAG,GAAG,GAAI;AAC7Bf,IAAAA,MAAM,EAAEkC,cAAe;AACvB2B,IAAAA,IAAI,EAAE9C,UAAU,GAAG,CAAC,CAAC,EAAEvB,QAAQ,CAAC,GAAG,CAACA,QAAQ,EAAE,CAAC,CAAE;AACjDmD,IAAAA,MAAM,EAAEA,MAAO;AACfN,IAAAA,MAAM,EAAEA,MAAO;AACfzC,IAAAA,QAAQ,EAAEiC,YAAa;AACvB3B,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,eAEnBuD,KAAA,CAAAC,aAAA,CAACI,4BAAa,EAAA;AACVzE,IAAAA,GAAG,EAAEA,GAAI;AACT0E,IAAAA,KAAK,EAAE;AAAE9D,MAAAA,MAAM,EAANA,MAAAA;KAAS;AAClB+D,IAAAA,SAAS,EAAEC,QAAE,CACTlD,UAAU,IAAImD,qBAAO,CAACC,mBAAmB,EACzCxD,cAAc,KAAK,MAAM,IAAIuD,qBAAO,CAACE,kBACzC,CAAE;IACFC,OAAO,EAAE/E,IAAI,KAAK,OAAQ;AAC1BgF,IAAAA,SAAS,EAAE1B,UAAAA;GAEVtD,EAAAA,IAAI,KAAK,MAAM,iBACZmE,KAAA,CAAAC,aAAA,CAACa,WAAK,EAAAC,iCAAA,CAAA;AACFvC,IAAAA,QAAQ,EAAEA,QAAS;AACnBpC,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,KAAK,EAAEA,KAAM;AACbR,IAAAA,QAAQ,EAAEA,QAAS;AACnBX,IAAAA,WAAW,EAAEA,WAAAA;AAAY,GAAA,EACrBqB,IAAI,CACX,CACJ,EACAwB,yBAAyB,iBAAIqB,KAAA,CAAAC,aAAA,CAACe,0BAAW,EAAA,IAAA,EAAE/D,KAAmB,CACpD,CACR,CAAC,CAAA;AAEpB,CACJ;;;;"}

package/cjs/components/Slider/ui/Handler/Handler.styles.js

@@ -1,20 +1,30 @@
-import './Handler.styles_8crx5z.css';
+import './Handler.styles_irtcgm.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
+var Slider_tokens = require('../../Slider.tokens.js');
 
-var HandlerStyled = /*#__PURE__*/react.styled('div')({
-  name: "HandlerStyled",
-  "class": "h1tnrnip",
-  propsAsIs: false
-});
 var StyledValue = /*#__PURE__*/react.styled('span')({
   name: "StyledValue",
-  "class": "s12uu2lj",
+  "class": "s1tnrnip",
   propsAsIs: false
 });
+var _exp8 = function _exp8() {
+  return function (_ref) {
+    var isLarge = _ref.isLarge;
+    return isLarge ? "var(".concat(Slider_tokens.tokens.thumbSizeLarge, ")") : "var(".concat(Slider_tokens.tokens.thumbSize, ")");
+  };
+};
+var HandlerStyled = /*#__PURE__*/react.styled('div')({
+  name: "HandlerStyled",
+  "class": "h12uu2lj",
+  propsAsIs: false,
+  vars: {
+    "h12uu2lj-0": [/*#__PURE__*/_exp8()]
+  }
+});
 
 exports.HandlerStyled = HandlerStyled;
 exports.StyledValue = StyledValue;