@consta/uikit 4.9.0 → 4.11.0

package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.d.ts

@@ -43,5 +43,17 @@ export declare type DatePickerFieldTypeYearProps = PropsWithHTMLAttributes<{
     labelPosition?: 'top' | 'left';
     withClearButton?: boolean;
 }, HTMLDivElement>;
-export declare const useImask: (formatProp: string, separator: string, inputRef: React.RefObject<HTMLInputElement>, stringValue: string | null, onError: DatePickerPropOnError | undefined) => void;
+declare type UsePickerProps = {
+    value?: Date | null;
+    onChange?: DatePickerFieldTypeYearPropOnChange;
+    onError?: DatePickerPropOnError;
+    format: string;
+    separator: string;
+    minDate: Date;
+    maxDate: Date;
+};
+export declare const usePicker: (props: UsePickerProps) => {
+    stringValue: string | null;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+};
 export {};

package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{format as _format,isValid,parse as _parse}from"date-fns";import IMask from"imask";import{useEffect,useRef}from"react";import{datePickerPropFormatTypeYear,getPartsDate}from"../helpers";import{datePickerErrorTypes}from"../types";export var useImask=function(a,b,c,d,e){var f=useRef(null);useEffect(function(){c.current&&(f.current=IMask(c.current,{mask:Date,pattern:a,blocks:{yyyy:{mask:IMask.MaskedRange,from:1,to:9999}},lazy:!0,autofix:!0,format:function format(b){return _format(b,a)},parse:function parse(b){return _parse(b,a,new Date)},validate:function validate(c){var d=getPartsDate(c,a,b,!1,["yyyy"]),f=_slicedToArray(d,1),g=f[0];return!g||isValid(_parse("".concat(g),datePickerPropFormatTypeYear,new Date))||(e&&e({type:datePickerErrorTypes[1],stringValue:c,yyyy:g}),!1)}}))},[a,b]),useEffect(function(){var a;null===(a=f.current)||void 0===a?void 0:a.updateValue()},[d])};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{format as _format,isValid,isWithinInterval,parse as _parse}from"date-fns";import IMask from"imask";import{useCallback,useEffect,useMemo,useState}from"react";import{useIMask}from"../../TextField";import{useMutableRef}from"../../../hooks/useMutableRef";import{datePickerPropFormatTypeYear,getPartsDate}from"../helpers";import{datePickerErrorTypes}from"../types";export var usePicker=function(a){var b=a.value,c=a.onChange,d=a.onError,f=a.format,g=a.separator,h=a.maxDate,i=a.minDate,j=useMutableRef(c),k=useMutableRef(b),l=useMutableRef(d),m=useState(b&&isValid(b)?_format(b,f):null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useMutableRef(o),r=useCallback(function(a){var b=a.e,c=a.value;if(q.current!==c){p(c);var d=j.current,e=k.current;if(d){if(!c)return void(e&&d({e:b,value:null}));var m=getPartsDate(c,f,g,!1,["yyyy"]),n=_slicedToArray(m,1),o=n[0];if(o){var s=_parse("".concat(o),datePickerPropFormatTypeYear,new Date);if(!isWithinInterval(s,{start:i,end:h})){var r;return null===(r=l.current)||void 0===r?void 0:r.call(l,{type:datePickerErrorTypes[0],stringValue:c,yyyy:o,date:s}),void(e&&d({e:b,value:null}))}d({e:b,value:s})}else e&&d({e:b,value:null})}}},[null===i||void 0===i?void 0:i.getTime(),null===h||void 0===h?void 0:h.getTime(),f,g]),s=useMemo(function(){return{mask:Date,pattern:f,blocks:{yyyy:{mask:IMask.MaskedRange,from:1,to:9999}},lazy:!0,autofix:!0,format:function format(a){return _format(a,f)},parse:function parse(a){return _parse(a,f,new Date)},validate:function validate(a){var b=getPartsDate(a,f,g,!1,["yyyy"]),c=_slicedToArray(b,1),e=c[0];return!e||isValid(_parse("".concat(e),datePickerPropFormatTypeYear,new Date))||(d&&d({type:datePickerErrorTypes[1],stringValue:a,yyyy:e}),!1)}}},[f,g]),t=useIMask({value:o,onChange:function(a,b){return null===r||void 0===r?void 0:r(b)},maskOptions:s}),u=t.inputRef;return useEffect(function(){b&&isValid(b)?p(_format(b,f)):(null===o||void 0===o?void 0:o.length)===f.length&&p("")},[null===b||void 0===b?void 0:b.getTime()]),{stringValue:o,inputRef:u}};
 //# sourceMappingURL=helpers.js.map

package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["format","isValid","parse","IMask","useEffect","useRef","datePickerPropFormatTypeYear","getPartsDate","datePickerErrorTypes","useImask","formatProp","separator","inputRef","stringValue","onError","imaskRef","current","mask","Date","pattern","blocks","yyyy","MaskedRange","from","to","lazy","autofix","date","string","validate","type","updateValue"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeYear/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport { format, isValid, parse } from 'date-fns';\nimport IMask from 'imask';\nimport { useEffect, useRef } from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n  TextFieldPropForm,\n  TextFieldPropSize,\n  TextFieldPropStatus,\n  TextFieldPropView,\n  TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport { datePickerPropFormatTypeYear, getPartsDate } from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeYearPropOnChange = (props: {\n  e: Event;\n  value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeYearProps = PropsWithHTMLAttributes<\n  {\n    className?: string;\n    value?: Date | null;\n    onChange?: DatePickerFieldTypeYearPropOnChange;\n    onError?: DatePickerPropOnError;\n    id?: string;\n    name?: string;\n    disabled?: boolean;\n    size?: TextFieldPropSize;\n    view?: TextFieldPropView;\n    form?: TextFieldPropForm;\n    status?: TextFieldPropStatus;\n    width?: TextFieldPropWidth;\n    onFocus?: React.FocusEventHandler<HTMLElement>;\n    onBlur?: React.FocusEventHandler<HTMLElement>;\n    autoFocus?: boolean;\n    placeholder?: string;\n    leftSide?: string | IconComponent;\n    rightSide?: string | IconComponent;\n    readOnly?: boolean;\n    required?: boolean;\n    tabIndex?: number;\n    inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n    ariaLabel?: string;\n    iconSize?: IconPropSize;\n    children?: never;\n    format?: string;\n    separator?: string;\n    minDate?: Date;\n    maxDate?: Date;\n    focused?: boolean;\n    label?: string;\n    caption?: string;\n    labelPosition?: 'top' | 'left';\n    withClearButton?: boolean;\n  },\n  HTMLDivElement\n>;\n\nexport const useImask = (\n  formatProp: string,\n  separator: string,\n  inputRef: React.RefObject<HTMLInputElement>,\n  stringValue: string | null,\n  onError: DatePickerPropOnError | undefined,\n) => {\n  const imaskRef = useRef<IMask.InputMask<IMask.MaskedDateOptions> | null>(\n    null,\n  );\n\n  // задаем маску и сохраняем обьект маски в ref\n  // обнавляем при смене формата\n  useEffect(() => {\n    if (inputRef.current) {\n      imaskRef.current = IMask(inputRef.current, {\n        mask: Date,\n        pattern: formatProp,\n        blocks: {\n          yyyy: {\n            mask: IMask.MaskedRange,\n            from: 1,\n            to: 9999,\n          },\n        },\n        lazy: true,\n        autofix: true,\n        format: (date) => format(date, formatProp),\n        parse: (string) => parse(string, formatProp, new Date()),\n        validate: (string: string) => {\n          const [yyyy] = getPartsDate(string, formatProp, separator, false, [\n            'yyyy',\n          ]);\n\n          if (\n            yyyy &&\n            !isValid(parse(`${yyyy}`, datePickerPropFormatTypeYear, new Date()))\n          ) {\n            onError &&\n              onError({\n                type: datePickerErrorTypes[1],\n                stringValue: string,\n                yyyy,\n              });\n\n            return false;\n          }\n\n          return true;\n        },\n        // проблема в типах IMask\n      }) as unknown as IMask.InputMask<IMask.MaskedDateOptions>;\n    }\n  }, [formatProp, separator]);\n\n  // Нужно для синхранизации value c Imask,\n  // так как value мы можем задать через пропс без самого ввода,\n  // и Imask требует ручной синхронихации в этом случае\n  useEffect(() => {\n    imaskRef.current?.updateValue();\n  }, [stringValue]);\n};\n"],"mappings":"iEACA,OAASA,MAAM,GAANA,QAAT,CAAiBC,OAAjB,CAA0BC,KAAK,GAALA,OAA1B,KAAuC,UAAvC,CACA,MAAOC,MAAP,KAAkB,OAAlB,CACA,OAASC,SAAT,CAAoBC,MAApB,KAAkC,OAAlC,CAUA,OAASC,4BAAT,CAAuCC,YAAvC,kBACA,OAASC,oBAAT,gBA+CA,MAAO,IAAMC,SAAQ,CAAG,SACtBC,CADsB,CAEtBC,CAFsB,CAGtBC,CAHsB,CAItBC,CAJsB,CAKtBC,CALsB,CAMnB,CACH,GAAMC,EAAQ,CAAGV,MAAM,CACrB,IADqB,CAAvB,CAMAD,SAAS,CAAC,UAAM,CACVQ,CAAQ,CAACI,OADC,GAEZD,CAAQ,CAACC,OAAT,CAAmBb,KAAK,CAACS,CAAQ,CAACI,OAAV,CAAmB,CACzCC,IAAI,CAAEC,IADmC,CAEzCC,OAAO,CAAET,CAFgC,CAGzCU,MAAM,CAAE,CACNC,IAAI,CAAE,CACJJ,IAAI,CAAEd,KAAK,CAACmB,WADR,CAEJC,IAAI,CAAE,CAFF,CAGJC,EAAE,CAAE,IAHA,CADA,CAHiC,CAUzCC,IAAI,GAVqC,CAWzCC,OAAO,GAXkC,CAYzC1B,MAAM,CAAE,gBAAC2B,CAAD,QAAU3B,QAAM,CAAC2B,CAAD,CAAOjB,CAAP,CAAhB,CAZiC,CAazCR,KAAK,CAAE,eAAC0B,CAAD,QAAY1B,OAAK,CAAC0B,CAAD,CAASlB,CAAT,CAAqB,GAAIQ,KAAzB,CAAjB,CAbkC,CAczCW,QAAQ,CAAE,kBAACD,CAAD,CAAoB,CAC5B,MAAerB,YAAY,CAACqB,CAAD,CAASlB,CAAT,CAAqBC,CAArB,IAAuC,CAChE,MADgE,CAAvC,CAA3B,uBAAOU,CAAP,MAD4B,MAM1B,CAAAA,CAAI,EACHpB,OAAO,CAACC,MAAK,WAAImB,CAAJ,EAAYf,4BAAZ,CAA0C,GAAIY,KAA9C,CAAN,CAPkB,GAS1BJ,CAAO,EACLA,CAAO,CAAC,CACNgB,IAAI,CAAEtB,oBAAoB,CAAC,CAAD,CADpB,CAENK,WAAW,CAAEe,CAFP,CAGNP,IAAI,CAAJA,CAHM,CAAD,CAViB,IAoB7B,CAlCwC,CAAnB,CAFZ,CAwCf,CAxCQ,CAwCN,CAACX,CAAD,CAAaC,CAAb,CAxCM,CAPN,CAoDHP,SAAS,CAAC,UAAM,iBACdW,CAAQ,CAACC,OADK,qBACd,EAAkBe,WAAlB,EACD,CAFQ,CAEN,CAAClB,CAAD,CAFM,CAGV,CA7DM"}
+{"version":3,"file":"helpers.js","names":["format","isValid","isWithinInterval","parse","IMask","useCallback","useEffect","useMemo","useState","useIMask","useMutableRef","datePickerPropFormatTypeYear","getPartsDate","datePickerErrorTypes","usePicker","props","value","onChange","onError","formatProp","separator","maxDate","minDate","onChangeRef","valueRef","onErrorRef","stringValue","setStringValue","stringValueRef","handleChange","e","current","yyyy","date","Date","start","end","type","getTime","options","mask","pattern","blocks","MaskedRange","from","to","lazy","autofix","string","validate","_val","params","maskOptions","inputRef","length"],"sources":["../../../../../../src/components/DatePicker/DatePickerFieldTypeYear/helpers.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport { format, isValid, isWithinInterval, parse } from 'date-fns';\nimport IMask from 'imask';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useIMask } from '##/components/TextField';\nimport { useMutableRef } from '##/hooks/useMutableRef';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport {\n  TextFieldPropForm,\n  TextFieldPropSize,\n  TextFieldPropStatus,\n  TextFieldPropView,\n  TextFieldPropWidth,\n} from '../../TextField/TextField';\nimport { datePickerPropFormatTypeYear, getPartsDate } from '../helpers';\nimport { datePickerErrorTypes, DatePickerPropOnError } from '../types';\n\ntype DatePickerFieldTypeYearPropOnChange = (props: {\n  e: Event;\n  value: Date | null;\n}) => void;\n\nexport type DatePickerFieldTypeYearProps = PropsWithHTMLAttributes<\n  {\n    className?: string;\n    value?: Date | null;\n    onChange?: DatePickerFieldTypeYearPropOnChange;\n    onError?: DatePickerPropOnError;\n    id?: string;\n    name?: string;\n    disabled?: boolean;\n    size?: TextFieldPropSize;\n    view?: TextFieldPropView;\n    form?: TextFieldPropForm;\n    status?: TextFieldPropStatus;\n    width?: TextFieldPropWidth;\n    onFocus?: React.FocusEventHandler<HTMLElement>;\n    onBlur?: React.FocusEventHandler<HTMLElement>;\n    autoFocus?: boolean;\n    placeholder?: string;\n    leftSide?: string | IconComponent;\n    rightSide?: string | IconComponent;\n    readOnly?: boolean;\n    required?: boolean;\n    tabIndex?: number;\n    inputRef?: React.Ref<HTMLTextAreaElement | HTMLInputElement>;\n    ariaLabel?: string;\n    iconSize?: IconPropSize;\n    children?: never;\n    format?: string;\n    separator?: string;\n    minDate?: Date;\n    maxDate?: Date;\n    focused?: boolean;\n    label?: string;\n    caption?: string;\n    labelPosition?: 'top' | 'left';\n    withClearButton?: boolean;\n  },\n  HTMLDivElement\n>;\n\ntype UsePickerProps = {\n  value?: Date | null;\n  onChange?: DatePickerFieldTypeYearPropOnChange;\n  onError?: DatePickerPropOnError;\n  format: string;\n  separator: string;\n  minDate: Date;\n  maxDate: Date;\n};\n\nexport const usePicker = (props: UsePickerProps) => {\n  const {\n    value,\n    onChange,\n    onError,\n    format: formatProp,\n    separator,\n    maxDate,\n    minDate,\n  } = props;\n  const onChangeRef = useMutableRef(onChange);\n  const valueRef = useMutableRef(value);\n  const onErrorRef = useMutableRef(onError);\n\n  const [stringValue, setStringValue] = useState<string | null>(\n    value && isValid(value) ? format(value, formatProp) : null,\n  );\n  const stringValueRef = useMutableRef(stringValue);\n\n  const handleChange = useCallback(\n    ({ e, value: stringValue }: { e: Event; value: string | null }) => {\n      if (stringValueRef.current === stringValue) {\n        return;\n      }\n\n      setStringValue(stringValue);\n\n      const onChange = onChangeRef.current;\n      const value = valueRef.current;\n\n      if (onChange) {\n        if (!stringValue) {\n          if (value) {\n            onChange({ e, value: null });\n          }\n          return;\n        }\n\n        const [yyyy] = getPartsDate(stringValue, formatProp, separator, false, [\n          'yyyy',\n        ]);\n\n        if (yyyy) {\n          const date = parse(\n            `${yyyy}`,\n            datePickerPropFormatTypeYear,\n            new Date(),\n          );\n          if (!isWithinInterval(date, { start: minDate, end: maxDate })) {\n            onErrorRef.current?.({\n              type: datePickerErrorTypes[0],\n              stringValue,\n              yyyy,\n              date,\n            });\n\n            if (value) {\n              onChange({ e, value: null });\n            }\n            return;\n          }\n          onChange({ e, value: date });\n        } else if (value) {\n          onChange({ e, value: null });\n        }\n      }\n    },\n    [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],\n  );\n\n  const options: IMask.InputMask<IMask.MaskedDateOptions> = useMemo(\n    () =>\n      ({\n        mask: Date,\n        pattern: formatProp,\n        blocks: {\n          yyyy: {\n            mask: IMask.MaskedRange,\n            from: 1,\n            to: 9999,\n          },\n        },\n        lazy: true,\n        autofix: true,\n        format: (date: Date) => format(date, formatProp),\n        parse: (string: string) => parse(string, formatProp, new Date()),\n        validate: (string: string) => {\n          const [yyyy] = getPartsDate(string, formatProp, separator, false, [\n            'yyyy',\n          ]);\n\n          if (\n            yyyy &&\n            !isValid(parse(`${yyyy}`, datePickerPropFormatTypeYear, new Date()))\n          ) {\n            onError &&\n              onError({\n                type: datePickerErrorTypes[1],\n                stringValue: string,\n                yyyy,\n              });\n\n            return false;\n          }\n\n          return true;\n        },\n        // проблема в типах IMask\n      } as unknown as IMask.InputMask<IMask.MaskedDateOptions>),\n    [formatProp, separator],\n  );\n\n  const { inputRef } = useIMask({\n    value: stringValue,\n    onChange: (_val, params) => handleChange?.(params),\n    maskOptions: options,\n  });\n\n  // при изменении value, нужно обновить stringValue\n  useEffect(() => {\n    if (value && isValid(value)) {\n      setStringValue(format(value, formatProp));\n    } else if (stringValue?.length === formatProp.length) {\n      // если количество введенных символов меньше чем в формате маски\n      // то не нужно мешать вводу с клавиатуры\n      // если дата была введена полностью и value пришел null,\n      // то можно считать что поле нуждается в очистке\n      setStringValue('');\n    }\n  }, [value?.getTime()]);\n\n  return {\n    stringValue,\n    inputRef,\n  };\n};\n"],"mappings":"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"}

package/__internal__/src/components/ProgressStepBar/ProgressStepBar.css

@@ -1 +1 @@
-.ProgressStepBar{display:inline-flex;max-width:100%;width:100%}.ProgressStepBar-List{display:flex;justify-content:space-between;position:relative}.ProgressStepBar-List::-webkit-scrollbar{display:none}.ProgressStepBar-List_direction_horizontal{flex-direction:row;overflow-x:scroll;overflow-y:visible}.ProgressStepBar-List_direction_horizontal:not(.ProgressStepBar-List_overflow){min-width:100%}.ProgressStepBar-List_direction_vertical{flex-direction:column;overflow-x:visible;overflow-y:scroll}.ProgressStepBar-List_direction_vertical:not(.ProgressStepBar-List_overflow){min-height:100%}.ProgressStepBar-Button_side_left{margin-right:var(--space-xs)}.ProgressStepBar-Button_side_right{margin-left:var(--space-xs)}
+.ProgressStepBar{--progress-step-bar-offset:0px;display:inline-flex;max-width:100%;width:100%}.ProgressStepBar_isOverflow{--progress-step-bar-offset:var(--space-2xs)}.ProgressStepBar_isOverflow .ProgressStepBar-List_direction_horizontal{overflow-x:scroll;overflow-y:visible}.ProgressStepBar-List{display:flex;justify-content:space-between;padding:var(--progress-step-bar-offset);position:relative}.ProgressStepBar-List::-webkit-scrollbar{display:none}.ProgressStepBar-List_direction_horizontal{flex-direction:row}.ProgressStepBar-List_direction_horizontal:not(.ProgressStepBar-List_overflow){min-width:100%}.ProgressStepBar-List_direction_horizontal .ProgressStepBar-Item:not(:last-child){padding-right:var(--space-xs)}.ProgressStepBar-List_direction_vertical{flex-direction:column}.ProgressStepBar-List_direction_vertical:not(.ProgressStepBar-List_overflow){min-height:100%}.ProgressStepBar-Button_side_left{margin-right:var(--space-2xs)}.ProgressStepBar-Button_side_right{margin-left:var(--space-2xs)}

package/__internal__/src/components/ProgressStepBar/ProgressStepBar.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style"];import"./ProgressStepBar.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{createRef,forwardRef,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../hooks/useComponentSize/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{Button}from"../Button/Button";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{cnProgressStepBar,getItemPosition,getLineSize,propDirectionDefault,propSizeDefault,withDefaultGetters}from"./helpers";import{ProgressStepBarItem}from"./ProgressStepBarItem/ProgressStepBarItem";import{ProgressStepBarLine}from"./ProgressStepBarLine/ProgressStepBarLine";export var COMPONENT_NAME="ProgressStepBar";function ProgressStepBarRender(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),c),e=d.steps,f=void 0===e?[]:e,g=d.direction,h=void 0===g?propDirectionDefault:g,i=d.size,j=void 0===i?propSizeDefault:i,k=d.className,l=d.activeStepIndex,m=d.onItemClick,n=d.getItemContent,o=d.getItemLabel,p=d.getItemPoint,q=d.getItemProgress,r=d.getItemStatus,s=d.getItemTooltipContent,t=d.getItemLineStatus,u=d.getItemOnClick,v=d.style,w=_objectWithoutProperties(d,_excluded),x=useState([]),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useState(l||0),C=_slicedToArray(B,2),D=C[0],E=C[1],F=useRef(null),G=useComponentSize(c),H=G.width,I=G.height,J=useScrollElements(f),K=J.refs,L=J.scrollTo,M=useMemo(function(){return Array(f.length).fill(null).map(function(){return createRef()})},[f.length]);useEffect(function(){if(0<f.length){var a=[];f.forEach(function(b,d){d!==f.length-1&&a.push({status:t(b)||"normal",size:getLineSize(c,M[d+1],h)})}),A(a)}},[l,f,h,j,H,I]),useEffect(function(){E(l||0)},[l]),useEffect(function(){L(D)},[D]);var N=function(a){a&&0!==D&&E(D-1),a||D===f.length-1||E(D+1)},O=function(a,b){var c=u(a),d=m?function(d){m({e:d,item:a,index:b}),null===c||void 0===c?void 0:c(d)}:void 0;return{content:n(a),label:o(a),point:p(a),progress:q(a),status:"number"==typeof l&&l>=b?r(a)||"normal":"system",tooltipContent:s(a),size:j,position:getItemPosition(b,f.length),pointRef:M[b],direction:h,onClick:c||d,key:cnProgressStepBar({index:b}),tooltipZIndex:"number"==typeof(null===v||void 0===v?void 0:v.zIndex)?v.zIndex+1:void 0}},P=useOverflow({currentRef:F});return React.createElement("div",Object.assign({},w,{style:v,className:cnProgressStepBar(null,[k]),ref:useForkRef([b,c])}),P&&"vertical"!==h&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",className:cnProgressStepBar("Button",{side:"left"}),onClick:function onClick(){return N(!0)}}),React.createElement("div",{ref:F,className:cnProgressStepBar("List",{direction:h,overflow:P})},React.createElement(ProgressStepBarLine,{lines:z,size:j,direction:h,activeStepIndex:l}),f.map(function(a,b){return React.createElement(ProgressStepBarItem,Object.assign({ref:K[b]},O(a,b)))})),P&&"vertical"!==h&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowRight,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",className:cnProgressStepBar("Button",{side:"right"}),onClick:function onClick(){return N(!1)}}))}export var ProgressStepBar=forwardRef(ProgressStepBarRender);
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style"];import"./ProgressStepBar.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{createRef,forwardRef,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../hooks/useComponentSize/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{Button}from"../Button/Button";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{calculateLines,cnProgressStepBar,getItemPosition,propDirectionDefault,propSizeDefault,withDefaultGetters}from"./helpers";import{ProgressStepBarItem}from"./ProgressStepBarItem/ProgressStepBarItem";import{ProgressStepBarLine}from"./ProgressStepBarLine/ProgressStepBarLine";export var COMPONENT_NAME="ProgressStepBar";function ProgressStepBarRender(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),c),e=d.steps,f=void 0===e?[]:e,g=d.direction,h=void 0===g?propDirectionDefault:g,i=d.size,j=void 0===i?propSizeDefault:i,k=d.className,l=d.activeStepIndex,m=d.onItemClick,n=d.getItemContent,o=d.getItemLabel,p=d.getItemPoint,q=d.getItemProgress,r=d.getItemStatus,s=d.getItemTooltipContent,t=d.getItemLineStatus,u=d.getItemOnClick,v=d.style,w=_objectWithoutProperties(d,_excluded),x=useState(l||0),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useRef(null),C=useComponentSize(c),D=C.width,E=C.height,F=useScrollElements(f),G=F.refs,H=F.scrollTo,I=useMemo(function(){return Array(f.length).fill(null).map(function(){return createRef()})},[f.length]),J=useMemo(function(){var a=[],b=calculateLines(G,h);return f.forEach(function(c,d){var e;d!==f.length-1&&a.push({status:t(c)||"normal",size:null!==(e=b[d])&&void 0!==e?e:0})}),a},[l,f,h,j,D,E]);useEffect(function(){A(l||0)},[l]),useEffect(function(){H(z)},[z]);var K=function(a){a&&0!==z&&A(z-1),a||z===f.length-1||A(z+1)},L=function(a,b){var c=u(a),d=m?function(d){m({e:d,item:a,index:b}),null===c||void 0===c?void 0:c(d)}:void 0;return{content:n(a),label:o(a),point:p(a),progress:q(a),status:"number"==typeof l&&l>=b?r(a)||"normal":"system",tooltipContent:s(a),size:j,position:getItemPosition(b,f.length),pointRef:I[b],direction:h,className:cnProgressStepBar("Item"),onClick:c||d,key:cnProgressStepBar({index:b}),tooltipZIndex:"number"==typeof(null===v||void 0===v?void 0:v.zIndex)?v.zIndex+1:void 0}},M=useOverflow({currentRef:B});return React.createElement("div",Object.assign({},w,{style:v,className:cnProgressStepBar({isOverflow:M},[k]),ref:useForkRef([b,c])}),M&&"vertical"!==h&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",className:cnProgressStepBar("Button",{side:"left"}),onClick:function onClick(){return K(!0)}}),React.createElement("div",{ref:B,className:cnProgressStepBar("List",{direction:h,overflow:M})},React.createElement(ProgressStepBarLine,{lines:J,size:j,direction:h,activeStepIndex:l}),f.map(function(a,b){return React.createElement(ProgressStepBarItem,Object.assign({ref:G[b]},L(a,b)))})),M&&"vertical"!==h&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowRight,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",className:cnProgressStepBar("Button",{side:"right"}),onClick:function onClick(){return K(!1)}}))}export var ProgressStepBar=forwardRef(ProgressStepBarRender);
 //# sourceMappingURL=ProgressStepBar.js.map

package/__internal__/src/components/ProgressStepBar/ProgressStepBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressStepBar.js","names":["IconArrowLeft","IconArrowRight","React","createRef","forwardRef","useEffect","useMemo","useRef","useState","useComponentSize","useForkRef","useOverflow","useScrollElements","Button","usePropsHandler","cnProgressStepBar","getItemPosition","getLineSize","propDirectionDefault","propSizeDefault","withDefaultGetters","ProgressStepBarItem","ProgressStepBarLine","COMPONENT_NAME","ProgressStepBarRender","props","ref","containerRef","steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style","otherProps","lines","setLines","visibleIndex","setVisibleIndex","listRef","width","height","refs","scrollTo","stepsRef","Array","length","fill","map","linesArray","forEach","step","index","push","status","changePosition","prev","getStepItem","item","onClick","onItemClickHandler","e","content","label","point","progress","tooltipContent","position","pointRef","key","tooltipZIndex","zIndex","isOverflow","currentRef","side","overflow","ProgressStepBar"],"sources":["../../../../../src/components/ProgressStepBar/ProgressStepBar.tsx"],"sourcesContent":["import './ProgressStepBar.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, {\n  createRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { Button } from '../Button/Button';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport {\n  cnProgressStepBar,\n  DefaultItem,\n  getItemPosition,\n  getLineSize,\n  Line,\n  ProgressStepBarComponent,\n  ProgressStepBarItemProps,\n  ProgressStepBarProps,\n  propDirectionDefault,\n  propSizeDefault,\n  withDefaultGetters,\n} from './helpers';\nimport { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';\nimport { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';\n\nexport const COMPONENT_NAME = 'ProgressStepBar' as const;\n\nfunction ProgressStepBarRender<ITEM = DefaultItem>(\n  props: ProgressStepBarProps<ITEM>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const {\n    steps = [],\n    direction = propDirectionDefault,\n    size = propSizeDefault,\n    className,\n    activeStepIndex,\n    onItemClick,\n    getItemContent,\n    getItemLabel,\n    getItemPoint,\n    getItemProgress,\n    getItemStatus,\n    getItemTooltipContent,\n    getItemLineStatus,\n    getItemOnClick,\n    style,\n    ...otherProps\n  } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef);\n\n  const [lines, setLines] = useState<Line[]>([]);\n  const [visibleIndex, setVisibleIndex] = useState<number>(\n    activeStepIndex || 0,\n  );\n\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const { width, height } = useComponentSize(containerRef);\n\n  const { refs, scrollTo } = useScrollElements(steps);\n\n  const stepsRef = useMemo(\n    () =>\n      new Array(steps.length)\n        .fill(null)\n        .map(() => createRef<HTMLButtonElement>()),\n    [steps.length],\n  );\n\n  useEffect(() => {\n    if (steps.length > 0) {\n      const linesArray: Line[] = [];\n      steps.forEach((step, index) => {\n        if (index !== steps.length - 1)\n          linesArray.push({\n            status: getItemLineStatus(step) || 'normal',\n            size: getLineSize(containerRef, stepsRef[index + 1], direction),\n          });\n      });\n      setLines(linesArray);\n    }\n  }, [activeStepIndex, steps, direction, size, width, height]);\n\n  useEffect(() => {\n    setVisibleIndex(activeStepIndex || 0);\n  }, [activeStepIndex]);\n\n  useEffect(() => {\n    scrollTo(visibleIndex);\n  }, [visibleIndex]);\n\n  const changePosition = (prev: boolean) => {\n    if (prev && visibleIndex !== 0) {\n      setVisibleIndex(visibleIndex - 1);\n    }\n    if (!prev && visibleIndex !== steps.length - 1) {\n      setVisibleIndex(visibleIndex + 1);\n    }\n  };\n\n  const getStepItem: (item: ITEM, index: number) => ProgressStepBarItemProps = (\n    item,\n    index,\n  ) => {\n    const onClick = getItemOnClick(item);\n\n    const onItemClickHandler = onItemClick\n      ? (e: React.MouseEvent<Element, MouseEvent>) => {\n          onItemClick({ e, item, index });\n          onClick?.(e);\n        }\n      : undefined;\n\n    return {\n      content: getItemContent(item),\n      label: getItemLabel(item),\n      point: getItemPoint(item),\n      progress: getItemProgress(item),\n      status:\n        typeof activeStepIndex === 'number' && activeStepIndex >= index\n          ? getItemStatus(item) || 'normal'\n          : 'system',\n      tooltipContent: getItemTooltipContent(item),\n      size,\n      position: getItemPosition(index, steps.length),\n      pointRef: stepsRef[index] as React.RefObject<HTMLButtonElement>,\n      direction,\n      onClick: onClick || onItemClickHandler,\n      key: cnProgressStepBar({ index }),\n      tooltipZIndex:\n        typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined,\n    };\n  };\n\n  const isOverflow = useOverflow({ currentRef: listRef });\n\n  return (\n    <div\n      {...otherProps}\n      style={style}\n      className={cnProgressStepBar(null, [className])}\n      ref={useForkRef([ref, containerRef])}\n    >\n      {isOverflow && direction !== 'vertical' && (\n        <Button\n          iconLeft={() => <IconArrowLeft size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          className={cnProgressStepBar('Button', { side: 'left' })}\n          onClick={() => changePosition(true)}\n        />\n      )}\n      <div\n        ref={listRef}\n        className={cnProgressStepBar('List', {\n          direction,\n          overflow: isOverflow,\n        })}\n      >\n        <ProgressStepBarLine\n          lines={lines}\n          size={size}\n          direction={direction}\n          activeStepIndex={activeStepIndex}\n        />\n        {steps.map((step, index) => (\n          <ProgressStepBarItem\n            ref={refs[index] as React.RefObject<HTMLDivElement>}\n            {...getStepItem(step, index)}\n          />\n        ))}\n      </div>\n      {isOverflow && direction !== 'vertical' && (\n        <Button\n          iconLeft={() => <IconArrowRight size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          className={cnProgressStepBar('Button', { side: 'right' })}\n          onClick={() => changePosition(false)}\n        />\n      )}\n    </div>\n  );\n}\n\nexport const ProgressStepBar = forwardRef(\n  ProgressStepBarRender,\n) as ProgressStepBarComponent;\n"],"mappings":"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"}
+{"version":3,"file":"ProgressStepBar.js","names":["IconArrowLeft","IconArrowRight","React","createRef","forwardRef","useEffect","useMemo","useRef","useState","useComponentSize","useForkRef","useOverflow","useScrollElements","Button","usePropsHandler","calculateLines","cnProgressStepBar","getItemPosition","propDirectionDefault","propSizeDefault","withDefaultGetters","ProgressStepBarItem","ProgressStepBarLine","COMPONENT_NAME","ProgressStepBarRender","props","ref","containerRef","steps","direction","size","className","activeStepIndex","onItemClick","getItemContent","getItemLabel","getItemPoint","getItemProgress","getItemStatus","getItemTooltipContent","getItemLineStatus","getItemOnClick","style","otherProps","visibleIndex","setVisibleIndex","listRef","width","height","refs","scrollTo","stepsRef","Array","length","fill","map","lines","linesArray","sizes","forEach","step","index","push","status","changePosition","prev","getStepItem","item","onClick","onItemClickHandler","e","content","label","point","progress","tooltipContent","position","pointRef","key","tooltipZIndex","zIndex","isOverflow","currentRef","side","overflow","ProgressStepBar"],"sources":["../../../../../src/components/ProgressStepBar/ProgressStepBar.tsx"],"sourcesContent":["import './ProgressStepBar.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, {\n  createRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { Button } from '../Button/Button';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport {\n  calculateLines,\n  cnProgressStepBar,\n  DefaultItem,\n  getItemPosition,\n  Line,\n  ProgressStepBarComponent,\n  ProgressStepBarItemProps,\n  ProgressStepBarProps,\n  propDirectionDefault,\n  propSizeDefault,\n  withDefaultGetters,\n} from './helpers';\nimport { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';\nimport { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';\n\nexport const COMPONENT_NAME = 'ProgressStepBar' as const;\n\nfunction ProgressStepBarRender<ITEM = DefaultItem>(\n  props: ProgressStepBarProps<ITEM>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const {\n    steps = [],\n    direction = propDirectionDefault,\n    size = propSizeDefault,\n    className,\n    activeStepIndex,\n    onItemClick,\n    getItemContent,\n    getItemLabel,\n    getItemPoint,\n    getItemProgress,\n    getItemStatus,\n    getItemTooltipContent,\n    getItemLineStatus,\n    getItemOnClick,\n    style,\n    ...otherProps\n  } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef);\n\n  const [visibleIndex, setVisibleIndex] = useState<number>(\n    activeStepIndex || 0,\n  );\n\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const { width, height } = useComponentSize(containerRef);\n\n  const { refs, scrollTo } = useScrollElements(steps);\n\n  const stepsRef = useMemo(\n    () =>\n      new Array(steps.length)\n        .fill(null)\n        .map(() => createRef<HTMLButtonElement>()),\n    [steps.length],\n  );\n\n  const lines = useMemo(() => {\n    const linesArray: Line[] = [];\n    const sizes = calculateLines(refs, direction);\n    steps.forEach((step, index) => {\n      if (index !== steps.length - 1)\n        linesArray.push({\n          status: getItemLineStatus(step) || 'normal',\n          size: sizes[index] ?? 0,\n        });\n    });\n    return linesArray;\n  }, [activeStepIndex, steps, direction, size, width, height]);\n\n  useEffect(() => {\n    setVisibleIndex(activeStepIndex || 0);\n  }, [activeStepIndex]);\n\n  useEffect(() => {\n    scrollTo(visibleIndex);\n  }, [visibleIndex]);\n\n  const changePosition = (prev: boolean) => {\n    if (prev && visibleIndex !== 0) {\n      setVisibleIndex(visibleIndex - 1);\n    }\n    if (!prev && visibleIndex !== steps.length - 1) {\n      setVisibleIndex(visibleIndex + 1);\n    }\n  };\n\n  const getStepItem: (item: ITEM, index: number) => ProgressStepBarItemProps = (\n    item,\n    index,\n  ) => {\n    const onClick = getItemOnClick(item);\n\n    const onItemClickHandler = onItemClick\n      ? (e: React.MouseEvent<Element, MouseEvent>) => {\n          onItemClick({ e, item, index });\n          onClick?.(e);\n        }\n      : undefined;\n\n    return {\n      content: getItemContent(item),\n      label: getItemLabel(item),\n      point: getItemPoint(item),\n      progress: getItemProgress(item),\n      status:\n        typeof activeStepIndex === 'number' && activeStepIndex >= index\n          ? getItemStatus(item) || 'normal'\n          : 'system',\n      tooltipContent: getItemTooltipContent(item),\n      size,\n      position: getItemPosition(index, steps.length),\n      pointRef: stepsRef[index] as React.RefObject<HTMLButtonElement>,\n      direction,\n      className: cnProgressStepBar('Item'),\n      onClick: onClick || onItemClickHandler,\n      key: cnProgressStepBar({ index }),\n      tooltipZIndex:\n        typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined,\n    };\n  };\n\n  const isOverflow = useOverflow({ currentRef: listRef });\n\n  return (\n    <div\n      {...otherProps}\n      style={style}\n      className={cnProgressStepBar({ isOverflow }, [className])}\n      ref={useForkRef([ref, containerRef])}\n    >\n      {isOverflow && direction !== 'vertical' && (\n        <Button\n          iconLeft={() => <IconArrowLeft size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          className={cnProgressStepBar('Button', { side: 'left' })}\n          onClick={() => changePosition(true)}\n        />\n      )}\n      <div\n        ref={listRef}\n        className={cnProgressStepBar('List', {\n          direction,\n          overflow: isOverflow,\n        })}\n      >\n        <ProgressStepBarLine\n          lines={lines}\n          size={size}\n          direction={direction}\n          activeStepIndex={activeStepIndex}\n        />\n        {steps.map((step, index) => (\n          <ProgressStepBarItem\n            ref={refs[index] as React.RefObject<HTMLDivElement>}\n            {...getStepItem(step, index)}\n          />\n        ))}\n      </div>\n      {isOverflow && direction !== 'vertical' && (\n        <Button\n          iconLeft={() => <IconArrowRight size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          className={cnProgressStepBar('Button', { side: 'right' })}\n          onClick={() => changePosition(false)}\n        />\n      )}\n    </div>\n  );\n}\n\nexport const ProgressStepBar = forwardRef(\n  ProgressStepBarRender,\n) as ProgressStepBarComponent;\n"],"mappings":"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"}

package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.css

@@ -1 +1 @@
-.ProgressStepBarItem{align-items:flex-start;display:inline-flex;flex:1;height:100%;position:relative}.ProgressStepBarItem_direction_horizontal{flex-direction:column}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs{margin-bottom:var(--space-2xs)}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m,.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s{margin-bottom:var(--space-xs)}.ProgressStepBarItem_direction_vertical{flex-direction:row}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point{margin-right:var(--space-xs)}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs{margin-top:-4px}.ProgressStepBarItem_size_xs{--progress-step-bar-item-point-size:var(--space-xs);--progress-step-bar-item-label-margin:var(--space-2xs)}.ProgressStepBarItem_size_s{--progress-step-bar-item-point-size:var(--space-m);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_size_m{--progress-step-bar-item-point-size:var(--space-xl);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_position_start{flex:1}.ProgressStepBarItem_position_start .ProgressStepBarItem-Content,.ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal{align-items:flex-start;text-align:left}.ProgressStepBarItem_position_center{flex:2}.ProgressStepBarItem_position_center .ProgressStepBarItemr-Content,.ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal{align-items:center;text-align:center}.ProgressStepBarItem_position_end{flex:1}.ProgressStepBarItem_position_end .ProgressStepBarItem-Content,.ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal{align-items:flex-end;text-align:right}.ProgressStepBarItem_status_system{--progress-step-bar-item-point-background:var(--color-bg-system);--progress-step-bar-item-point-content-color:var(--color-typo-secondary)}.ProgressStepBarItem_status_normal{--progress-step-bar-item-point-background:var(--color-bg-normal);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_success{--progress-step-bar-item-point-background:var(--color-bg-success);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_warning{--progress-step-bar-item-point-background:var(--color-bg-warning);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_alert{--progress-step-bar-item-point-background:var(--color-bg-alert);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem .ProgressStepBarItem-PointIcon,.ProgressStepBarItem .ProgressStepBarItem-PointText{color:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem .ProgressSpin{stroke:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem-Point{align-items:center;background-color:var(--progress-step-bar-item-point-background);border:none;border-radius:calc(var(--progress-step-bar-item-point-size)*.5);color:var(--color-bg-default);display:flex;justify-content:center;margin:0;min-height:var(--progress-step-bar-item-point-size);min-width:var(--progress-step-bar-item-point-size);padding:0;transition:background-color .3s}.ProgressStepBarItem-Point_pointer{cursor:pointer}.ProgressStepBarItem-PointText{color:var(--color-typo-secondary);transition:color .3s}.ProgressStepBarItem-Content_bottomOffset,.ProgressStepBarItem-Label{margin-bottom:var(--progress-step-bar-item-label-margin)}
+.ProgressStepBarItem{align-items:flex-start;display:inline-flex;flex:1;height:100%;position:relative;width:100%}.ProgressStepBarItem_direction_horizontal{flex-direction:column}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs{margin-bottom:var(--space-2xs)}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m,.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s{margin-bottom:var(--space-xs)}.ProgressStepBarItem_direction_vertical{flex-direction:row}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point{margin-right:var(--space-xs)}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs{margin-top:-4px}.ProgressStepBarItem_size_xs{--progress-step-bar-item-point-size:var(--space-xs);--progress-step-bar-item-label-margin:var(--space-2xs)}.ProgressStepBarItem_size_s{--progress-step-bar-item-point-size:var(--space-m);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_size_m{--progress-step-bar-item-point-size:var(--space-xl);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_position_start{flex:1}.ProgressStepBarItem_position_start .ProgressStepBarItem-Content,.ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal{align-items:flex-start;text-align:left}.ProgressStepBarItem_position_center{flex:2}.ProgressStepBarItem_position_center .ProgressStepBarItemr-Content,.ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal{align-items:center;text-align:center}.ProgressStepBarItem_position_end{flex:1}.ProgressStepBarItem_position_end .ProgressStepBarItem-Content,.ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal{align-items:flex-end;text-align:right}.ProgressStepBarItem_status_system{--progress-step-bar-item-point-background:var(--color-bg-system);--progress-step-bar-item-point-content-color:var(--color-typo-secondary)}.ProgressStepBarItem_status_normal{--progress-step-bar-item-point-background:var(--color-bg-normal);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_success{--progress-step-bar-item-point-background:var(--color-bg-success);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_warning{--progress-step-bar-item-point-background:var(--color-bg-warning);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_alert{--progress-step-bar-item-point-background:var(--color-bg-alert);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem .ProgressStepBarItem-PointIcon,.ProgressStepBarItem .ProgressStepBarItem-PointText{color:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem .ProgressSpin{stroke:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem-Point{align-items:center;background-color:var(--progress-step-bar-item-point-background);border:none;border-radius:calc(var(--progress-step-bar-item-point-size)*.5);color:var(--color-bg-default);display:flex;justify-content:center;margin:0;min-height:var(--progress-step-bar-item-point-size);min-width:var(--progress-step-bar-item-point-size);padding:0;transition:background-color .3s}.ProgressStepBarItem-Point_pointer{cursor:pointer}.ProgressStepBarItem-PointText{color:var(--color-typo-secondary);transition:color .3s}.ProgressStepBarItem-Content_bottomOffset,.ProgressStepBarItem-Label{margin-bottom:var(--progress-step-bar-item-label-margin)}

package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["content","tooltipContent","label","point","status","progress","direction","size","pointRef","onClick","position","tooltipZIndex"];import"./ProgressStepBarItem.css";import React,{useRef}from"react";import{useForkRef}from"../../../hooks/useForkRef";import{useMouseLeave}from"../../../hooks/useMouseLeave";import{useFlag}from"../../../hooks/useFlag/useFlag";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{ProgressSpin}from"../../ProgressSpin/ProgressSpin";import{Text}from"../../Text/Text";import{Tooltip}from"../../Tooltip/Tooltip";import{propPositionDefault,propStatusDefault}from"../helpers";var cnProgressStepBarItem=cn("ProgressStepBarItem"),possibleVerticalDirections=["leftCenter","rightCenter","rightUp","downCenter"],possibleHorizontalDirections=["downCenter","upCenter","downStartLeft","downStartRight"],renderPointContent=function(a,b,c){if(c)return React.createElement(ProgressSpin,{size:b});if(!a)return null;if("number"==typeof a)return React.createElement(Text,{className:cnProgressStepBarItem("PointText"),size:"s"===b?"2xs":"xs",weight:"bold"},a);return React.createElement(a,{className:cnProgressStepBarItem("PointIcon"),size:"xs"})};export var ProgressStepBarItem=React.forwardRef(function(a,b){var c=a.content,d=a.tooltipContent,e=a.label,f=a.point,g=a.status,h=a.progress,i=a.direction,j=a.size,k=a.pointRef,l=a.onClick,m=a.position,n=void 0===m?propPositionDefault:m,o=a.tooltipZIndex,p=_objectWithoutProperties(a,_excluded),q=useFlag(),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useRef(null),v=useRef(null),w=useRef(null),x=useForkRef([w,k]),y={onMouseEnter:t.on,className:cnProgressStepBarItem("Point",{size:j,pointer:!!l},[l?cnMixFocus():void 0]),children:"xs"!==j&&renderPointContent(f,j,h),ref:x,onClick:l};return useMouseLeave({isActive:s,refs:[u,w,v],handler:t.off,debounce:100}),React.createElement(React.Fragment,null,React.createElement("div",Object.assign({ref:b,className:cnProgressStepBarItem({direction:i,position:n,status:g||propStatusDefault,size:j})},p),React.createElement("button",Object.assign({tabIndex:-1,type:"button"},y)),(e||c)&&React.createElement("div",{className:cnProgressStepBarItem("Content",{bottomOffset:!!c})},e&&React.createElement(Text,{className:cnProgressStepBarItem("Label"),ref:u,size:j,onMouseEnter:t.on,lineHeight:"s"===j?"xs":j,view:"primary"},e),c)),d&&s&&React.createElement(Tooltip,{ref:v,anchorRef:e||c?u:w,className:cnProgressStepBarItem("Tooltip"),direction:"horizontal"===i?"downCenter":"leftUp",style:{zIndex:o},isInteractive:!0,possibleDirections:"horizontal"===i?possibleHorizontalDirections:possibleVerticalDirections},d))});
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["content","tooltipContent","label","point","status","progress","direction","size","pointRef","onClick","position","tooltipZIndex","className"];import"./ProgressStepBarItem.css";import React,{useRef}from"react";import{useForkRef}from"../../../hooks/useForkRef";import{useMouseLeave}from"../../../hooks/useMouseLeave";import{useFlag}from"../../../hooks/useFlag/useFlag";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{ProgressSpin}from"../../ProgressSpin/ProgressSpin";import{Text}from"../../Text/Text";import{Tooltip}from"../../Tooltip/Tooltip";import{propPositionDefault,propStatusDefault}from"../helpers";var cnProgressStepBarItem=cn("ProgressStepBarItem"),possibleVerticalDirections=["leftCenter","rightCenter","rightUp","downCenter"],possibleHorizontalDirections=["downCenter","upCenter","downStartLeft","downStartRight"],renderPointContent=function(a,b,c){if(c)return React.createElement(ProgressSpin,{size:b});if(!a)return null;if("number"==typeof a)return React.createElement(Text,{className:cnProgressStepBarItem("PointText"),size:"s"===b?"2xs":"xs",weight:"bold"},a);return React.createElement(a,{className:cnProgressStepBarItem("PointIcon"),size:"xs"})};export var ProgressStepBarItem=React.forwardRef(function(a,b){var c=a.content,d=a.tooltipContent,e=a.label,f=a.point,g=a.status,h=a.progress,i=a.direction,j=a.size,k=a.pointRef,l=a.onClick,m=a.position,n=void 0===m?propPositionDefault:m,o=a.tooltipZIndex,p=a.className,q=_objectWithoutProperties(a,_excluded),r=useFlag(),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useRef(null),w=useRef(null),x=useRef(null),y=useForkRef([x,k]),z={onMouseEnter:u.on,className:cnProgressStepBarItem("Point",{size:j,pointer:!!l},[l?cnMixFocus():void 0]),children:"xs"!==j&&renderPointContent(f,j,h),ref:y,onClick:l};return useMouseLeave({isActive:t,refs:[v,x,w],handler:u.off,debounce:100}),React.createElement(React.Fragment,null,React.createElement("div",Object.assign({ref:b,className:cnProgressStepBarItem({direction:i,position:n,status:g||propStatusDefault,size:j},[p])},q),React.createElement("button",Object.assign({tabIndex:-1,type:"button"},z)),(e||c)&&React.createElement("div",{className:cnProgressStepBarItem("Content",{bottomOffset:!!c})},e&&React.createElement(Text,{className:cnProgressStepBarItem("Label"),ref:v,size:j,onMouseEnter:u.on,lineHeight:"s"===j?"xs":j,view:"primary"},e),c)),d&&t&&React.createElement(Tooltip,{ref:w,anchorRef:e||c?v:x,className:cnProgressStepBarItem("Tooltip"),direction:"horizontal"===i?"downCenter":"leftUp",style:{zIndex:o},isInteractive:!1,possibleDirections:"horizontal"===i?possibleHorizontalDirections:possibleVerticalDirections},d))});
 //# sourceMappingURL=ProgressStepBarItem.js.map

package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressStepBarItem.js","names":["React","useRef","useForkRef","useMouseLeave","useFlag","cnMixFocus","cn","ProgressSpin","Text","Tooltip","propPositionDefault","propStatusDefault","cnProgressStepBarItem","possibleVerticalDirections","possibleHorizontalDirections","renderPointContent","point","size","progress","ProgressStepBarItem","forwardRef","props","ref","content","tooltipContent","label","status","direction","pointRefProp","pointRef","onClick","position","tooltipZIndex","otherProps","isTooltipVisible","setTooltipVisible","anchorRef","tooltipRef","pointForkedRef","pointProps","onMouseEnter","on","className","pointer","children","isActive","refs","handler","off","debounce","bottomOffset","zIndex"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.tsx"],"sourcesContent":["import './ProgressStepBarItem.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport React, { useRef } from 'react';\n\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useMouseLeave } from '##/hooks/useMouseLeave';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport { Direction } from '../../Popover/Popover';\nimport { ProgressSpin } from '../../ProgressSpin/ProgressSpin';\nimport { Text } from '../../Text/Text';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport {\n  PointNumbersMap,\n  ProgressStepBarItemComponent,\n  propPositionDefault,\n  propStatusDefault,\n} from '../helpers';\n\nconst cnProgressStepBarItem = cn('ProgressStepBarItem');\n\nconst possibleVerticalDirections: Direction[] = [\n  'leftCenter',\n  'rightCenter',\n  'rightUp',\n  'downCenter',\n];\nconst possibleHorizontalDirections: Direction[] = [\n  'downCenter',\n  'upCenter',\n  'downStartLeft',\n  'downStartRight',\n];\n\nconst renderPointContent = (\n  point: PointNumbersMap | IconComponent | undefined,\n  size: 'm' | 's',\n  progress: boolean | undefined,\n) => {\n  if (progress) return <ProgressSpin size={size} />;\n  if (!point) return null;\n\n  if (typeof point === 'number') {\n    return (\n      <Text\n        className={cnProgressStepBarItem('PointText')}\n        size={size === 's' ? '2xs' : 'xs'}\n        weight=\"bold\"\n      >\n        {point}\n      </Text>\n    );\n  }\n\n  const Icon = point;\n\n  return <Icon className={cnProgressStepBarItem('PointIcon')} size=\"xs\" />;\n};\n\nexport const ProgressStepBarItem: ProgressStepBarItemComponent =\n  React.forwardRef((props, ref) => {\n    const {\n      content,\n      tooltipContent,\n      label,\n      point,\n      status,\n      progress,\n      direction,\n      size,\n      pointRef: pointRefProp,\n      onClick,\n      position = propPositionDefault,\n      tooltipZIndex,\n      ...otherProps\n    } = props;\n\n    const [isTooltipVisible, setTooltipVisible] = useFlag();\n\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const pointRef = useRef<HTMLButtonElement>(null);\n\n    const pointForkedRef = useForkRef([pointRef, pointRefProp]);\n\n    const pointProps = {\n      onMouseEnter: setTooltipVisible.on,\n      className: cnProgressStepBarItem(\n        'Point',\n        {\n          size,\n          pointer: !!onClick,\n        },\n        [onClick ? cnMixFocus() : undefined],\n      ),\n      children: size !== 'xs' && renderPointContent(point, size, progress),\n      ref: pointForkedRef,\n      onClick,\n    };\n\n    useMouseLeave({\n      isActive: isTooltipVisible,\n      refs: [anchorRef, pointRef, tooltipRef],\n      handler: setTooltipVisible.off,\n      debounce: 100,\n    });\n\n    return (\n      <>\n        <div\n          ref={ref}\n          className={cnProgressStepBarItem({\n            direction,\n            position,\n            status: status || propStatusDefault,\n            size,\n          })}\n          {...otherProps}\n        >\n          <button tabIndex={-1} type=\"button\" {...pointProps} />\n          {(label || content) && (\n            <div\n              className={cnProgressStepBarItem('Content', {\n                bottomOffset: !!content,\n              })}\n            >\n              {label && (\n                <Text\n                  className={cnProgressStepBarItem('Label')}\n                  ref={anchorRef}\n                  size={size}\n                  onMouseEnter={setTooltipVisible.on}\n                  lineHeight={size === 's' ? 'xs' : size}\n                  view=\"primary\"\n                >\n                  {label}\n                </Text>\n              )}\n              {content}\n            </div>\n          )}\n        </div>\n        {tooltipContent && isTooltipVisible && (\n          <Tooltip\n            ref={tooltipRef}\n            anchorRef={label || content ? anchorRef : pointRef}\n            className={cnProgressStepBarItem('Tooltip')}\n            direction={direction === 'horizontal' ? 'downCenter' : 'leftUp'}\n            style={{ zIndex: tooltipZIndex }}\n            isInteractive\n            possibleDirections={\n              direction === 'horizontal'\n                ? possibleHorizontalDirections\n                : possibleVerticalDirections\n            }\n          >\n            {tooltipContent}\n          </Tooltip>\n        )}\n      </>\n    );\n  });\n"],"mappings":"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"}
+{"version":3,"file":"ProgressStepBarItem.js","names":["React","useRef","useForkRef","useMouseLeave","useFlag","cnMixFocus","cn","ProgressSpin","Text","Tooltip","propPositionDefault","propStatusDefault","cnProgressStepBarItem","possibleVerticalDirections","possibleHorizontalDirections","renderPointContent","point","size","progress","ProgressStepBarItem","forwardRef","props","ref","content","tooltipContent","label","status","direction","pointRefProp","pointRef","onClick","position","tooltipZIndex","className","otherProps","isTooltipVisible","setTooltipVisible","anchorRef","tooltipRef","pointForkedRef","pointProps","onMouseEnter","on","pointer","children","isActive","refs","handler","off","debounce","bottomOffset","zIndex"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.tsx"],"sourcesContent":["import './ProgressStepBarItem.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport React, { useRef } from 'react';\n\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useMouseLeave } from '##/hooks/useMouseLeave';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport { Direction } from '../../Popover/Popover';\nimport { ProgressSpin } from '../../ProgressSpin/ProgressSpin';\nimport { Text } from '../../Text/Text';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport {\n  PointNumbersMap,\n  ProgressStepBarItemComponent,\n  propPositionDefault,\n  propStatusDefault,\n} from '../helpers';\n\nconst cnProgressStepBarItem = cn('ProgressStepBarItem');\n\nconst possibleVerticalDirections: Direction[] = [\n  'leftCenter',\n  'rightCenter',\n  'rightUp',\n  'downCenter',\n];\nconst possibleHorizontalDirections: Direction[] = [\n  'downCenter',\n  'upCenter',\n  'downStartLeft',\n  'downStartRight',\n];\n\nconst renderPointContent = (\n  point: PointNumbersMap | IconComponent | undefined,\n  size: 'm' | 's',\n  progress: boolean | undefined,\n) => {\n  if (progress) return <ProgressSpin size={size} />;\n  if (!point) return null;\n\n  if (typeof point === 'number') {\n    return (\n      <Text\n        className={cnProgressStepBarItem('PointText')}\n        size={size === 's' ? '2xs' : 'xs'}\n        weight=\"bold\"\n      >\n        {point}\n      </Text>\n    );\n  }\n\n  const Icon = point;\n\n  return <Icon className={cnProgressStepBarItem('PointIcon')} size=\"xs\" />;\n};\n\nexport const ProgressStepBarItem: ProgressStepBarItemComponent =\n  React.forwardRef((props, ref) => {\n    const {\n      content,\n      tooltipContent,\n      label,\n      point,\n      status,\n      progress,\n      direction,\n      size,\n      pointRef: pointRefProp,\n      onClick,\n      position = propPositionDefault,\n      tooltipZIndex,\n      className,\n      ...otherProps\n    } = props;\n\n    const [isTooltipVisible, setTooltipVisible] = useFlag();\n\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const pointRef = useRef<HTMLButtonElement>(null);\n\n    const pointForkedRef = useForkRef([pointRef, pointRefProp]);\n\n    const pointProps = {\n      onMouseEnter: setTooltipVisible.on,\n      className: cnProgressStepBarItem(\n        'Point',\n        {\n          size,\n          pointer: !!onClick,\n        },\n        [onClick ? cnMixFocus() : undefined],\n      ),\n      children: size !== 'xs' && renderPointContent(point, size, progress),\n      ref: pointForkedRef,\n      onClick,\n    };\n\n    useMouseLeave({\n      isActive: isTooltipVisible,\n      refs: [anchorRef, pointRef, tooltipRef],\n      handler: setTooltipVisible.off,\n      debounce: 100,\n    });\n\n    return (\n      <>\n        <div\n          ref={ref}\n          className={cnProgressStepBarItem(\n            {\n              direction,\n              position,\n              status: status || propStatusDefault,\n              size,\n            },\n            [className],\n          )}\n          {...otherProps}\n        >\n          <button tabIndex={-1} type=\"button\" {...pointProps} />\n          {(label || content) && (\n            <div\n              className={cnProgressStepBarItem('Content', {\n                bottomOffset: !!content,\n              })}\n            >\n              {label && (\n                <Text\n                  className={cnProgressStepBarItem('Label')}\n                  ref={anchorRef}\n                  size={size}\n                  onMouseEnter={setTooltipVisible.on}\n                  lineHeight={size === 's' ? 'xs' : size}\n                  view=\"primary\"\n                >\n                  {label}\n                </Text>\n              )}\n              {content}\n            </div>\n          )}\n        </div>\n        {tooltipContent && isTooltipVisible && (\n          <Tooltip\n            ref={tooltipRef}\n            anchorRef={label || content ? anchorRef : pointRef}\n            className={cnProgressStepBarItem('Tooltip')}\n            direction={direction === 'horizontal' ? 'downCenter' : 'leftUp'}\n            style={{ zIndex: tooltipZIndex }}\n            isInteractive={false}\n            possibleDirections={\n              direction === 'horizontal'\n                ? possibleHorizontalDirections\n                : possibleVerticalDirections\n            }\n          >\n            {tooltipContent}\n          </Tooltip>\n        )}\n      </>\n    );\n  });\n"],"mappings":"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"}

package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.css

@@ -1 +1 @@
-.ProgressStepBarLine{background:var(--line-background);height:var(--progress-step-bar-line-height);left:var(--progress-step-bar-line-left);overflow:hidden;position:absolute;top:var(--progress-step-bar-line-top);width:var(--progress-step-bar-line-width)}.ProgressStepBarLine_direction_horizontal{--progress-step-bar-line-top:var(--progress-step-bar-line-padding);--progress-step-bar-line-left:0;--progress-step-bar-line-width:var(--line-size);--progress-step-bar-line-height:var(--progress-step-bar-line-size);--progress-step-bar-line-after-top:0;--progress-step-bar-line-after-left:var(--line-active-size)}.ProgressStepBarLine_direction_vertical{--progress-step-bar-line-top:0;--progress-step-bar-line-left:var(--progress-step-bar-line-padding);--progress-step-bar-line-width:var(--progress-step-bar-line-size);--progress-step-bar-line-height:var(--line-size);--progress-step-bar-line-after-top:var(--line-active-size);--progress-step-bar-line-after-left:0}.ProgressStepBarLine_size_xs{--progress-step-bar-line-size:var(--space-3xs);--progress-step-bar-line-padding:calc((var(--space-xs) - var(--space-3xs))*0.5)}.ProgressStepBarLine_size_s{--progress-step-bar-line-size:var(--space-2xs);--progress-step-bar-line-padding:calc((var(--space-m) - var(--space-2xs))*0.5)}.ProgressStepBarLine_size_m{--progress-step-bar-line-size:var(--space-2xs);--progress-step-bar-line-padding:calc((var(--space-xl) - var(--space-2xs))*0.5)}.ProgressStepBarLine:after{background:var(--color-bg-system);bottom:0;content:"";left:var(--progress-step-bar-line-after-left);position:absolute;right:0;top:var(--progress-step-bar-line-after-top);transition:left .3s,top .3s}
+.ProgressStepBarLine{border-radius:var(--space-xs);height:var(--progress-step-bar-line-height);left:var(--progress-step-bar-line-left);overflow:hidden;position:absolute;top:var(--progress-step-bar-line-top);width:var(--progress-step-bar-line-width)}.ProgressStepBarLine_direction_horizontal{--progress-step-bar-line-top:calc(var(--progress-step-bar-line-padding) + var(--progress-step-bar-offset));--progress-step-bar-line-left:var(--progress-step-bar-offset);--progress-step-bar-line-width:calc(var(--line-size) - var(--progress-step-bar-offset)*4);--progress-step-bar-line-height:var(--progress-step-bar-line-size);--progress-step-bar-line-after-top:0;--progress-step-bar-line-after-left:var(--line-active-size)}.ProgressStepBarLine_direction_vertical{--progress-step-bar-line-top:var(--progress-step-bar-offset);--progress-step-bar-line-left:calc(var(--progress-step-bar-line-padding) + var(--progress-step-bar-offset));--progress-step-bar-line-width:var(--progress-step-bar-line-size);--progress-step-bar-line-height:calc(var(--line-size) - var(--progress-step-bar-offset));--progress-step-bar-line-after-top:var(--line-active-size);--progress-step-bar-line-after-left:0}.ProgressStepBarLine_size_xs{--progress-step-bar-line-size:var(--space-3xs);--progress-step-bar-line-padding:calc((var(--space-xs) - var(--space-3xs))*0.5)}.ProgressStepBarLine_size_s{--progress-step-bar-line-size:var(--space-2xs);--progress-step-bar-line-padding:calc((var(--space-m) - var(--space-2xs))*0.5)}.ProgressStepBarLine_size_m{--progress-step-bar-line-size:var(--space-2xs);--progress-step-bar-line-padding:calc((var(--space-xl) - var(--space-2xs))*0.5)}.ProgressStepBarLine:after{background:var(--color-bg-system);bottom:0;content:"";left:var(--progress-step-bar-line-after-left);position:absolute;right:0;top:var(--progress-step-bar-line-after-top);transition:left .3s,top .3s}.ProgressStepBarLine-Svg{left:0;position:absolute;top:0}

package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["lines","activeStepIndex","size","direction"];import"./ProgressStepBarLine.css";import React from"react";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";var cnProgressStepBarLine=cn("ProgressStepBarLine"),mapVarsByStatus={normal:"var(--color-bg-normal)",success:"var(--color-bg-success)",warning:"var(--color-bg-warning)",alert:"var(--color-bg-alert)"},backgroundGenerate=function(a,b){for(var c="linear-gradient(".concat("horizontal"===b?"90":"180","deg, "),d=a.length,e=0;e<d;e++){var f=a[e],g=getByMap(mapVarsByStatus,f.status||"normal"),h=a[e-1]?a[e-1].size:0,i=f.size;c+="".concat(g," ").concat(h,"px, ").concat(g," ").concat(i,"px").concat(e<d-1?", ":")")}return c},getActiveLineSize=function(a,b,c){var d=a?Math.max(a-1,0):void 0;return"number"!=typeof d||0===d?0:b[d]?b[d].size:c};export var ProgressStepBarLine=function(a){var b,c=a.lines,d=a.activeStepIndex,e=a.size,f=a.direction,g=_objectWithoutProperties(a,_excluded),h=backgroundGenerate(c,f),i=0<c.length?c[c.length-1].size:0,j=getActiveLineSize(d,c,i);return React.createElement("div",Object.assign({},g,{className:cnProgressStepBarLine({size:e,direction:f}),style:(b={},_defineProperty(b,"--line-size","".concat(i,"px")),_defineProperty(b,"--line-background",h),_defineProperty(b,"--line-active-size","".concat(j,"px")),b)}))};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["lines","activeStepIndex","size","direction"];import"./ProgressStepBarLine.css";import React from"react";import{cn}from"../../../utils/bem";var cnProgressStepBarLine=cn("ProgressStepBarLine"),getActiveLineSize=function(a,b){var c=b.map(function(a){var b=a.size;return b}),d=a?Math.max(a,0):void 0;return"number"!=typeof d||0===d?0:c.splice(0,d).reduce(function(c,a){return c+a})},getPathParams=function(a,b){var c=[],d=0;return a.forEach(function(a){var e=a.size,f=a.status;c.push({width:"horizontal"===b?e:"var(--progress-step-bar-line-width)",height:"horizontal"===b?"var(--progress-step-bar-line-height)":e,x:"horizontal"===b?d:0,y:"horizontal"===b?0:d,fill:"var(--color-bg-".concat(f||"normal",")")}),d+=e}),c};export var ProgressStepBarLine=function(a){var b,c=a.lines,d=a.activeStepIndex,e=a.size,f=a.direction,g=_objectWithoutProperties(a,_excluded),h=c.map(function(a){var b=a.size;return b}).reduce(function(c,a){return c+a}),i=getActiveLineSize(d,c);return React.createElement("div",Object.assign({},g,{className:cnProgressStepBarLine({size:e,direction:f}),style:(b={},_defineProperty(b,"--line-size","".concat(h,"px")),_defineProperty(b,"--line-active-size","".concat(i,"px")),b)}),React.createElement("svg",{className:cnProgressStepBarLine("Svg"),width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg"},getPathParams(c,f).map(function(a,b){var c=a.fill,d=a.height,e=a.width,f=a.x,g=a.y;return React.createElement("rect",{key:b,style:{height:d,width:e,fill:c},x:f,y:g})})))};
 //# sourceMappingURL=ProgressStepBarLine.js.map

package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressStepBarLine.js","names":["React","cn","getByMap","cnProgressStepBarLine","mapVarsByStatus","normal","success","warning","alert","backgroundGenerate","lines","direction","background","length","index","line","color","status","from","size","to","getActiveLineSize","activeStepIndex","lineSize","active","Math","max","ProgressStepBarLine","props","otherProps","activeLineSize"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.tsx"],"sourcesContent":["import './ProgressStepBarLine.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getByMap } from '../../../utils/getByMap';\nimport { Line, PropDirection, PropSize, PropStatus } from '../helpers';\n\ntype ProgressStepBarLineProps = {\n  lines: Line[];\n  size: PropSize;\n  direction: PropDirection;\n  activeStepIndex?: number;\n};\n\nconst cnProgressStepBarLine = cn('ProgressStepBarLine');\n\nconst mapVarsByStatus: Record<PropStatus, string> = {\n  normal: 'var(--color-bg-normal)',\n  success: 'var(--color-bg-success)',\n  warning: 'var(--color-bg-warning)',\n  alert: 'var(--color-bg-alert)',\n};\n\nconst backgroundGenerate = (lines: Line[], direction: PropDirection) => {\n  let background = `linear-gradient(${\n    direction === 'horizontal' ? '90' : '180'\n  }deg, `;\n\n  const { length } = lines;\n\n  for (let index = 0; index < length; index++) {\n    const line = lines[index];\n    const color = getByMap(mapVarsByStatus, line.status || 'normal');\n    const from = lines[index - 1] ? lines[index - 1].size : 0;\n    const to = line.size;\n    background += `${color} ${from}px, ${color} ${to}px${\n      index < length - 1 ? ', ' : ')'\n    }`;\n  }\n\n  return background;\n};\n\nconst getActiveLineSize = (\n  activeStepIndex: number | undefined,\n  lines: Line[],\n  lineSize: number,\n) => {\n  const active = activeStepIndex ? Math.max(activeStepIndex - 1, 0) : undefined;\n  if (typeof active !== 'number' || active === 0) {\n    return 0;\n  }\n\n  return lines[active] ? lines[active].size : lineSize;\n};\n\nexport const ProgressStepBarLine = (props: ProgressStepBarLineProps) => {\n  const { lines, activeStepIndex, size, direction, ...otherProps } = props;\n  const background = backgroundGenerate(lines, direction);\n  const lineSize = lines.length > 0 ? lines[lines.length - 1].size : 0;\n  const activeLineSize = getActiveLineSize(activeStepIndex, lines, lineSize);\n\n  return (\n    <div\n      {...otherProps}\n      className={cnProgressStepBarLine({ size, direction })}\n      style={{\n        ['--line-size' as string]: `${lineSize}px`,\n        ['--line-background' as string]: background,\n        ['--line-active-size' as string]: `${activeLineSize}px`,\n      }}\n    />\n  );\n};\n"],"mappings":"qNAAA,kCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,QAAT,+B,GAUMC,sBAAqB,CAAGF,EAAE,CAAC,qBAAD,C,CAE1BG,eAA2C,CAAG,CAClDC,MAAM,CAAE,wBAD0C,CAElDC,OAAO,CAAE,yBAFyC,CAGlDC,OAAO,CAAE,yBAHyC,CAIlDC,KAAK,CAAE,uBAJ2C,C,CAO9CC,kBAAkB,CAAG,SAACC,CAAD,CAAgBC,CAAhB,CAA6C,CAOtE,OANIC,EAAU,2BACE,YAAd,GAAAD,CAAS,CAAoB,IAApB,CAA2B,KADxB,SAMd,CAFQE,CAER,CAFmBH,CAEnB,CAFQG,MAER,CAASC,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGD,CAA5B,CAAoCC,CAAK,EAAzC,CAA6C,IACrCC,EAAI,CAAGL,CAAK,CAACI,CAAD,CADyB,CAErCE,CAAK,CAAGd,QAAQ,CAACE,eAAD,CAAkBW,CAAI,CAACE,MAAL,EAAe,QAAjC,CAFqB,CAGrCC,CAAI,CAAGR,CAAK,CAACI,CAAK,CAAG,CAAT,CAAL,CAAmBJ,CAAK,CAACI,CAAK,CAAG,CAAT,CAAL,CAAiBK,IAApC,CAA2C,CAHb,CAIrCC,CAAE,CAAGL,CAAI,CAACI,IAJ2B,CAK3CP,CAAU,YAAOI,CAAP,aAAgBE,CAAhB,gBAA2BF,CAA3B,aAAoCI,CAApC,cACRN,CAAK,CAAGD,CAAM,CAAG,CAAjB,CAAqB,IAArB,CAA4B,GADpB,CAGX,CAED,MAAOD,EACR,C,CAEKS,iBAAiB,CAAG,SACxBC,CADwB,CAExBZ,CAFwB,CAGxBa,CAHwB,CAIrB,CACH,GAAMC,EAAM,CAAGF,CAAe,CAAGG,IAAI,CAACC,GAAL,CAASJ,CAAe,CAAG,CAA3B,CAA8B,CAA9B,CAAH,OAA9B,CADG,MAEmB,QAAlB,QAAOE,EAAP,EAAyC,CAAX,GAAAA,CAF/B,CAGM,CAHN,CAMId,CAAK,CAACc,CAAD,CAAL,CAAgBd,CAAK,CAACc,CAAD,CAAL,CAAcL,IAA9B,CAAqCI,CAC7C,C,CAED,MAAO,IAAMI,oBAAmB,CAAG,SAACC,CAAD,CAAqC,OAC9DlB,CAD8D,CACHkB,CADG,CAC9DlB,KAD8D,CACvDY,CADuD,CACHM,CADG,CACvDN,eADuD,CACtCH,CADsC,CACHS,CADG,CACtCT,IADsC,CAChCR,CADgC,CACHiB,CADG,CAChCjB,SADgC,CAClBkB,CADkB,0BACHD,CADG,YAEhEhB,CAAU,CAAGH,kBAAkB,CAACC,CAAD,CAAQC,CAAR,CAFiC,CAGhEY,CAAQ,CAAkB,CAAf,CAAAb,CAAK,CAACG,MAAN,CAAmBH,CAAK,CAACA,CAAK,CAACG,MAAN,CAAe,CAAhB,CAAL,CAAwBM,IAA3C,CAAkD,CAHG,CAIhEW,CAAc,CAAGT,iBAAiB,CAACC,CAAD,CAAkBZ,CAAlB,CAAyBa,CAAzB,CAJ8B,CAMtE,MACE,4CACMM,CADN,EAEE,SAAS,CAAE1B,qBAAqB,CAAC,CAAEgB,IAAI,CAAJA,CAAF,CAAQR,SAAS,CAATA,CAAR,CAAD,CAFlC,CAGE,KAAK,yBACF,aADE,WAC2BY,CAD3B,0BAEF,mBAFE,CAE8BX,CAF9B,oBAGF,oBAHE,WAGkCkB,CAHlC,UAHP,GAUH,CAjBM"}
+{"version":3,"file":"ProgressStepBarLine.js","names":["React","cn","cnProgressStepBarLine","getActiveLineSize","activeStepIndex","lines","lineSizes","map","size","active","Math","max","splice","reduce","a","b","getPathParams","direction","paths","width","forEach","status","push","height","x","y","fill","ProgressStepBarLine","props","otherProps","lineSize","activeLineSize","index"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.tsx"],"sourcesContent":["import './ProgressStepBarLine.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Line, PropDirection, PropSize } from '../helpers';\n\ntype ProgressStepBarLineProps = {\n  lines: Line[];\n  size: PropSize;\n  direction: PropDirection;\n  activeStepIndex?: number;\n};\n\nconst cnProgressStepBarLine = cn('ProgressStepBarLine');\n\nconst getActiveLineSize = (\n  activeStepIndex: number | undefined,\n  lines: Line[],\n) => {\n  const lineSizes = lines.map(({ size }) => size);\n  const active = activeStepIndex ? Math.max(activeStepIndex, 0) : undefined;\n  if (typeof active !== 'number' || active === 0) {\n    return 0;\n  }\n\n  return lineSizes.splice(0, active).reduce((a, b) => a + b);\n};\n\ntype PathItem = {\n  fill: string;\n  height: string | number;\n  width: string | number;\n  x: number;\n  y: number;\n};\nconst getPathParams = (lines: Line[], direction: PropDirection) => {\n  const paths: PathItem[] = [];\n  let width = 0;\n  lines.forEach(({ size, status }) => {\n    paths.push({\n      width:\n        direction === 'horizontal'\n          ? size\n          : 'var(--progress-step-bar-line-width)',\n      height:\n        direction === 'horizontal'\n          ? 'var(--progress-step-bar-line-height)'\n          : size,\n      x: direction === 'horizontal' ? width : 0,\n      y: direction === 'horizontal' ? 0 : width,\n      fill: `var(--color-bg-${status || 'normal'})`,\n    });\n    width += size;\n  });\n  return paths;\n};\n\nexport const ProgressStepBarLine = (props: ProgressStepBarLineProps) => {\n  const { lines, activeStepIndex, size, direction, ...otherProps } = props;\n  const lineSize = lines.map(({ size }) => size).reduce((a, b) => a + b);\n  const activeLineSize = getActiveLineSize(activeStepIndex, lines);\n\n  return (\n    <div\n      {...otherProps}\n      className={cnProgressStepBarLine({ size, direction })}\n      style={{\n        ['--line-size' as string]: `${lineSize}px`,\n        ['--line-active-size' as string]: `${activeLineSize}px`,\n      }}\n    >\n      <svg\n        className={cnProgressStepBarLine('Svg')}\n        width=\"100%\"\n        height=\"100%\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {getPathParams(lines, direction).map(\n          ({ fill, height, width, x, y }, index) => (\n            <rect key={index} style={{ height, width, fill }} x={x} y={y} />\n          ),\n        )}\n      </svg>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/__internal__/src/components/ProgressStepBar/helpers.d.ts

@@ -74,6 +74,7 @@ export declare type ProgressStepBarItemProps = {
     size: PropSize;
     onClick?: (e: React.MouseEvent) => void;
     pointRef?: React.RefObject<HTMLButtonElement>;
+    className?: string;
 };
 export declare const cnProgressStepBar: import("@bem-react/classname").ClassNameFormatter;
 export declare const defaultGetItemLabel: PropGetItemLabel<DefaultItem>;
@@ -120,3 +121,4 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
 };
 export declare const getItemPosition: (index: number, lendth: number) => "end" | "start" | "center";
 export declare const getLineSize: (container: React.RefObject<HTMLElement>, activeElement: React.RefObject<HTMLElement>, direction: PropDirection) => number;
+export declare const calculateLines: (refs: React.RefObject<HTMLElement>[], direction: PropDirection) => number[];

package/__internal__/src/components/ProgressStepBar/helpers.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{cn}from"../../utils/bem";export var propSize=["s","xs","m"];export var propSizeDefault=propSize[0];export var propDirection=["horizontal","vertical"];export var propDirectionDefault=propDirection[0];export var propStatus=["normal","success","warning","alert"];export var propStatusDefault=propStatus[0];export var pointNumbersMap=[0,1,2,3,4,5,6,7,8,9];export var propPosition=["center","start","end"];export var propPositionDefault=propPosition[0];export var cnProgressStepBar=cn("ProgressStepBar");export var defaultGetItemLabel=function(a){return a.label};export var defaultGetItemTooltipContent=function(a){return a.tooltipContent};export var defaultGetItemPoint=function(a){return a.point};export var defaultGetItemLineStatus=function(a){return a.lineStatus};export var defaultGetItemProgress=function(a){return a.progress};export var defaultGetItemContent=function(a){return a.content};export var defaultGetItemStatus=function(a){return a.status};export var defaultGetItemOnClick=function(a){return a.onClick};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemTooltipContent:a.getItemTooltipContent||defaultGetItemTooltipContent,getItemPoint:a.getItemPoint||defaultGetItemPoint,getItemProgress:a.getItemProgress||defaultGetItemProgress,getItemContent:a.getItemContent||defaultGetItemContent,getItemStatus:a.getItemStatus||defaultGetItemStatus,getItemLineStatus:a.getItemLineStatus||defaultGetItemLineStatus,getItemOnClick:a.getItemOnClick||defaultGetItemOnClick})}export var getItemPosition=function(a,b){var c="center";return a===b-1&&(c="end"),0===a&&(c="start"),c};export var getLineSize=function(a,b,c){var d=0;if(a&&a.current&&b&&b.current){var e=a.current.getBoundingClientRect(),f=b.current.getBoundingClientRect();d="vertical"===c?f.y-e.y+f.height:f.x-e.x}return d};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{cn}from"../../utils/bem";export var propSize=["s","xs","m"];export var propSizeDefault=propSize[0];export var propDirection=["horizontal","vertical"];export var propDirectionDefault=propDirection[0];export var propStatus=["normal","success","warning","alert"];export var propStatusDefault=propStatus[0];export var pointNumbersMap=[0,1,2,3,4,5,6,7,8,9];export var propPosition=["center","start","end"];export var propPositionDefault=propPosition[0];export var cnProgressStepBar=cn("ProgressStepBar");export var defaultGetItemLabel=function(a){return a.label};export var defaultGetItemTooltipContent=function(a){return a.tooltipContent};export var defaultGetItemPoint=function(a){return a.point};export var defaultGetItemLineStatus=function(a){return a.lineStatus};export var defaultGetItemProgress=function(a){return a.progress};export var defaultGetItemContent=function(a){return a.content};export var defaultGetItemStatus=function(a){return a.status};export var defaultGetItemOnClick=function(a){return a.onClick};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemTooltipContent:a.getItemTooltipContent||defaultGetItemTooltipContent,getItemPoint:a.getItemPoint||defaultGetItemPoint,getItemProgress:a.getItemProgress||defaultGetItemProgress,getItemContent:a.getItemContent||defaultGetItemContent,getItemStatus:a.getItemStatus||defaultGetItemStatus,getItemLineStatus:a.getItemLineStatus||defaultGetItemLineStatus,getItemOnClick:a.getItemOnClick||defaultGetItemOnClick})}export var getItemPosition=function(a,b){var c="center";return a===b-1&&(c="end"),0===a&&(c="start"),c};export var getLineSize=function(a,b,c){var d=0;if(a&&a.current&&b&&b.current){var e=a.current.getBoundingClientRect(),f=b.current.getBoundingClientRect();d="vertical"===c?f.y-e.y+f.height:f.x-e.x}return d};var getRefSize=function(a){if(a.current){var b=a.current.getBoundingClientRect(),c=b.width,d=b.height;return[c,d]}return[0,0]};export var calculateLines=function(a,b){var c=[];return a.forEach(function(d,e){if(e!==a.length-1){var f=getRefSize(d),g=getRefSize(a[e+1]),h=0;h=0===e?"horizontal"===b?f[0]+g[0]/2:f[1]:e===a.length-2?"horizontal"===b?f[0]/2+g[0]:f[1]:"horizontal"===b?f[0]/2+g[0]/2:f[1],c.push(h)}}),c};
 //# sourceMappingURL=helpers.js.map

package/__internal__/src/components/ProgressStepBar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["cn","propSize","propSizeDefault","propDirection","propDirectionDefault","propStatus","propStatusDefault","pointNumbersMap","propPosition","propPositionDefault","cnProgressStepBar","defaultGetItemLabel","item","label","defaultGetItemTooltipContent","tooltipContent","defaultGetItemPoint","point","defaultGetItemLineStatus","lineStatus","defaultGetItemProgress","progress","defaultGetItemContent","content","defaultGetItemStatus","status","defaultGetItemOnClick","onClick","withDefaultGetters","props","getItemLabel","getItemTooltipContent","getItemPoint","getItemProgress","getItemContent","getItemStatus","getItemLineStatus","getItemOnClick","getItemPosition","index","lendth","position","getLineSize","container","activeElement","direction","size","current","containerPosition","getBoundingClientRect","activeElementPosition","y","height","x"],"sources":["../../../../../src/components/ProgressStepBar/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const propSize = ['s', 'xs', 'm'] as const;\nexport type PropSize = typeof propSize[number];\nexport const propSizeDefault = propSize[0];\n\nexport const propDirection = ['horizontal', 'vertical'] as const;\nexport type PropDirection = typeof propDirection[number];\nexport const propDirectionDefault = propDirection[0];\n\nexport const propStatus = ['normal', 'success', 'warning', 'alert'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const propStatusDefault = propStatus[0];\n\nexport const pointNumbersMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport type PointNumbersMap = typeof pointNumbersMap[number];\n\nexport const propPosition = ['center', 'start', 'end'] as const;\nexport type PropPosition = typeof propPosition[number];\nexport const propPositionDefault: PropPosition = propPosition[0];\n\nexport type PropGetItemLabel<ITEM> = (item: ITEM) => string | undefined;\nexport type PropGetItemKey<ITEM> = (item: ITEM) => string | number;\nexport type PropGetItemTooltipContent<ITEM> = (\n  item: ITEM,\n) => string | undefined;\nexport type PropGetItemLineStatus<ITEM> = (\n  item: ITEM,\n) => PropStatus | undefined;\nexport type PropGetItemPoint<ITEM> = (\n  item: ITEM,\n) => PointNumbersMap | IconComponent | undefined;\nexport type PropGetItemProgress<ITEM> = (item: ITEM) => boolean | undefined;\nexport type PropGetItemContent<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\nexport type PropGetItemStatus<ITEM> = (item: ITEM) => PropStatus | undefined;\nexport type PropGetItemOnClick<ITEM> = (\n  item: ITEM,\n) => React.EventHandler<React.MouseEvent> | undefined;\n\nexport type DefaultItem = {\n  label?: string;\n  tooltipContent?: string;\n  lineStatus?: PropStatus;\n  point?: PointNumbersMap | IconComponent;\n  status?: PropStatus;\n  progress?: boolean;\n  content?: React.ReactNode;\n  onClick?: React.EventHandler<React.MouseEvent>;\n};\n\nexport type Line = {\n  status: PropStatus;\n  size: number;\n};\n\nexport type ProgressStepBarProps<ITEM = DefaultItem> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      steps: ITEM[];\n      direction?: PropDirection;\n      size?: PropSize;\n      activeStepIndex?: number;\n      onItemClick?: (props: {\n        e: React.MouseEvent;\n        item: ITEM;\n        index: number;\n      }) => void;\n      getItemLabel?: PropGetItemLabel<ITEM>;\n      getItemLineStatus?: PropGetItemLineStatus<ITEM>;\n      getItemTooltipContent?: PropGetItemTooltipContent<ITEM>;\n      getItemPoint?: PropGetItemPoint<ITEM>;\n      getItemProgress?: PropGetItemProgress<ITEM>;\n      getItemContent?: PropGetItemContent<ITEM>;\n      getItemStatus?: PropGetItemStatus<ITEM>;\n      getItemOnClick?: PropGetItemOnClick<ITEM>;\n    },\n    HTMLDivElement\n  > &\n    (ITEM extends { label: DefaultItem['label'] }\n      ? {}\n      : { getItemLabel: PropGetItemLabel<ITEM> });\n\nexport type ProgressStepBarItemProps = {\n  content?: React.ReactNode;\n  label?: string;\n  point?: PointNumbersMap | IconComponent;\n  progress?: boolean;\n  status?: PropStatus | 'system';\n  tooltipContent?: string;\n  tooltipZIndex?: number;\n  position?: PropPosition;\n  direction: PropDirection;\n  size: PropSize;\n  onClick?: (e: React.MouseEvent) => void;\n  pointRef?: React.RefObject<HTMLButtonElement>;\n};\n\nexport const cnProgressStepBar = cn('ProgressStepBar');\n\nexport const defaultGetItemLabel: PropGetItemLabel<DefaultItem> = (item) =>\n  item.label;\nexport const defaultGetItemTooltipContent: PropGetItemTooltipContent<\n  DefaultItem\n> = (item) => item.tooltipContent;\nexport const defaultGetItemPoint: PropGetItemPoint<DefaultItem> = (item) =>\n  item.point;\nexport const defaultGetItemLineStatus: PropGetItemLineStatus<DefaultItem> = (\n  item,\n) => item.lineStatus;\nexport const defaultGetItemProgress: PropGetItemProgress<DefaultItem> = (\n  item,\n) => item.progress;\nexport const defaultGetItemContent: PropGetItemContent<DefaultItem> = (item) =>\n  item.content;\nexport const defaultGetItemStatus: PropGetItemStatus<DefaultItem> = (item) =>\n  item.status;\nexport const defaultGetItemOnClick: PropGetItemOnClick<DefaultItem> = (item) =>\n  item.onClick;\n\nexport type ProgressStepBarComponent = <ITEM = DefaultItem>(\n  props: ProgressStepBarProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type ProgressStepBarItemComponent = (\n  props: PropsWithHTMLAttributesAndRef<\n    ProgressStepBarItemProps,\n    HTMLDivElement\n  >,\n) => React.ReactElement | null;\n\nexport function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITEM>) {\n  return {\n    ...props,\n    getItemLabel: props.getItemLabel || defaultGetItemLabel,\n    getItemTooltipContent:\n      props.getItemTooltipContent || defaultGetItemTooltipContent,\n    getItemPoint: props.getItemPoint || defaultGetItemPoint,\n    getItemProgress: props.getItemProgress || defaultGetItemProgress,\n    getItemContent: props.getItemContent || defaultGetItemContent,\n    getItemStatus: props.getItemStatus || defaultGetItemStatus,\n    getItemLineStatus: props.getItemLineStatus || defaultGetItemLineStatus,\n    getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,\n  };\n}\n\nexport const getItemPosition = (index: number, lendth: number) => {\n  let position: PropPosition = 'center';\n  if (index === lendth - 1) position = 'end';\n  if (index === 0) position = 'start';\n\n  return position;\n};\n\nexport const getLineSize: (\n  container: React.RefObject<HTMLElement>,\n  activeElement: React.RefObject<HTMLElement>,\n  direction: PropDirection,\n) => number = (container, activeElement, direction) => {\n  let size = 0;\n  if (\n    container &&\n    container.current &&\n    activeElement &&\n    activeElement.current\n  ) {\n    const containerPosition = container.current.getBoundingClientRect();\n    const activeElementPosition = activeElement.current.getBoundingClientRect();\n    if (direction === 'vertical')\n      size =\n        activeElementPosition.y -\n        containerPosition.y +\n        activeElementPosition.height;\n    else size = activeElementPosition.x - containerPosition.x;\n  }\n  return size;\n};\n"],"mappings":"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"}
+{"version":3,"file":"helpers.js","names":["cn","propSize","propSizeDefault","propDirection","propDirectionDefault","propStatus","propStatusDefault","pointNumbersMap","propPosition","propPositionDefault","cnProgressStepBar","defaultGetItemLabel","item","label","defaultGetItemTooltipContent","tooltipContent","defaultGetItemPoint","point","defaultGetItemLineStatus","lineStatus","defaultGetItemProgress","progress","defaultGetItemContent","content","defaultGetItemStatus","status","defaultGetItemOnClick","onClick","withDefaultGetters","props","getItemLabel","getItemTooltipContent","getItemPoint","getItemProgress","getItemContent","getItemStatus","getItemLineStatus","getItemOnClick","getItemPosition","index","lendth","position","getLineSize","container","activeElement","direction","size","current","containerPosition","getBoundingClientRect","activeElementPosition","y","height","x","getRefSize","ref","width","calculateLines","refs","sizes","forEach","length","firstSize","secondSize","push"],"sources":["../../../../../src/components/ProgressStepBar/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const propSize = ['s', 'xs', 'm'] as const;\nexport type PropSize = typeof propSize[number];\nexport const propSizeDefault = propSize[0];\n\nexport const propDirection = ['horizontal', 'vertical'] as const;\nexport type PropDirection = typeof propDirection[number];\nexport const propDirectionDefault = propDirection[0];\n\nexport const propStatus = ['normal', 'success', 'warning', 'alert'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const propStatusDefault = propStatus[0];\n\nexport const pointNumbersMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport type PointNumbersMap = typeof pointNumbersMap[number];\n\nexport const propPosition = ['center', 'start', 'end'] as const;\nexport type PropPosition = typeof propPosition[number];\nexport const propPositionDefault: PropPosition = propPosition[0];\n\nexport type PropGetItemLabel<ITEM> = (item: ITEM) => string | undefined;\nexport type PropGetItemKey<ITEM> = (item: ITEM) => string | number;\nexport type PropGetItemTooltipContent<ITEM> = (\n  item: ITEM,\n) => string | undefined;\nexport type PropGetItemLineStatus<ITEM> = (\n  item: ITEM,\n) => PropStatus | undefined;\nexport type PropGetItemPoint<ITEM> = (\n  item: ITEM,\n) => PointNumbersMap | IconComponent | undefined;\nexport type PropGetItemProgress<ITEM> = (item: ITEM) => boolean | undefined;\nexport type PropGetItemContent<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\nexport type PropGetItemStatus<ITEM> = (item: ITEM) => PropStatus | undefined;\nexport type PropGetItemOnClick<ITEM> = (\n  item: ITEM,\n) => React.EventHandler<React.MouseEvent> | undefined;\n\nexport type DefaultItem = {\n  label?: string;\n  tooltipContent?: string;\n  lineStatus?: PropStatus;\n  point?: PointNumbersMap | IconComponent;\n  status?: PropStatus;\n  progress?: boolean;\n  content?: React.ReactNode;\n  onClick?: React.EventHandler<React.MouseEvent>;\n};\n\nexport type Line = {\n  status: PropStatus;\n  size: number;\n};\n\nexport type ProgressStepBarProps<ITEM = DefaultItem> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      steps: ITEM[];\n      direction?: PropDirection;\n      size?: PropSize;\n      activeStepIndex?: number;\n      onItemClick?: (props: {\n        e: React.MouseEvent;\n        item: ITEM;\n        index: number;\n      }) => void;\n      getItemLabel?: PropGetItemLabel<ITEM>;\n      getItemLineStatus?: PropGetItemLineStatus<ITEM>;\n      getItemTooltipContent?: PropGetItemTooltipContent<ITEM>;\n      getItemPoint?: PropGetItemPoint<ITEM>;\n      getItemProgress?: PropGetItemProgress<ITEM>;\n      getItemContent?: PropGetItemContent<ITEM>;\n      getItemStatus?: PropGetItemStatus<ITEM>;\n      getItemOnClick?: PropGetItemOnClick<ITEM>;\n    },\n    HTMLDivElement\n  > &\n    (ITEM extends { label: DefaultItem['label'] }\n      ? {}\n      : { getItemLabel: PropGetItemLabel<ITEM> });\n\nexport type ProgressStepBarItemProps = {\n  content?: React.ReactNode;\n  label?: string;\n  point?: PointNumbersMap | IconComponent;\n  progress?: boolean;\n  status?: PropStatus | 'system';\n  tooltipContent?: string;\n  tooltipZIndex?: number;\n  position?: PropPosition;\n  direction: PropDirection;\n  size: PropSize;\n  onClick?: (e: React.MouseEvent) => void;\n  pointRef?: React.RefObject<HTMLButtonElement>;\n  className?: string;\n};\n\nexport const cnProgressStepBar = cn('ProgressStepBar');\n\nexport const defaultGetItemLabel: PropGetItemLabel<DefaultItem> = (item) =>\n  item.label;\nexport const defaultGetItemTooltipContent: PropGetItemTooltipContent<\n  DefaultItem\n> = (item) => item.tooltipContent;\nexport const defaultGetItemPoint: PropGetItemPoint<DefaultItem> = (item) =>\n  item.point;\nexport const defaultGetItemLineStatus: PropGetItemLineStatus<DefaultItem> = (\n  item,\n) => item.lineStatus;\nexport const defaultGetItemProgress: PropGetItemProgress<DefaultItem> = (\n  item,\n) => item.progress;\nexport const defaultGetItemContent: PropGetItemContent<DefaultItem> = (item) =>\n  item.content;\nexport const defaultGetItemStatus: PropGetItemStatus<DefaultItem> = (item) =>\n  item.status;\nexport const defaultGetItemOnClick: PropGetItemOnClick<DefaultItem> = (item) =>\n  item.onClick;\n\nexport type ProgressStepBarComponent = <ITEM = DefaultItem>(\n  props: ProgressStepBarProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type ProgressStepBarItemComponent = (\n  props: PropsWithHTMLAttributesAndRef<\n    ProgressStepBarItemProps,\n    HTMLDivElement\n  >,\n) => React.ReactElement | null;\n\nexport function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITEM>) {\n  return {\n    ...props,\n    getItemLabel: props.getItemLabel || defaultGetItemLabel,\n    getItemTooltipContent:\n      props.getItemTooltipContent || defaultGetItemTooltipContent,\n    getItemPoint: props.getItemPoint || defaultGetItemPoint,\n    getItemProgress: props.getItemProgress || defaultGetItemProgress,\n    getItemContent: props.getItemContent || defaultGetItemContent,\n    getItemStatus: props.getItemStatus || defaultGetItemStatus,\n    getItemLineStatus: props.getItemLineStatus || defaultGetItemLineStatus,\n    getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,\n  };\n}\n\nexport const getItemPosition = (index: number, lendth: number) => {\n  let position: PropPosition = 'center';\n  if (index === lendth - 1) position = 'end';\n  if (index === 0) position = 'start';\n\n  return position;\n};\n\nexport const getLineSize: (\n  container: React.RefObject<HTMLElement>,\n  activeElement: React.RefObject<HTMLElement>,\n  direction: PropDirection,\n) => number = (container, activeElement, direction) => {\n  let size = 0;\n  if (\n    container &&\n    container.current &&\n    activeElement &&\n    activeElement.current\n  ) {\n    const containerPosition = container.current.getBoundingClientRect();\n    const activeElementPosition = activeElement.current.getBoundingClientRect();\n    if (direction === 'vertical')\n      size =\n        activeElementPosition.y -\n        containerPosition.y +\n        activeElementPosition.height;\n    else size = activeElementPosition.x - containerPosition.x;\n  }\n  return size;\n};\n\nconst getRefSize = (ref: React.RefObject<HTMLElement>) => {\n  if (ref.current) {\n    const { width, height } = ref.current.getBoundingClientRect();\n    return [width, height];\n  }\n  return [0, 0];\n};\n\nexport const calculateLines = (\n  refs: React.RefObject<HTMLElement>[],\n  direction: PropDirection,\n) => {\n  const sizes: number[] = [];\n  refs.forEach((ref, index) => {\n    if (index !== refs.length - 1) {\n      const firstSize = getRefSize(ref);\n      const secondSize = getRefSize(refs[index + 1]);\n      let size = 0;\n      if (index === 0) {\n        size =\n          direction === 'horizontal'\n            ? firstSize[0] + secondSize[0] / 2\n            : firstSize[1];\n      } else if (index === refs.length - 2) {\n        size =\n          direction === 'horizontal'\n            ? firstSize[0] / 2 + secondSize[0]\n            : firstSize[1];\n      } else {\n        size =\n          direction === 'horizontal'\n            ? firstSize[0] / 2 + secondSize[0] / 2\n            : firstSize[1];\n      }\n      sizes.push(size);\n    }\n  });\n  return sizes;\n};\n"],"mappings":"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"}

package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","label","active","hovered","multiple","size","indent","disabled"];import"./SelectItem.css";import React from"react";import{ListItem}from"../../ListCanary";import{cn}from"../../../utils/bem";import{Checkbox}from"../../Checkbox/Checkbox";var sizeCheckboxMap={xs:"m",s:"m",m:"l",l:"l"};export var cnSelectItem=cn("SelectItem");export var SelectItem=function(a){var b=a.className,c=a.label,d=a.active,e=a.hovered,f=a.multiple,g=a.size,h=a.indent,i=a.disabled,j=_objectWithoutProperties(a,_excluded);return React.createElement(ListItem,Object.assign({},j,{className:cnSelectItem(null,[b]),"aria-selected":d,"aria-disabled":i,role:"option",label:c,innerOffset:h,size:g,active:e,checked:!f&&d,disabled:i,leftSide:f&&React.createElement(Checkbox,{checked:d,size:sizeCheckboxMap[g]})}),c)};
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","label","active","hovered","multiple","size","indent","disabled"];import"./SelectItem.css";import React from"react";import{ListItem}from"../../ListCanary";import{cn}from"../../../utils/bem";import{Checkbox}from"../../Checkbox/Checkbox";var sizeCheckboxMap={xs:"m",s:"m",m:"l",l:"l"};export var cnSelectItem=cn("SelectItem");export var SelectItem=function(a){var b=a.className,c=a.label,d=a.active,e=a.hovered,f=a.multiple,g=a.size,h=a.indent,i=a.disabled,j=_objectWithoutProperties(a,_excluded);return React.createElement(ListItem,Object.assign({},j,{className:cnSelectItem(null,[b]),"aria-selected":d,"aria-disabled":i,role:"option",label:c,innerOffset:h,size:g,active:e,checked:!f&&d,disabled:i,leftSide:f&&React.createElement(Checkbox,{checked:d,disabled:i,size:sizeCheckboxMap[g]})}),c)};
 //# sourceMappingURL=SelectItem.js.map

package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","names":["React","ListItem","cn","Checkbox","sizeCheckboxMap","xs","s","m","l","cnSelectItem","SelectItem","props","className","label","active","hovered","multiple","size","indent","disabled","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectItem/SelectItem.tsx"],"sourcesContent":["import './SelectItem.css';\n\nimport React from 'react';\n\nimport { ListItem } from '##/components/ListCanary';\nimport { cn } from '##/utils/bem';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { Checkbox, CheckboxPropSize } from '../../Checkbox/Checkbox';\nimport { PropSize } from '../types';\n\nexport type SelectItemProps = PropsWithHTMLAttributes<\n  {\n    label: string;\n    active: boolean;\n    hovered: boolean;\n    multiple: boolean;\n    size: PropSize;\n    indent: 'normal' | 'increased';\n    disabled: boolean | undefined;\n  },\n  HTMLDivElement\n>;\n\nconst sizeCheckboxMap: Record<PropSize, CheckboxPropSize> = {\n  xs: 'm',\n  s: 'm',\n  m: 'l',\n  l: 'l',\n};\n\nexport const cnSelectItem = cn('SelectItem');\n\nexport const SelectItem: React.FC<SelectItemProps> = (props) => {\n  const {\n    className,\n    label,\n    active,\n    hovered,\n    multiple,\n    size,\n    indent,\n    disabled,\n    ...otherProps\n  } = props;\n\n  return (\n    <ListItem\n      {...otherProps}\n      className={cnSelectItem(null, [className])}\n      aria-selected={active}\n      aria-disabled={disabled}\n      role=\"option\"\n      label={label}\n      innerOffset={indent}\n      size={size}\n      active={hovered}\n      checked={!multiple && active}\n      disabled={disabled}\n      leftSide={\n        multiple && <Checkbox checked={active} size={sizeCheckboxMap[size]} />\n      }\n    >\n      {label}\n    </ListItem>\n  );\n};\n"],"mappings":"kLAAA,yBAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,QAAT,wBACA,OAASC,EAAT,0BAGA,OAASC,QAAT,+BAgBA,GAAMC,gBAAmD,CAAG,CAC1DC,EAAE,CAAE,GADsD,CAE1DC,CAAC,CAAE,GAFuD,CAG1DC,CAAC,CAAE,GAHuD,CAI1DC,CAAC,CAAE,GAJuD,CAA5D,CAOA,MAAO,IAAMC,aAAY,CAAGP,EAAE,CAAC,YAAD,CAAvB,CAEP,MAAO,IAAMQ,WAAqC,CAAG,SAACC,CAAD,CAAW,CAC9D,GACEC,EADF,CAUID,CAVJ,CACEC,SADF,CAEEC,CAFF,CAUIF,CAVJ,CAEEE,KAFF,CAGEC,CAHF,CAUIH,CAVJ,CAGEG,MAHF,CAIEC,CAJF,CAUIJ,CAVJ,CAIEI,OAJF,CAKEC,CALF,CAUIL,CAVJ,CAKEK,QALF,CAMEC,CANF,CAUIN,CAVJ,CAMEM,IANF,CAOEC,CAPF,CAUIP,CAVJ,CAOEO,MAPF,CAQEC,CARF,CAUIR,CAVJ,CAQEQ,QARF,CASKC,CATL,0BAUIT,CAVJ,YAYA,MACE,qBAAC,QAAD,kBACMS,CADN,EAEE,SAAS,CAAEX,YAAY,CAAC,IAAD,CAAO,CAACG,CAAD,CAAP,CAFzB,CAGE,gBAAeE,CAHjB,CAIE,gBAAeK,CAJjB,CAKE,IAAI,CAAC,QALP,CAME,KAAK,CAAEN,CANT,CAOE,WAAW,CAAEK,CAPf,CAQE,IAAI,CAAED,CARR,CASE,MAAM,CAAEF,CATV,CAUE,OAAO,CAAE,CAACC,CAAD,EAAaF,CAVxB,CAWE,QAAQ,CAAEK,CAXZ,CAYE,QAAQ,CACNH,CAAQ,EAAI,oBAAC,QAAD,EAAU,OAAO,CAAEF,CAAnB,CAA2B,IAAI,CAAEV,eAAe,CAACa,CAAD,CAAhD,EAbhB,GAgBGJ,CAhBH,CAmBH,CAjCM"}
+{"version":3,"file":"SelectItem.js","names":["React","ListItem","cn","Checkbox","sizeCheckboxMap","xs","s","m","l","cnSelectItem","SelectItem","props","className","label","active","hovered","multiple","size","indent","disabled","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectItem/SelectItem.tsx"],"sourcesContent":["import './SelectItem.css';\n\nimport React from 'react';\n\nimport { ListItem } from '##/components/ListCanary';\nimport { cn } from '##/utils/bem';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { Checkbox, CheckboxPropSize } from '../../Checkbox/Checkbox';\nimport { PropSize } from '../types';\n\nexport type SelectItemProps = PropsWithHTMLAttributes<\n  {\n    label: string;\n    active: boolean;\n    hovered: boolean;\n    multiple: boolean;\n    size: PropSize;\n    indent: 'normal' | 'increased';\n    disabled: boolean | undefined;\n  },\n  HTMLDivElement\n>;\n\nconst sizeCheckboxMap: Record<PropSize, CheckboxPropSize> = {\n  xs: 'm',\n  s: 'm',\n  m: 'l',\n  l: 'l',\n};\n\nexport const cnSelectItem = cn('SelectItem');\n\nexport const SelectItem: React.FC<SelectItemProps> = (props) => {\n  const {\n    className,\n    label,\n    active,\n    hovered,\n    multiple,\n    size,\n    indent,\n    disabled,\n    ...otherProps\n  } = props;\n\n  return (\n    <ListItem\n      {...otherProps}\n      className={cnSelectItem(null, [className])}\n      aria-selected={active}\n      aria-disabled={disabled}\n      role=\"option\"\n      label={label}\n      innerOffset={indent}\n      size={size}\n      active={hovered}\n      checked={!multiple && active}\n      disabled={disabled}\n      leftSide={\n        multiple && (\n          <Checkbox\n            checked={active}\n            disabled={disabled}\n            size={sizeCheckboxMap[size]}\n          />\n        )\n      }\n    >\n      {label}\n    </ListItem>\n  );\n};\n"],"mappings":"kLAAA,yBAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,QAAT,wBACA,OAASC,EAAT,0BAGA,OAASC,QAAT,+BAgBA,GAAMC,gBAAmD,CAAG,CAC1DC,EAAE,CAAE,GADsD,CAE1DC,CAAC,CAAE,GAFuD,CAG1DC,CAAC,CAAE,GAHuD,CAI1DC,CAAC,CAAE,GAJuD,CAA5D,CAOA,MAAO,IAAMC,aAAY,CAAGP,EAAE,CAAC,YAAD,CAAvB,CAEP,MAAO,IAAMQ,WAAqC,CAAG,SAACC,CAAD,CAAW,CAC9D,GACEC,EADF,CAUID,CAVJ,CACEC,SADF,CAEEC,CAFF,CAUIF,CAVJ,CAEEE,KAFF,CAGEC,CAHF,CAUIH,CAVJ,CAGEG,MAHF,CAIEC,CAJF,CAUIJ,CAVJ,CAIEI,OAJF,CAKEC,CALF,CAUIL,CAVJ,CAKEK,QALF,CAMEC,CANF,CAUIN,CAVJ,CAMEM,IANF,CAOEC,CAPF,CAUIP,CAVJ,CAOEO,MAPF,CAQEC,CARF,CAUIR,CAVJ,CAQEQ,QARF,CASKC,CATL,0BAUIT,CAVJ,YAYA,MACE,qBAAC,QAAD,kBACMS,CADN,EAEE,SAAS,CAAEX,YAAY,CAAC,IAAD,CAAO,CAACG,CAAD,CAAP,CAFzB,CAGE,gBAAeE,CAHjB,CAIE,gBAAeK,CAJjB,CAKE,IAAI,CAAC,QALP,CAME,KAAK,CAAEN,CANT,CAOE,WAAW,CAAEK,CAPf,CAQE,IAAI,CAAED,CARR,CASE,MAAM,CAAEF,CATV,CAUE,OAAO,CAAE,CAACC,CAAD,EAAaF,CAVxB,CAWE,QAAQ,CAAEK,CAXZ,CAYE,QAAQ,CACNH,CAAQ,EACN,oBAAC,QAAD,EACE,OAAO,CAAEF,CADX,CAEE,QAAQ,CAAEK,CAFZ,CAGE,IAAI,CAAEf,eAAe,CAACa,CAAD,CAHvB,EAdN,GAsBGJ,CAtBH,CAyBH,CAvCM"}

package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.css

@@ -1 +1 @@
-.SelectValueTag{margin:0 var(--tag-space) var(--tag-space) 0}.SelectValueTag .TagBase-Label{word-break:break-word}.SelectValueTag_disabled{opacity:.8}
+.TagBase.SelectValueTag{margin:0 var(--tag-space) var(--tag-space) 0}.TagBase.SelectValueTag .TagBase-Label{word-break:break-word}.TagBase.SelectValueTag_disabled{background-color:var(--color-control-bg-disable);pointer-events:none}.TagBase.SelectValueTag_disabled>*{color:var(--color-control-typo-disable)}

package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.d.ts

@@ -4,6 +4,7 @@ declare type SelectValueTagProps = {
     label: string;
     size: 's' | 'm' | 'l';
     children?: never;
+    disabled?: boolean;
     handleRemove?: (e: React.SyntheticEvent) => void;
 };
 export declare const cnSelectValueTag: import("@bem-react/classname").ClassNameFormatter;

package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.js

@@ -1,2 +1,2 @@
-import"./SelectValueTag.css";import React from"react";import{cn}from"../../../utils/bem";import{Tag}from"../../Tag/Tag";export var cnSelectValueTag=cn("SelectValueTag");export var SelectValueTag=function(a){var b=a.handleRemove,c=a.size,d=a.label;return b?React.createElement(Tag,{className:cnSelectValueTag({size:c}),label:d,mode:"cancel",onCancel:b,size:c}):React.createElement(Tag,{className:cnSelectValueTag({size:c,disabled:!0}),label:d,size:c,mode:"info"})};
+import"./SelectValueTag.css";import React from"react";import{cn}from"../../../utils/bem";import{Tag}from"../../Tag/Tag";export var cnSelectValueTag=cn("SelectValueTag");export var SelectValueTag=function(a){var b=a.handleRemove,c=void 0===b?function(){}:b,d=a.size,e=a.label,f=a.disabled;return React.createElement(Tag,{className:cnSelectValueTag({size:d,disabled:f}),label:e,mode:"cancel",onCancel:c,size:d})};
 //# sourceMappingURL=SelectValueTag.js.map

package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValueTag.js","names":["React","cn","Tag","cnSelectValueTag","SelectValueTag","props","handleRemove","size","label","disabled"],"sources":["../../../../../../src/components/SelectComponents/SelectValueTag/SelectValueTag.tsx"],"sourcesContent":["import './SelectValueTag.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Tag } from '../../Tag/Tag';\n\ntype SelectValueTagProps = {\n  label: string;\n  size: 's' | 'm' | 'l';\n  children?: never;\n  handleRemove?: (e: React.SyntheticEvent) => void;\n};\n\nexport const cnSelectValueTag = cn('SelectValueTag');\n\nexport const SelectValueTag: React.FC<SelectValueTagProps> = (props) => {\n  const { handleRemove, size, label } = props;\n\n  return handleRemove ? (\n    <Tag\n      className={cnSelectValueTag({ size })}\n      label={label}\n      mode=\"cancel\"\n      onCancel={handleRemove}\n      size={size}\n    />\n  ) : (\n    <Tag\n      className={cnSelectValueTag({ size, disabled: true })}\n      label={label}\n      size={size}\n      mode=\"info\"\n    />\n  );\n};\n"],"mappings":"AAAA,6BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,GAAT,qBASA,MAAO,IAAMC,iBAAgB,CAAGF,EAAE,CAAC,gBAAD,CAA3B,CAEP,MAAO,IAAMG,eAA6C,CAAG,SAACC,CAAD,CAAW,CACtE,GAAQC,EAAR,CAAsCD,CAAtC,CAAQC,YAAR,CAAsBC,CAAtB,CAAsCF,CAAtC,CAAsBE,IAAtB,CAA4BC,CAA5B,CAAsCH,CAAtC,CAA4BG,KAA5B,CAEA,MAAOF,EAAY,CACjB,oBAAC,GAAD,EACE,SAAS,CAAEH,gBAAgB,CAAC,CAAEI,IAAI,CAAJA,CAAF,CAAD,CAD7B,CAEE,KAAK,CAAEC,CAFT,CAGE,IAAI,CAAC,QAHP,CAIE,QAAQ,CAAEF,CAJZ,CAKE,IAAI,CAAEC,CALR,EADiB,CASjB,oBAAC,GAAD,EACE,SAAS,CAAEJ,gBAAgB,CAAC,CAAEI,IAAI,CAAJA,CAAF,CAAQE,QAAQ,GAAhB,CAAD,CAD7B,CAEE,KAAK,CAAED,CAFT,CAGE,IAAI,CAAED,CAHR,CAIE,IAAI,CAAC,MAJP,EAOH,CAnBM"}
+{"version":3,"file":"SelectValueTag.js","names":["React","cn","Tag","cnSelectValueTag","SelectValueTag","props","handleRemove","size","label","disabled"],"sources":["../../../../../../src/components/SelectComponents/SelectValueTag/SelectValueTag.tsx"],"sourcesContent":["import './SelectValueTag.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Tag } from '../../Tag/Tag';\n\ntype SelectValueTagProps = {\n  label: string;\n  size: 's' | 'm' | 'l';\n  children?: never;\n  disabled?: boolean;\n  handleRemove?: (e: React.SyntheticEvent) => void;\n};\n\nexport const cnSelectValueTag = cn('SelectValueTag');\n\nexport const SelectValueTag: React.FC<SelectValueTagProps> = (props) => {\n  const { handleRemove = () => {}, size, label, disabled } = props;\n\n  return (\n    <Tag\n      className={cnSelectValueTag({ size, disabled })}\n      label={label}\n      mode=\"cancel\"\n      onCancel={handleRemove}\n      size={size}\n    />\n  );\n};\n"],"mappings":"AAAA,6BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,GAAT,qBAUA,MAAO,IAAMC,iBAAgB,CAAGF,EAAE,CAAC,gBAAD,CAA3B,CAEP,MAAO,IAAMG,eAA6C,CAAG,SAACC,CAAD,CAAW,CACtE,MAA2DA,CAA3D,CAAQC,YAAR,CAAQA,CAAR,YAAuB,UAAM,CAAE,CAA/B,GAAiCC,CAAjC,CAA2DF,CAA3D,CAAiCE,IAAjC,CAAuCC,CAAvC,CAA2DH,CAA3D,CAAuCG,KAAvC,CAA8CC,CAA9C,CAA2DJ,CAA3D,CAA8CI,QAA9C,CAEA,MACE,qBAAC,GAAD,EACE,SAAS,CAAEN,gBAAgB,CAAC,CAAEI,IAAI,CAAJA,CAAF,CAAQE,QAAQ,CAARA,CAAR,CAAD,CAD7B,CAEE,KAAK,CAAED,CAFT,CAGE,IAAI,CAAC,QAHP,CAIE,QAAQ,CAAEF,CAJZ,CAKE,IAAI,CAAEC,CALR,EAQH,CAZM"}

package/__internal__/src/components/Switch/Switch.css

@@ -1 +1 @@
-.Switch{cursor:pointer;display:inline-flex;font-family:var(--font-primary);position:relative}.Switch_size_s{--box-width:28px;--box-height:16px;--switch-font-size:var(--control-text-size-s);--offset:var(--space-xs)}.Switch_size_s .Switch-Input:before{transform:translateX(-12px)}.Switch_size_m{--box-width:36px;--box-height:20px;--switch-font-size:var(--control-text-size-m);--offset:var(--space-xs)}.Switch_size_m .Switch-Input:before{transform:translateX(-16px)}.Switch_size_l{--box-width:44px;--box-height:24px;--switch-font-size:var(--control-text-size-l);--offset:var(--space-s)}.Switch_size_l .Switch-Input:before{transform:translateX(-20px)}.Switch_view_primary:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_primary .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_primary:hover .Switch-Input:checked{--border-color:var(--color-control-bg-primary-hover);--background-color:var(--color-control-bg-primary-hover);--content-color:var(--color-control-typo-primary-hover)}.Switch_view_primary .Switch-Input:checked{--border-color:var(--color-control-bg-primary);--background-color:var(--color-control-bg-primary);--content-color:var(--color-control-typo-primary)}.Switch_view_ghost:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_ghost .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_ghost:hover .Switch-Input:checked{--border-color:var(--color-control-bg-border-default-hover);--background-color:var(--color-control-bg-ghost-hover);--content-color:var(--color-control-typo-ghost-hover)}.Switch_view_ghost .Switch-Input:checked{--border-color:var(--color-control-bg-border-default);--background-color:var(--color-control-bg-ghost);--content-color:var(--color-control-typo-ghost)}.Switch-Input{-webkit-appearance:none;background-color:var(--background-color);border:var(--control-border-width) solid var(--border-color);border-radius:99rem;box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:var(--box-height);margin:0;position:relative;transition:background-color .15s,border-color .15s;width:var(--box-width)}.Switch-Input:before{background-color:var(--content-color);border-radius:999rem;box-sizing:border-box;content:"";height:calc(var(--box-height) - var(--control-border-width)*4);position:absolute;right:1px;top:1px;transition:transform .15s,background-color .15s;width:calc(var(--box-height) - var(--control-border-width)*4)}.Switch-Input:checked{background-color:var(--background-color)}.Switch-Input:checked:before{transform:translateX(0)}.Switch-Label{color:var(--color-control-typo-default);font-size:var(--switch-font-size);margin-left:var(--offset)}.Switch_disabled{pointer-events:none}.Switch_disabled .Switch-Input:disabled{--border-color:transparent;--background-color:var(--color-control-bg-disable);--content-color:var(--color-control-typo-disable)}.Switch_disabled .Switch-Input:disabled~.Switch-Label{color:var(--color-control-typo-disable)}.Switch_align_center{align-items:center}.Switch_align_top{align-items:top}.Switch_align_top .Switch-Input{margin-top:1px}
+.Switch{cursor:pointer;display:inline-flex;font-family:var(--font-primary);position:relative}.Switch_size_xs{--box-width:20px;--box-height:12px;--switch-font-size:var(--control-text-size-xs);--offset:var(--space-2xs)}.Switch_size_xs .Switch-Input:before{transform:translateX(-8px)}.Switch_size_s{--box-width:28px;--box-height:16px;--switch-font-size:var(--control-text-size-s);--offset:var(--space-xs)}.Switch_size_s .Switch-Input:before{transform:translateX(-12px)}.Switch_size_m{--box-width:36px;--box-height:20px;--switch-font-size:var(--control-text-size-m);--offset:var(--space-xs)}.Switch_size_m .Switch-Input:before{transform:translateX(-16px)}.Switch_size_l{--box-width:44px;--box-height:24px;--switch-font-size:var(--control-text-size-l);--offset:var(--space-s)}.Switch_size_l .Switch-Input:before{transform:translateX(-20px)}.Switch_view_primary:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_primary .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_primary:hover .Switch-Input:checked{--border-color:var(--color-control-bg-primary-hover);--background-color:var(--color-control-bg-primary-hover);--content-color:var(--color-control-typo-primary-hover)}.Switch_view_primary .Switch-Input:checked{--border-color:var(--color-control-bg-primary);--background-color:var(--color-control-bg-primary);--content-color:var(--color-control-typo-primary)}.Switch_view_ghost:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_ghost .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_ghost:hover .Switch-Input:checked{--border-color:var(--color-control-bg-border-default-hover);--background-color:var(--color-control-bg-ghost-hover);--content-color:var(--color-control-typo-ghost-hover)}.Switch_view_ghost .Switch-Input:checked{--border-color:var(--color-control-bg-border-default);--background-color:var(--color-control-bg-ghost);--content-color:var(--color-control-typo-ghost)}.Switch-Input{-webkit-appearance:none;background-color:var(--background-color);border:var(--control-border-width) solid var(--border-color);border-radius:99rem;box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:var(--box-height);margin:0;position:relative;transition:background-color .15s,border-color .15s;width:var(--box-width)}.Switch-Input:before{background-color:var(--content-color);border-radius:999rem;box-sizing:border-box;content:"";height:calc(var(--box-height) - var(--control-border-width)*4);position:absolute;right:1px;top:1px;transition:transform .15s,background-color .15s;width:calc(var(--box-height) - var(--control-border-width)*4)}.Switch-Input:checked{background-color:var(--background-color)}.Switch-Input:checked:before{transform:translateX(0)}.Switch-Label{color:var(--color-control-typo-default);font-size:var(--switch-font-size);margin-left:var(--offset)}.Switch_disabled{pointer-events:none}.Switch_disabled .Switch-Input:disabled{--border-color:transparent;--background-color:var(--color-control-bg-disable);--content-color:var(--color-control-typo-disable)}.Switch_disabled .Switch-Input:disabled~.Switch-Label{color:var(--color-control-typo-disable)}.Switch_align_center{align-items:center}.Switch_align_top{align-items:top}.Switch_align_top .Switch-Input{margin-top:1px}