@consta/uikit 4.10.0 → 4.12.0

package/__internal__/src/components/Slider/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' | 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n  e?:\n    | Event\n    | React.TouchEvent\n    | React.MouseEvent\n    | React.KeyboardEvent\n    | React.ChangeEvent;\n  value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number | undefined) => string;\n\ntype Props<RANGE extends boolean = false> = {\n  className?: string;\n  step?: number | number[];\n  view?: PropView;\n  disabled?: boolean;\n  range?: RANGE;\n  withTooltip?: boolean;\n  value: SliderValue<RANGE>;\n  label?: string;\n  caption?: string;\n  status?: PropStatus;\n  min?: number;\n  size?: PropSize;\n  max?: number;\n  onChange?: PropOnChange<RANGE>;\n  onAfterChange?: PropOnChange<RANGE>;\n  leftSide?: IconComponent | 'input';\n  tooltipFormatter?: PropToolipFormatter;\n  rightSide?: IconComponent;\n};\n\nexport type Line = {\n  width: number;\n  active: boolean;\n  size?: number[];\n};\n\nexport type SliderLineProps = {\n  view?: PropView;\n  lines: Line[];\n  disabled?: boolean;\n  hovered?: boolean;\n  onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n  {\n    value?: number;\n    disabled?: boolean;\n    focused?: boolean;\n    hovered?: boolean;\n    withTooltip?: boolean;\n    handlePress?: (typeButton: ActiveButton) => void;\n    buttonLabel?: ActiveButton;\n    buttonRef?: React.RefObject<HTMLButtonElement>;\n    popoverPosition?: TrackPosition;\n    tooltipFormatter?: PropToolipFormatter;\n    onFocus?: (\n      e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n      button: ActiveButton,\n    ) => void;\n    onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n    onHover?: (hovered: boolean) => void;\n    position: number;\n    tooltipZIndex?: number;\n  },\n  HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n  Props<RANGE>,\n  HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean>(\n  props: SliderProps<RANGE>,\n) => React.ReactElement | null;\n\nexport const isRangeParams = (\n  params: Props<boolean>,\n): params is Props<true> => {\n  return !!params.range;\n};\n\nexport const isNotRangeParams = (\n  params: Props<boolean>,\n): params is Props<false> => {\n  return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n  value?.toString() || '';\n\nexport type TrackPosition = {\n  x: number;\n  y: number;\n} | null;\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,CAoFP,MAAO,IAAME,cAAa,CAAG,SAC3BC,CAD2B,CAED,CAC1B,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,CAJM,CAMP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BF,CAD8B,CAEH,CAC3B,MAAO,CAACA,CAAM,CAACC,KAChB,CAJM,CAMP,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD"}
+{"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString","getValueForInput","props","field","getOnChandgeForInput","e","onChange","getIcon","side","getMaxForStartField","max","getMinForEndField","min"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' | 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n  e?:\n    | Event\n    | React.TouchEvent\n    | React.MouseEvent\n    | React.KeyboardEvent\n    | React.ChangeEvent;\n  value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number | undefined) => string;\n\ntype Side = IconComponent | 'input';\n\ntype Props<RANGE extends boolean = false> = {\n  className?: string;\n  step?: number | number[];\n  view?: PropView;\n  disabled?: boolean;\n  range?: RANGE;\n  withTooltip?: boolean;\n  value: SliderValue<RANGE>;\n  label?: string;\n  caption?: string;\n  status?: PropStatus;\n  min?: number;\n  size?: PropSize;\n  max?: number;\n  onChange?: PropOnChange<RANGE>;\n  onAfterChange?: PropOnChange<RANGE>;\n  leftSide?: Side;\n  tooltipFormatter?: PropToolipFormatter;\n  rightSide?: Side;\n};\n\nexport type Line = {\n  width: number;\n  active: boolean;\n  size?: number[];\n};\n\nexport type SliderLineProps = {\n  view?: PropView;\n  lines: Line[];\n  disabled?: boolean;\n  hovered?: boolean;\n  onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n  {\n    value?: number;\n    disabled?: boolean;\n    focused?: boolean;\n    hovered?: boolean;\n    withTooltip?: boolean;\n    handlePress?: (typeButton: ActiveButton) => void;\n    buttonLabel?: ActiveButton;\n    buttonRef?: React.RefObject<HTMLButtonElement>;\n    popoverPosition?: TrackPosition;\n    tooltipFormatter?: PropToolipFormatter;\n    onFocus?: (\n      e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n      button: ActiveButton,\n    ) => void;\n    onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n    onHover?: (hovered: boolean) => void;\n    position: number;\n    tooltipZIndex?: number;\n  },\n  HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n  Props<RANGE>,\n  HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean = false>(\n  props: SliderProps<RANGE>,\n) => React.ReactElement | null;\n\nconst isRangeParams = (params: Props<boolean>): params is Props<true> => {\n  return !!params.range;\n};\n\nconst isNotRangeParams = (params: Props<boolean>): params is Props<false> => {\n  return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n  value?.toString() || '';\n\nexport type TrackPosition = {\n  x: number;\n  y: number;\n} | null;\n\nexport const getValueForInput = (\n  props: SliderProps<boolean>,\n  field: 0 | 1,\n): number => {\n  if (isRangeParams(props)) {\n    return props.value[field];\n  }\n  return props.value as number;\n};\n\ntype GetOnChandgeForInputReturned = (props: {\n  e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n  value: number;\n}) => void;\n\nexport const getOnChandgeForInput =\n  (props: SliderProps<boolean>, field: 0 | 1): GetOnChandgeForInputReturned =>\n  ({ e, value }) => {\n    if (!props.onChange) {\n      return;\n    }\n    if (isNotRangeParams(props)) {\n      props.onChange({ e, value });\n    }\n    if (isRangeParams(props)) {\n      props.onChange({\n        e,\n        value: field ? [props.value[0], value] : [value, props.value[1]],\n      });\n    }\n  };\n\nexport const getIcon = (side?: Side) => {\n  if (side !== 'input') {\n    return side;\n  }\n};\n\nexport const getMaxForStartField = (props: SliderProps<boolean>) => {\n  if (isNotRangeParams(props)) {\n    return props.max;\n  }\n  if (isRangeParams(props)) {\n    return props.value[1];\n  }\n};\n\nexport const getMinForEndField = (props: SliderProps<boolean>) => {\n  if (isNotRangeParams(props)) {\n    return props.min;\n  }\n  if (isRangeParams(props)) {\n    return props.value[0];\n  }\n};\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,C,GAsFDE,cAAa,CAAG,SAACC,CAAD,CAAmD,CACvE,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,C,CAEKC,gBAAgB,CAAG,SAACF,CAAD,CAAoD,CAC3E,MAAO,CAACA,CAAM,CAACC,KAChB,C,CAED,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD,CAQP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,CAE9BC,CAF8B,CAGnB,OACPT,cAAa,CAACQ,CAAD,CADN,CAEFA,CAAK,CAACH,KAAN,CAAYI,CAAZ,CAFE,CAIJD,CAAK,CAACH,KACd,CARM,CAeP,MAAO,IAAMK,qBAAoB,CAC/B,SAACF,CAAD,CAA8BC,CAA9B,QACA,YAAkB,IAAfE,EAAe,GAAfA,CAAe,CAAZN,CAAY,GAAZA,KAAY,CACXG,CAAK,CAACI,QADK,GAIZT,gBAAgB,CAACK,CAAD,CAJJ,EAKdA,CAAK,CAACI,QAAN,CAAe,CAAED,CAAC,CAADA,CAAF,CAAKN,KAAK,CAALA,CAAL,CAAf,CALc,CAOZL,aAAa,CAACQ,CAAD,CAPD,EAQdA,CAAK,CAACI,QAAN,CAAe,CACbD,CAAC,CAADA,CADa,CAEbN,KAAK,CAAEI,CAAK,CAAG,CAACD,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAD,CAAiBA,CAAjB,CAAH,CAA6B,CAACA,CAAD,CAAQG,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAR,CAF5B,CAAf,CARc,CAajB,CAdD,CADK,CAiBP,MAAO,IAAMQ,QAAO,CAAG,SAACC,CAAD,CAAiB,CACtC,GAAa,OAAT,GAAAA,CAAJ,CACE,MAAOA,EAEV,CAJM,CAMP,MAAO,IAAMC,oBAAmB,CAAG,SAACP,CAAD,CAAiC,OAC9DL,iBAAgB,CAACK,CAAD,CAD8C,CAEzDA,CAAK,CAACQ,GAFmD,CAI9DhB,aAAa,CAACQ,CAAD,CAJiD,CAKzDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALyD,OAOnE,CAPM,CASP,MAAO,IAAMY,kBAAiB,CAAG,SAACT,CAAD,CAAiC,OAC5DL,iBAAgB,CAACK,CAAD,CAD4C,CAEvDA,CAAK,CAACU,GAFiD,CAI5DlB,aAAa,CAACQ,CAAD,CAJ+C,CAKvDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALuD,OAOjE,CAPM"}

package/__internal__/src/components/Slider/useSlider/useSlider.js

@@ -1,2 +1,2 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{useMutableRef}from"../../../hooks/useMutableRef/useMutableRef";import{getActiveValue,getNewValue,getValidValue,getValueByPosition,isNotRangeParams,isRangeParams,trackPosition}from"./helper";export var COUNT_STEPS=250;export function useSlider(a){var b=a.disabled,c=a.range,d=a.value,f=a.min,g=a.max,h=a.step,i=void 0===h?1:h,j=a.onChange,k=a.onAfterChange,l=a.sliderRef,m=a.buttonRefs,n=g>f?f:0,o=g>f?g:100,p=useMemo(function(){if(!Array.isArray(i)&&1<=i){var a=Math.abs((o-n)/COUNT_STEPS);return a>i?a-a%i:Math.max(a,i)}return i},[g,f,i]),q=useState(d),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(null),v=_slicedToArray(u,2),w=v[0],y=v[1],z=useState(null),A=_slicedToArray(z,2),B=A[0],C=A[1],D=useRef(null),E=useComponentSize(l),F=useMutableRef(s);useEffect(function(){b&&G("remove")},[b]);var G=function(a){var b="add"===a?"addEventListener":"removeEventListener";document[b]("mouseup",L),document[b]("touchend",L),document[b]("mousemove",K),document[b]("touchmove",K)};useEffect(function(){Array.isArray(s)?(I(s[0],0),I(s[1],1)):I(s,0)},[s]),useEffect(function(){JSON.stringify(d)!==JSON.stringify(s)&&(t(d),I(getActiveValue(d,D.current),0),D.current=null)},[d]),useEffect(function(){null===j||void 0===j?void 0:j({value:Array.isArray(s)?[getNewValue(s[0],s[0],i,f,g,0),getNewValue(s[1],s[1],i,f,g,1)]:getNewValue(s,s,i,f,g,0)})},[i]),useEffect(function(){if("undefined"!=typeof d){var b=isRangeParams(a)?[getValidValue(a.value[0],f,g,i),getValidValue(a.value[1],f,g,i)]:getValidValue(a.value,f,g,i);t(b)}},[c,typeof d]),useEffect(function(){if(isRangeParams(a)&&a.value[0]>a.value[1]){var b,c=[a.value[1],a.value[1]];null===(b=a.onChange)||void 0===b?void 0:b.call(a,{value:c})}},[]);var H=useCallback(function(a,c){if(!b&&"number"==typeof c&&"undefined"!=typeof s){var d=Array.isArray(i)?1:i||1,e=!1,h=getActiveValue(s,c);switch(a.key){case"ArrowUp":case"ArrowRight":case"+":e=!0;break;case"ArrowLeft":case"ArrowDown":case"-":e=!0,d*=-1;break;default:}if(e){Array.isArray(i)&&i.forEach(function(a,b){"number"==typeof c&&h===a&&(0<=d?0===b?d=i[1]-n:d=("undefined"==typeof i[b+1]?o:i[b+1])-a:0===b?d=n-i[1]:d=("undefined"==typeof i[b-1]?n:i[b-1])-a)});var k=getNewValue(h+d,s,i,f,g,c);t(k),I(getActiveValue(k,c),c),null===j||void 0===j?void 0:j({e:a,value:k})}}},[s,i,f,g]),I=function(a,b){if(l.current&&"number"==typeof b){var c=m[b].current||l.current,d=l.current.getBoundingClientRect(),e=d.x,f=d.width,g={y:c.offsetTop+c.offsetHeight+50,x:e+Math.abs((a-n)/(o-n))*f};0===b?y(g):C(g)}},J=function(a){if("number"!=typeof D.current)return d;var b=trackPosition(a),c=getValueByPosition(b,l,n,o,i);return getNewValue(c,s,p,f,g,D.current)},K=function(a,b){var c=b||D.current;if("number"==typeof c){var d=J(a),e=getActiveValue(s,c),f=getActiveValue(d,c);t(d),e!==f&&(null===k||void 0===k?void 0:k({e:a,value:d}))}};useEffect(function(){isRangeParams(a)&&a.value.forEach(function(a,b){I(getActiveValue(a,D.current),0===b?0:1)}),isNotRangeParams(a)&&I(getActiveValue(d,D.current),0),D.current=null},[E,typeof d]);var L=useCallback(function(b){if(G("remove"),isRangeParams(a)&&Array.isArray(F.current)){var c,d=_toConsumableArray(F.current).sort(function(c,a){return+c-+a});null===(c=a.onChange)||void 0===c?void 0:c.call(a,{e:b,value:d})}if(isNotRangeParams(a)&&"number"==typeof F.current){var e;null===(e=a.onChange)||void 0===e?void 0:e.call(a,{e:b,value:F.current})}D.current=null},[F,d,j,K]),M=useCallback(function(a){b||(D.current=a,G("add"))},[s,d,j,K,b]);return{onKeyPress:H,onFocus:function onFocus(a,b){D.current=b},handlePress:M,onSliderClick:function onSliderClick(b){if(isNotRangeParams(a)){var c=getValueByPosition({x:b.pageX,y:b.pageY},l,n,o,i),e=getNewValue(c,s,p,f,g,D.current);e!==d&&(t(e),I(getActiveValue(e,0),0),null===j||void 0===j?void 0:j({e:b,value:e}))}},activeButton:D.current,popoverPosition:[w,B],currentValue:Array.isArray(s)?s:[s]}}
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{useMutableRef}from"../../../hooks/useMutableRef/useMutableRef";import{getActiveValue,getNewValue,getValidValue,getValueByPosition,isNotRangeParams,isRangeParams,trackPosition}from"./helper";export var COUNT_STEPS=250;export function useSlider(a){var b=a.disabled,c=a.range,d=a.value,f=a.min,g=a.max,h=a.step,i=void 0===h?1:h,j=a.onChange,k=a.onAfterChange,l=a.sliderRef,m=a.buttonRefs,n=g>f?f:0,o=g>f?g:100,p=useMemo(function(){if(!Array.isArray(i)&&1<=i){var a=Math.abs((o-n)/COUNT_STEPS);return a>i?a-a%i:Math.max(a,i)}return i},[g,f,i]),q=useState(d),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(null),v=_slicedToArray(u,2),w=v[0],y=v[1],z=useState(null),A=_slicedToArray(z,2),B=A[0],C=A[1],D=useRef(null),E=useComponentSize(l),F=useMutableRef(s);useEffect(function(){b&&G("remove")},[b]);var G=function(a){var b="add"===a?"addEventListener":"removeEventListener";document[b]("mouseup",L),document[b]("touchend",L),document[b]("mousemove",K),document[b]("touchmove",K)};useEffect(function(){Array.isArray(s)?(I(s[0],0),I(s[1],1)):I(s,0)},[s]),useEffect(function(){JSON.stringify(d)!==JSON.stringify(s)&&(t(d),I(getActiveValue(d,D.current),0),D.current=null)},[d]),useEffect(function(){null===j||void 0===j?void 0:j({value:Array.isArray(s)?[getNewValue(s[0],s[0],i,f,g,0),getNewValue(s[1],s[1],i,f,g,1)]:getNewValue(s,s,i,f,g,0)})},[i]),useEffect(function(){if("undefined"!=typeof d){var b=isRangeParams(a)?[getValidValue(a.value[0],f,g,i),getValidValue(a.value[1],f,g,i)]:getValidValue(a.value,f,g,i);t(b)}},[c,typeof d]),useEffect(function(){if(isRangeParams(a)&&a.value[0]>a.value[1]){var b,c=[a.value[1],a.value[1]];null===(b=a.onChange)||void 0===b?void 0:b.call(a,{value:c})}},[]);var H=useCallback(function(a,c){if(!b&&"number"==typeof c&&"undefined"!=typeof s){var d=Array.isArray(i)?1:i||1,e=!1,h=getActiveValue(s,c);switch(a.key){case"ArrowUp":case"ArrowRight":case"+":e=!0;break;case"ArrowLeft":case"ArrowDown":case"-":e=!0,d*=-1;break;default:}if(e){Array.isArray(i)&&i.forEach(function(a,b){"number"==typeof c&&h===a&&(0<=d?0===b?d=i[1]-n:d=("undefined"==typeof i[b+1]?o:i[b+1])-a:0===b?d=n-i[1]:d=("undefined"==typeof i[b-1]?n:i[b-1])-a)});var k=getNewValue(h+d,s,i,f,g,c);t(k),I(getActiveValue(k,c),c),null===j||void 0===j?void 0:j({e:a,value:k})}}},[s,i,f,g]),I=function(a,b){if(l.current&&"number"==typeof b){var c=m[b].current||l.current,d=l.current.getBoundingClientRect(),e=d.x,f=d.width,g={y:c.offsetTop+c.offsetHeight+50,x:e+Math.abs((a-n)/(o-n))*f};0===b?y(g):C(g)}},J=function(a){if("number"!=typeof D.current)return d;var b=trackPosition(a),c=getValueByPosition(b,l,n,o,i);return getNewValue(c,s,p,f,g,D.current)},K=function(a,b){var c=b||D.current;if("number"==typeof c){var d=J(a),e=getActiveValue(s,c),f=getActiveValue(d,c);t(d),e!==f&&(null===k||void 0===k?void 0:k({e:a,value:d}))}};useEffect(function(){if(isRangeParams(a)){var b;null===(b=a.value)||void 0===b?void 0:b.forEach(function(a,b){I(getActiveValue(a,D.current),0===b?0:1)})}isNotRangeParams(a)&&I(getActiveValue(d,D.current),0),D.current=null},[E,typeof d]);var L=useCallback(function(b){if(G("remove"),isRangeParams(a)&&Array.isArray(F.current)){var c,d=_toConsumableArray(F.current).sort(function(c,a){return+c-+a});null===(c=a.onChange)||void 0===c?void 0:c.call(a,{e:b,value:d})}if(isNotRangeParams(a)&&"number"==typeof F.current){var e;null===(e=a.onChange)||void 0===e?void 0:e.call(a,{e:b,value:F.current})}D.current=null},[F,d,j,K]),M=useCallback(function(a){b||(D.current=a,G("add"))},[s,d,j,K,b]);return{onKeyPress:H,onFocus:function onFocus(a,b){D.current=b},handlePress:M,onSliderClick:function onSliderClick(b){if(isNotRangeParams(a)){var c=getValueByPosition({x:b.pageX,y:b.pageY},l,n,o,i),e=getNewValue(c,s,p,f,g,D.current);e!==d&&(t(e),I(getActiveValue(e,0),0),null===j||void 0===j?void 0:j({e:b,value:e}))}},activeButton:D.current,popoverPosition:[w,B],currentValue:Array.isArray(s)?s:[s]}}
 //# sourceMappingURL=useSlider.js.map

package/__internal__/src/components/Slider/useSlider/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSlider.js","names":["useCallback","useEffect","useMemo","useRef","useState","useComponentSize","useMutableRef","getActiveValue","getNewValue","getValidValue","getValueByPosition","isNotRangeParams","isRangeParams","trackPosition","COUNT_STEPS","useSlider","props","disabled","range","value","min","max","step","onChange","onAfterChange","sliderRef","buttonRefs","minValue","maxValue","dragStepValue","Array","isArray","val","Math","abs","currentValue","setCurrentValue","leftPopover","setLeftPopover","rightPopover","setRightPopover","activeButton","sizeSlider","lastValue","controlListeners","type","method","document","handleRelease","handleTouchMove","setTooltipPosition","JSON","stringify","current","targetValue","newValue","onKeyPress","event","typeButton","stepIncrement","validKeyCode","changedValue","key","forEach","stepPoint","index","e","position","button","getBoundingClientRect","x","width","newPosition","y","offsetTop","offsetHeight","changePosition","positionValue","oldValue","copyValues","sort","a","b","handlePress","onFocus","onSliderClick","pageX","pageY","popoverPosition"],"sources":["../../../../../../src/components/Slider/useSlider/useSlider.ts"],"sourcesContent":["import React, {\n  MutableRefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { SliderValue, TrackPosition } from '../helper';\nimport {\n  ActiveButton,\n  getActiveValue,\n  getNewValue,\n  getValidValue,\n  getValueByPosition,\n  isNotRangeParams,\n  isRangeParams,\n  trackPosition,\n  UseSliderProps,\n  UseSliderValues,\n} from './helper';\n\nexport const COUNT_STEPS = 250;\n\nexport function useSlider<RANGE extends boolean>(\n  props: UseSliderProps<RANGE>,\n): UseSliderValues {\n  const {\n    disabled,\n    range,\n    value,\n    min,\n    max,\n    step = 1,\n    onChange,\n    onAfterChange,\n    sliderRef,\n    buttonRefs,\n  } = props;\n\n  const minValue = max > min ? min : 0;\n  const maxValue = max > min ? max : 100;\n\n  const dragStepValue = useMemo(() => {\n    if (!Array.isArray(step)) {\n      if (step >= 1) {\n        const val = Math.abs((maxValue - minValue) / COUNT_STEPS);\n        if (val > step) {\n          return val - (val % step);\n        }\n        return Math.max(val, step);\n      }\n    }\n    return step;\n  }, [max, min, step]);\n\n  const [currentValue, setCurrentValue] = useState<number | [number, number]>(\n    value,\n  );\n  const [leftPopover, setLeftPopover] = useState<TrackPosition>(null);\n  const [rightPopover, setRightPopover] = useState<TrackPosition>(null);\n\n  const activeButton: MutableRefObject<ActiveButton | null> = useRef(null);\n\n  const sizeSlider = useComponentSize(sliderRef);\n\n  const lastValue = useMutableRef(currentValue);\n\n  useEffect(() => {\n    if (disabled) {\n      controlListeners('remove');\n    }\n  }, [disabled]);\n\n  const controlListeners = (type: 'add' | 'remove') => {\n    const method = type === 'add' ? 'addEventListener' : 'removeEventListener';\n    document[method]('mouseup', handleRelease);\n    document[method]('touchend', handleRelease);\n    document[method]('mousemove', handleTouchMove);\n    document[method]('touchmove', handleTouchMove);\n  };\n\n  useEffect(() => {\n    if (Array.isArray(currentValue)) {\n      setTooltipPosition(currentValue[0], 0);\n      setTooltipPosition(currentValue[1], 1);\n    } else {\n      setTooltipPosition(currentValue, 0);\n    }\n  }, [currentValue]);\n\n  useEffect(() => {\n    if (JSON.stringify(value) !== JSON.stringify(currentValue)) {\n      setCurrentValue(value);\n      setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n      activeButton.current = null;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    onChange?.({\n      value: Array.isArray(currentValue)\n        ? ([\n            getNewValue(currentValue[0], currentValue[0], step, min, max, 0),\n            getNewValue(currentValue[1], currentValue[1], step, min, max, 1),\n          ] as SliderValue<RANGE>)\n        : (getNewValue(\n            currentValue,\n            currentValue,\n            step,\n            min,\n            max,\n            0,\n          ) as SliderValue<RANGE>),\n    });\n  }, [step]);\n\n  useEffect(() => {\n    if (typeof value !== 'undefined') {\n      const targetValue = isRangeParams(props)\n        ? ([\n            getValidValue(props.value[0], min, max, step),\n            getValidValue(props.value[1], min, max, step),\n          ] as [number, number])\n        : getValidValue(props.value as number, min, max, step);\n      setCurrentValue(targetValue);\n    }\n  }, [range, typeof value]);\n\n  useEffect(() => {\n    if (isRangeParams(props)) {\n      if (props.value[0] > props.value[1]) {\n        const newValue: SliderValue<true> = [props.value[1], props.value[1]];\n        props.onChange?.({ value: newValue });\n      }\n    }\n  }, []);\n\n  const onSliderClick = (e: React.MouseEvent) => {\n    if (isNotRangeParams(props)) {\n      const positionValue = getValueByPosition(\n        { x: e.pageX, y: e.pageY },\n        sliderRef,\n        minValue,\n        maxValue,\n        step,\n      );\n      const newValue = getNewValue(\n        positionValue,\n        currentValue,\n        dragStepValue,\n        min,\n        max,\n        activeButton.current,\n      );\n      if (newValue !== value) {\n        setCurrentValue(newValue);\n        setTooltipPosition(getActiveValue(newValue, 0), 0);\n        onChange?.({\n          e,\n          value: newValue as SliderValue<RANGE>,\n        });\n      }\n    }\n  };\n\n  const onKeyPress = useCallback(\n    (event: React.KeyboardEvent, typeButton: ActiveButton) => {\n      if (\n        !disabled &&\n        typeof typeButton === 'number' &&\n        typeof currentValue !== 'undefined'\n      ) {\n        let stepIncrement = !Array.isArray(step) ? step || 1 : 1;\n        let validKeyCode = false;\n        const changedValue = getActiveValue(currentValue, typeButton);\n        switch (event.key) {\n          case 'ArrowUp':\n          case 'ArrowRight':\n          case '+':\n            validKeyCode = true;\n            break;\n          case 'ArrowLeft':\n          case 'ArrowDown':\n          case '-':\n            validKeyCode = true;\n            stepIncrement *= -1;\n            break;\n          default:\n            break;\n        }\n        if (validKeyCode) {\n          if (Array.isArray(step)) {\n            step.forEach((stepPoint, index) => {\n              if (\n                typeof typeButton === 'number' &&\n                changedValue === stepPoint\n              ) {\n                if (stepIncrement >= 0) {\n                  if (index === 0) {\n                    stepIncrement = step[1] - minValue;\n                  } else {\n                    stepIncrement =\n                      (typeof step[index + 1] !== 'undefined'\n                        ? step[index + 1]\n                        : maxValue) - stepPoint;\n                  }\n                } else if (index === 0) {\n                  stepIncrement = minValue - step[1];\n                } else {\n                  stepIncrement =\n                    (typeof step[index - 1] !== 'undefined'\n                      ? step[index - 1]\n                      : minValue) - stepPoint;\n                }\n              }\n            });\n          }\n          const newValue = getNewValue(\n            changedValue + stepIncrement,\n            currentValue,\n            step,\n            min,\n            max,\n            typeButton,\n          );\n          setCurrentValue(newValue);\n          setTooltipPosition(getActiveValue(newValue, typeButton), typeButton);\n          onChange?.({\n            e: event,\n            value: newValue as SliderValue<RANGE>,\n          });\n        }\n      }\n    },\n    [currentValue, step, min, max],\n  );\n\n  const setTooltipPosition = (value: number, position: ActiveButton) => {\n    if (sliderRef.current && typeof position === 'number') {\n      const button = buttonRefs[position].current || sliderRef.current;\n      const { x, width } = sliderRef.current.getBoundingClientRect();\n      const newPosition = {\n        y: button.offsetTop + button.offsetHeight + 50,\n        x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width,\n      };\n      if (position === 0) {\n        setLeftPopover(newPosition);\n      } else {\n        setRightPopover(newPosition);\n      }\n    }\n  };\n\n  const changePosition = (event: Event) => {\n    const nativeEvent = event as MouseEvent | TouchEvent;\n    if (typeof activeButton.current !== 'number') {\n      return value;\n    }\n    const position = trackPosition(nativeEvent);\n    const positionValue = getValueByPosition(\n      position,\n      sliderRef,\n      minValue,\n      maxValue,\n      step,\n    );\n    return getNewValue(\n      positionValue,\n      currentValue,\n      dragStepValue,\n      min,\n      max,\n      activeButton.current,\n    );\n  };\n\n  const onFocus = (\n    e: React.FocusEvent | React.MouseEvent,\n    button: ActiveButton,\n  ) => {\n    activeButton.current = button;\n  };\n\n  const handleTouchMove = (\n    event: MouseEvent | TouchEvent | Event,\n    typeButton?: ActiveButton,\n  ) => {\n    const button = typeButton || activeButton.current;\n    if (typeof button === 'number') {\n      const position = changePosition(event);\n      const oldValue: number = getActiveValue(currentValue, button);\n      const newValue: number = getActiveValue(position, button);\n      setCurrentValue(position);\n      if (oldValue !== newValue) {\n        onAfterChange?.({ e: event, value: position as SliderValue<RANGE> });\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (isRangeParams(props)) {\n      props.value.forEach((val, index) => {\n        setTooltipPosition(\n          getActiveValue(val, activeButton.current),\n          index === 0 ? 0 : 1,\n        );\n      });\n    }\n    if (isNotRangeParams(props)) {\n      setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n    }\n    activeButton.current = null;\n  }, [sizeSlider, typeof value]);\n\n  const handleRelease = useCallback(\n    (e: MouseEvent | TouchEvent | Event) => {\n      controlListeners('remove');\n      if (isRangeParams(props) && Array.isArray(lastValue.current)) {\n        const copyValues = [...lastValue.current].sort(\n          (a, b) => Number(a) - Number(b),\n        ) as SliderValue<true>;\n        props.onChange?.({ e, value: copyValues });\n      }\n      if (isNotRangeParams(props) && typeof lastValue.current === 'number') {\n        props.onChange?.({ e, value: lastValue.current });\n      }\n      activeButton.current = null;\n    },\n    [lastValue, value, onChange, handleTouchMove],\n  );\n\n  const handlePress = useCallback(\n    (typeButton: ActiveButton) => {\n      if (!disabled) {\n        activeButton.current = typeButton;\n        controlListeners('add');\n      }\n    },\n    [currentValue, value, onChange, handleTouchMove, disabled],\n  );\n\n  return {\n    onKeyPress,\n    onFocus,\n    handlePress,\n    onSliderClick,\n    activeButton: activeButton.current,\n    popoverPosition: [leftPopover, rightPopover],\n    currentValue: Array.isArray(currentValue) ? currentValue : [currentValue],\n  };\n}\n"],"mappings":"0IAAA,OAEEA,WAFF,CAGEC,SAHF,CAIEC,OAJF,CAKEC,MALF,CAMEC,QANF,KAOO,OAPP,CASA,OAASC,gBAAT,wDACA,OAASC,aAAT,kDAEA,OAEEC,cAFF,CAGEC,WAHF,CAIEC,aAJF,CAKEC,kBALF,CAMEC,gBANF,CAOEC,aAPF,CAQEC,aARF,gBAaA,MAAO,IAAMC,YAAW,CAAG,GAApB,CAEP,MAAO,SAASC,UAAT,CACLC,CADK,CAEY,IAEfC,EAFe,CAYbD,CAZa,CAEfC,QAFe,CAGfC,CAHe,CAYbF,CAZa,CAGfE,KAHe,CAIfC,CAJe,CAYbH,CAZa,CAIfG,KAJe,CAKfC,CALe,CAYbJ,CAZa,CAKfI,GALe,CAMfC,CANe,CAYbL,CAZa,CAMfK,GANe,GAYbL,CAZa,CAOfM,IAPe,CAOfA,CAPe,YAOR,CAPQ,GAQfC,CARe,CAYbP,CAZa,CAQfO,QARe,CASfC,CATe,CAYbR,CAZa,CASfQ,aATe,CAUfC,CAVe,CAYbT,CAZa,CAUfS,SAVe,CAWfC,CAXe,CAYbV,CAZa,CAWfU,UAXe,CAcXC,CAAQ,CAAGN,CAAG,CAAGD,CAAN,CAAYA,CAAZ,CAAkB,CAdlB,CAeXQ,CAAQ,CAAGP,CAAG,CAAGD,CAAN,CAAYC,CAAZ,CAAkB,GAflB,CAiBXQ,CAAa,CAAG3B,OAAO,CAAC,UAAM,CAClC,GAAI,CAAC4B,KAAK,CAACC,OAAN,CAAcT,CAAd,CAAL,EACc,CAAR,EAAAA,CADN,CACiB,CACb,GAAMU,EAAG,CAAGC,IAAI,CAACC,GAAL,CAAS,CAACN,CAAQ,CAAGD,CAAZ,EAAwBb,WAAjC,CAAZ,CADa,MAETkB,EAAG,CAAGV,CAFG,CAGJU,CAAG,CAAIA,CAAG,CAAGV,CAHT,CAKNW,IAAI,CAACZ,GAAL,CAASW,CAAT,CAAcV,CAAd,CACR,CAEH,MAAOA,EACR,CAX4B,CAW1B,CAACD,CAAD,CAAMD,CAAN,CAAWE,CAAX,CAX0B,CAjBZ,GA8BuBlB,QAAQ,CAC9Ce,CAD8C,CA9B/B,uBA8BVgB,CA9BU,MA8BIC,CA9BJ,QAiCqBhC,QAAQ,CAAgB,IAAhB,CAjC7B,uBAiCViC,CAjCU,MAiCGC,CAjCH,QAkCuBlC,QAAQ,CAAgB,IAAhB,CAlC/B,uBAkCVmC,CAlCU,MAkCIC,CAlCJ,MAoCXC,CAAmD,CAAGtC,MAAM,CAAC,IAAD,CApCjD,CAsCXuC,CAAU,CAAGrC,gBAAgB,CAACoB,CAAD,CAtClB,CAwCXkB,CAAS,CAAGrC,aAAa,CAAC6B,CAAD,CAxCd,CA0CjBlC,SAAS,CAAC,UAAM,CACVgB,CADU,EAEZ2B,CAAgB,CAAC,QAAD,CAEnB,CAJQ,CAIN,CAAC3B,CAAD,CAJM,CA1CQ,CAgDjB,GAAM2B,EAAgB,CAAG,SAACC,CAAD,CAA4B,CACnD,GAAMC,EAAM,CAAY,KAAT,GAAAD,CAAI,CAAa,kBAAb,CAAkC,qBAArD,CACAE,QAAQ,CAACD,CAAD,CAAR,CAAiB,SAAjB,CAA4BE,CAA5B,CAFmD,CAGnDD,QAAQ,CAACD,CAAD,CAAR,CAAiB,UAAjB,CAA6BE,CAA7B,CAHmD,CAInDD,QAAQ,CAACD,CAAD,CAAR,CAAiB,WAAjB,CAA8BG,CAA9B,CAJmD,CAKnDF,QAAQ,CAACD,CAAD,CAAR,CAAiB,WAAjB,CAA8BG,CAA9B,CACD,CAND,CAQAhD,SAAS,CAAC,UAAM,CACV6B,KAAK,CAACC,OAAN,CAAcI,CAAd,CADU,EAEZe,CAAkB,CAACf,CAAY,CAAC,CAAD,CAAb,CAAkB,CAAlB,CAFN,CAGZe,CAAkB,CAACf,CAAY,CAAC,CAAD,CAAb,CAAkB,CAAlB,CAHN,EAKZe,CAAkB,CAACf,CAAD,CAAe,CAAf,CAErB,CAPQ,CAON,CAACA,CAAD,CAPM,CAxDQ,CAiEjBlC,SAAS,CAAC,UAAM,CACVkD,IAAI,CAACC,SAAL,CAAejC,CAAf,IAA0BgC,IAAI,CAACC,SAAL,CAAejB,CAAf,CADhB,GAEZC,CAAe,CAACjB,CAAD,CAFH,CAGZ+B,CAAkB,CAAC3C,cAAc,CAACY,CAAD,CAAQsB,CAAY,CAACY,OAArB,CAAf,CAA8C,CAA9C,CAHN,CAIZZ,CAAY,CAACY,OAAb,CAAuB,IAJX,CAMf,CANQ,CAMN,CAAClC,CAAD,CANM,CAjEQ,CAyEjBlB,SAAS,CAAC,UAAM,QACdsB,CADc,WACdA,CADc,QACdA,CAAQ,CAAG,CACTJ,KAAK,CAAEW,KAAK,CAACC,OAAN,CAAcI,CAAd,EACF,CACC3B,WAAW,CAAC2B,CAAY,CAAC,CAAD,CAAb,CAAkBA,CAAY,CAAC,CAAD,CAA9B,CAAmCb,CAAnC,CAAyCF,CAAzC,CAA8CC,CAA9C,CAAmD,CAAnD,CADZ,CAECb,WAAW,CAAC2B,CAAY,CAAC,CAAD,CAAb,CAAkBA,CAAY,CAAC,CAAD,CAA9B,CAAmCb,CAAnC,CAAyCF,CAAzC,CAA8CC,CAA9C,CAAmD,CAAnD,CAFZ,CADE,CAKFb,WAAW,CACV2B,CADU,CAEVA,CAFU,CAGVb,CAHU,CAIVF,CAJU,CAKVC,CALU,CAMV,CANU,CANP,CAAH,CAeT,CAhBQ,CAgBN,CAACC,CAAD,CAhBM,CAzEQ,CA2FjBrB,SAAS,CAAC,UAAM,CACd,GAAqB,WAAjB,QAAOkB,EAAX,CAAkC,CAChC,GAAMmC,EAAW,CAAG1C,aAAa,CAACI,CAAD,CAAb,CACf,CACCP,aAAa,CAACO,CAAK,CAACG,KAAN,CAAY,CAAZ,CAAD,CAAiBC,CAAjB,CAAsBC,CAAtB,CAA2BC,CAA3B,CADd,CAECb,aAAa,CAACO,CAAK,CAACG,KAAN,CAAY,CAAZ,CAAD,CAAiBC,CAAjB,CAAsBC,CAAtB,CAA2BC,CAA3B,CAFd,CADe,CAKhBb,aAAa,CAACO,CAAK,CAACG,KAAP,CAAwBC,CAAxB,CAA6BC,CAA7B,CAAkCC,CAAlC,CALjB,CAMAc,CAAe,CAACkB,CAAD,CAChB,CACF,CAVQ,CAUN,CAACpC,CAAD,CAAQ,MAAOC,EAAf,CAVM,CA3FQ,CAuGjBlB,SAAS,CAAC,UAAM,CACd,GAAIW,aAAa,CAACI,CAAD,CAAjB,EACMA,CAAK,CAACG,KAAN,CAAY,CAAZ,EAAiBH,CAAK,CAACG,KAAN,CAAY,CAAZ,CADvB,CACuC,OAC7BoC,CAA2B,CAAG,CAACvC,CAAK,CAACG,KAAN,CAAY,CAAZ,CAAD,CAAiBH,CAAK,CAACG,KAAN,CAAY,CAAZ,CAAjB,CADD,WAEnCH,CAAK,CAACO,QAF6B,qBAEnC,OAAAP,CAAK,CAAY,CAAEG,KAAK,CAAEoC,CAAT,CAAZ,CACN,CAEJ,CAPQ,CAON,EAPM,CAvGQ,IA4IXC,EAAU,CAAGxD,WAAW,CAC5B,SAACyD,CAAD,CAA6BC,CAA7B,CAA0D,CACxD,GACE,CAACzC,CAAD,EACsB,QAAtB,QAAOyC,EADP,EAEwB,WAAxB,QAAOvB,EAHT,CAIE,IACIwB,EAAa,CAAI7B,KAAK,CAACC,OAAN,CAAcT,CAAd,CAAD,CAAmC,CAAnC,CAAuBA,CAAI,EAAI,CADnD,CAEIsC,CAAY,GAFhB,CAGMC,CAAY,CAAGtD,cAAc,CAAC4B,CAAD,CAAeuB,CAAf,CAHnC,CAIA,OAAQD,CAAK,CAACK,GAAd,EACE,IAAK,SAAL,CACA,IAAK,YAAL,CACA,IAAK,GAAL,CACEF,CAAY,GADd,CAEE,MACF,IAAK,WAAL,CACA,IAAK,WAAL,CACA,IAAK,GAAL,CACEA,CAAY,GADd,CAEED,CAAa,EAAI,CAAC,CAFpB,CAGE,MACF,QAZF,CAeA,GAAIC,CAAJ,CAAkB,CACZ9B,KAAK,CAACC,OAAN,CAAcT,CAAd,CADY,EAEdA,CAAI,CAACyC,OAAL,CAAa,SAACC,CAAD,CAAYC,CAAZ,CAAsB,CAET,QAAtB,QAAOP,EAAP,EACAG,CAAY,GAAKG,CAHc,GAKV,CAAjB,EAAAL,CAL2B,CAMf,CAAV,GAAAM,CANyB,CAO3BN,CAAa,CAAGrC,CAAI,CAAC,CAAD,CAAJ,CAAUK,CAPC,CAS3BgC,CAAa,CACX,CAA4B,WAA3B,QAAOrC,EAAI,CAAC2C,CAAK,CAAG,CAAT,CAAX,CAEGrC,CAFH,CACGN,CAAI,CAAC2C,CAAK,CAAG,CAAT,CADR,EAEgBD,CAZS,CAcV,CAAV,GAAAC,CAdoB,CAe7BN,CAAa,CAAGhC,CAAQ,CAAGL,CAAI,CAAC,CAAD,CAfF,CAiB7BqC,CAAa,CACX,CAA4B,WAA3B,QAAOrC,EAAI,CAAC2C,CAAK,CAAG,CAAT,CAAX,CAEGtC,CAFH,CACGL,CAAI,CAAC2C,CAAK,CAAG,CAAT,CADR,EAEgBD,CApBW,CAuBlC,CAvBD,CAFc,CA2BhB,GAAMT,EAAQ,CAAG/C,WAAW,CAC1BqD,CAAY,CAAGF,CADW,CAE1BxB,CAF0B,CAG1Bb,CAH0B,CAI1BF,CAJ0B,CAK1BC,CAL0B,CAM1BqC,CAN0B,CAA5B,CAQAtB,CAAe,CAACmB,CAAD,CAnCC,CAoChBL,CAAkB,CAAC3C,cAAc,CAACgD,CAAD,CAAWG,CAAX,CAAf,CAAuCA,CAAvC,CApCF,QAqChBnC,CArCgB,WAqChBA,CArCgB,QAqChBA,CAAQ,CAAG,CACT2C,CAAC,CAAET,CADM,CAETtC,KAAK,CAAEoC,CAFE,CAAH,CAIT,CACF,CACF,CApE2B,CAqE5B,CAACpB,CAAD,CAAeb,CAAf,CAAqBF,CAArB,CAA0BC,CAA1B,CArE4B,CA5Ib,CAoNX6B,CAAkB,CAAG,SAAC/B,CAAD,CAAgBgD,CAAhB,CAA2C,CACpE,GAAI1C,CAAS,CAAC4B,OAAV,EAAyC,QAApB,QAAOc,EAAhC,CAAuD,IAC/CC,EAAM,CAAG1C,CAAU,CAACyC,CAAD,CAAV,CAAqBd,OAArB,EAAgC5B,CAAS,CAAC4B,OADJ,GAEhC5B,CAAS,CAAC4B,OAAV,CAAkBgB,qBAAlB,EAFgC,CAE7CC,CAF6C,GAE7CA,CAF6C,CAE1CC,CAF0C,GAE1CA,KAF0C,CAG/CC,CAAW,CAAG,CAClBC,CAAC,CAAEL,CAAM,CAACM,SAAP,CAAmBN,CAAM,CAACO,YAA1B,CAAyC,EAD1B,CAElBL,CAAC,CAAEA,CAAC,CAAGrC,IAAI,CAACC,GAAL,CAAS,CAACf,CAAK,CAAGQ,CAAT,GAAsBC,CAAQ,CAAGD,CAAjC,CAAT,EAAuD4C,CAF5C,CAHiC,CAOpC,CAAb,GAAAJ,CAPiD,CAQnD7B,CAAc,CAACkC,CAAD,CARqC,CAUnDhC,CAAe,CAACgC,CAAD,CAElB,CACF,CAlOgB,CAoOXI,CAAc,CAAG,SAACnB,CAAD,CAAkB,CAEvC,GAAoC,QAAhC,QAAOhB,EAAY,CAACY,OAAxB,CACE,MAAOlC,EAAP,CAHqC,GAKjCgD,EAAQ,CAAGtD,aAAa,CAJV4C,CAIU,CALS,CAMjCoB,CAAa,CAAGnE,kBAAkB,CACtCyD,CADsC,CAEtC1C,CAFsC,CAGtCE,CAHsC,CAItCC,CAJsC,CAKtCN,CALsC,CAND,CAavC,MAAOd,YAAW,CAChBqE,CADgB,CAEhB1C,CAFgB,CAGhBN,CAHgB,CAIhBT,CAJgB,CAKhBC,CALgB,CAMhBoB,CAAY,CAACY,OANG,CAQnB,CAzPgB,CAkQXJ,CAAe,CAAG,SACtBQ,CADsB,CAEtBC,CAFsB,CAGnB,CACH,GAAMU,EAAM,CAAGV,CAAU,EAAIjB,CAAY,CAACY,OAA1C,CACA,GAAsB,QAAlB,QAAOe,EAAX,CAAgC,IACxBD,EAAQ,CAAGS,CAAc,CAACnB,CAAD,CADD,CAExBqB,CAAgB,CAAGvE,cAAc,CAAC4B,CAAD,CAAeiC,CAAf,CAFT,CAGxBb,CAAgB,CAAGhD,cAAc,CAAC4D,CAAD,CAAWC,CAAX,CAHT,CAI9BhC,CAAe,CAAC+B,CAAD,CAJe,CAK1BW,CAAQ,GAAKvB,CALa,UAM5B/B,CAN4B,WAM5BA,CAN4B,QAM5BA,CAAa,CAAG,CAAE0C,CAAC,CAAET,CAAL,CAAYtC,KAAK,CAAEgD,CAAnB,CAAH,CANe,CAQ/B,CACF,CAhRgB,CAkRjBlE,SAAS,CAAC,UAAM,CACVW,aAAa,CAACI,CAAD,CADH,EAEZA,CAAK,CAACG,KAAN,CAAY4C,OAAZ,CAAoB,SAAC/B,CAAD,CAAMiC,CAAN,CAAgB,CAClCf,CAAkB,CAChB3C,cAAc,CAACyB,CAAD,CAAMS,CAAY,CAACY,OAAnB,CADE,CAEN,CAAV,GAAAY,CAAK,CAAS,CAAT,CAAa,CAFF,CAInB,CALD,CAFY,CASVtD,gBAAgB,CAACK,CAAD,CATN,EAUZkC,CAAkB,CAAC3C,cAAc,CAACY,CAAD,CAAQsB,CAAY,CAACY,OAArB,CAAf,CAA8C,CAA9C,CAVN,CAYdZ,CAAY,CAACY,OAAb,CAAuB,IACxB,CAbQ,CAaN,CAACX,CAAD,CAAa,MAAOvB,EAApB,CAbM,CAlRQ,IAiSX6B,EAAa,CAAGhD,WAAW,CAC/B,SAACkE,CAAD,CAAwC,CAEtC,GADAtB,CAAgB,CAAC,QAAD,CAChB,CAAIhC,aAAa,CAACI,CAAD,CAAb,EAAwBc,KAAK,CAACC,OAAN,CAAcY,CAAS,CAACU,OAAxB,CAA5B,CAA8D,OACtD0B,CAAU,CAAG,mBAAIpC,CAAS,CAACU,OAAd,EAAuB2B,IAAvB,CACjB,SAACC,CAAD,CAAIC,CAAJ,QAAU,CAAOD,CAAP,EAAmBC,CAA7B,CADiB,CADyC,WAI5DlE,CAAK,CAACO,QAJsD,qBAI5D,OAAAP,CAAK,CAAY,CAAEkD,CAAC,CAADA,CAAF,CAAK/C,KAAK,CAAE4D,CAAZ,CAAZ,CACN,CACD,GAAIpE,gBAAgB,CAACK,CAAD,CAAhB,EAAwD,QAA7B,QAAO2B,EAAS,CAACU,OAAhD,CAAsE,iBACpErC,CAAK,CAACO,QAD8D,qBACpE,OAAAP,CAAK,CAAY,CAAEkD,CAAC,CAADA,CAAF,CAAK/C,KAAK,CAAEwB,CAAS,CAACU,OAAtB,CAAZ,CACN,CACDZ,CAAY,CAACY,OAAb,CAAuB,IACxB,CAb8B,CAc/B,CAACV,CAAD,CAAYxB,CAAZ,CAAmBI,CAAnB,CAA6B0B,CAA7B,CAd+B,CAjShB,CAkTXkC,CAAW,CAAGnF,WAAW,CAC7B,SAAC0D,CAAD,CAA8B,CACvBzC,CADuB,GAE1BwB,CAAY,CAACY,OAAb,CAAuBK,CAFG,CAG1Bd,CAAgB,CAAC,KAAD,CAHU,CAK7B,CAN4B,CAO7B,CAACT,CAAD,CAAehB,CAAf,CAAsBI,CAAtB,CAAgC0B,CAAhC,CAAiDhC,CAAjD,CAP6B,CAlTd,CA4TjB,MAAO,CACLuC,UAAU,CAAVA,CADK,CAEL4B,OAAO,CAnEO,QAAVA,QAAU,CACdlB,CADc,CAEdE,CAFc,CAGX,CACH3B,CAAY,CAACY,OAAb,CAAuBe,CACxB,CA4DM,CAGLe,WAAW,CAAXA,CAHK,CAILE,aAAa,CAhNO,QAAhBA,cAAgB,CAACnB,CAAD,CAAyB,CAC7C,GAAIvD,gBAAgB,CAACK,CAAD,CAApB,CAA6B,IACrB6D,EAAa,CAAGnE,kBAAkB,CACtC,CAAE4D,CAAC,CAAEJ,CAAC,CAACoB,KAAP,CAAcb,CAAC,CAAEP,CAAC,CAACqB,KAAnB,CADsC,CAEtC9D,CAFsC,CAGtCE,CAHsC,CAItCC,CAJsC,CAKtCN,CALsC,CADb,CAQrBiC,CAAQ,CAAG/C,WAAW,CAC1BqE,CAD0B,CAE1B1C,CAF0B,CAG1BN,CAH0B,CAI1BT,CAJ0B,CAK1BC,CAL0B,CAM1BoB,CAAY,CAACY,OANa,CARD,CAgBvBE,CAAQ,GAAKpC,CAhBU,GAiBzBiB,CAAe,CAACmB,CAAD,CAjBU,CAkBzBL,CAAkB,CAAC3C,cAAc,CAACgD,CAAD,CAAW,CAAX,CAAf,CAA8B,CAA9B,CAlBO,QAmBzBhC,CAnByB,WAmBzBA,CAnByB,QAmBzBA,CAAQ,CAAG,CACT2C,CAAC,CAADA,CADS,CAET/C,KAAK,CAAEoC,CAFE,CAAH,CAnBiB,CAwB5B,CACF,CAkLM,CAKLd,YAAY,CAAEA,CAAY,CAACY,OALtB,CAMLmC,eAAe,CAAE,CAACnD,CAAD,CAAcE,CAAd,CANZ,CAOLJ,YAAY,CAAEL,KAAK,CAACC,OAAN,CAAcI,CAAd,EAA8BA,CAA9B,CAA6C,CAACA,CAAD,CAPtD,CASR"}
+{"version":3,"file":"useSlider.js","names":["useCallback","useEffect","useMemo","useRef","useState","useComponentSize","useMutableRef","getActiveValue","getNewValue","getValidValue","getValueByPosition","isNotRangeParams","isRangeParams","trackPosition","COUNT_STEPS","useSlider","props","disabled","range","value","min","max","step","onChange","onAfterChange","sliderRef","buttonRefs","minValue","maxValue","dragStepValue","Array","isArray","val","Math","abs","currentValue","setCurrentValue","leftPopover","setLeftPopover","rightPopover","setRightPopover","activeButton","sizeSlider","lastValue","controlListeners","type","method","document","handleRelease","handleTouchMove","setTooltipPosition","JSON","stringify","current","targetValue","newValue","onKeyPress","event","typeButton","stepIncrement","validKeyCode","changedValue","key","forEach","stepPoint","index","e","position","button","getBoundingClientRect","x","width","newPosition","y","offsetTop","offsetHeight","changePosition","positionValue","oldValue","copyValues","sort","a","b","handlePress","onFocus","onSliderClick","pageX","pageY","popoverPosition"],"sources":["../../../../../../src/components/Slider/useSlider/useSlider.ts"],"sourcesContent":["import React, {\n  MutableRefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';\nimport { SliderValue, TrackPosition } from '../helper';\nimport {\n  ActiveButton,\n  getActiveValue,\n  getNewValue,\n  getValidValue,\n  getValueByPosition,\n  isNotRangeParams,\n  isRangeParams,\n  trackPosition,\n  UseSliderProps,\n  UseSliderValues,\n} from './helper';\n\nexport const COUNT_STEPS = 250;\n\nexport function useSlider<RANGE extends boolean>(\n  props: UseSliderProps<RANGE>,\n): UseSliderValues {\n  const {\n    disabled,\n    range,\n    value,\n    min,\n    max,\n    step = 1,\n    onChange,\n    onAfterChange,\n    sliderRef,\n    buttonRefs,\n  } = props;\n\n  const minValue = max > min ? min : 0;\n  const maxValue = max > min ? max : 100;\n\n  const dragStepValue = useMemo(() => {\n    if (!Array.isArray(step)) {\n      if (step >= 1) {\n        const val = Math.abs((maxValue - minValue) / COUNT_STEPS);\n        if (val > step) {\n          return val - (val % step);\n        }\n        return Math.max(val, step);\n      }\n    }\n    return step;\n  }, [max, min, step]);\n\n  const [currentValue, setCurrentValue] = useState<number | [number, number]>(\n    value,\n  );\n  const [leftPopover, setLeftPopover] = useState<TrackPosition>(null);\n  const [rightPopover, setRightPopover] = useState<TrackPosition>(null);\n\n  const activeButton: MutableRefObject<ActiveButton | null> = useRef(null);\n\n  const sizeSlider = useComponentSize(sliderRef);\n\n  const lastValue = useMutableRef(currentValue);\n\n  useEffect(() => {\n    if (disabled) {\n      controlListeners('remove');\n    }\n  }, [disabled]);\n\n  const controlListeners = (type: 'add' | 'remove') => {\n    const method = type === 'add' ? 'addEventListener' : 'removeEventListener';\n    document[method]('mouseup', handleRelease);\n    document[method]('touchend', handleRelease);\n    document[method]('mousemove', handleTouchMove);\n    document[method]('touchmove', handleTouchMove);\n  };\n\n  useEffect(() => {\n    if (Array.isArray(currentValue)) {\n      setTooltipPosition(currentValue[0], 0);\n      setTooltipPosition(currentValue[1], 1);\n    } else {\n      setTooltipPosition(currentValue, 0);\n    }\n  }, [currentValue]);\n\n  useEffect(() => {\n    if (JSON.stringify(value) !== JSON.stringify(currentValue)) {\n      setCurrentValue(value);\n      setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n      activeButton.current = null;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    onChange?.({\n      value: Array.isArray(currentValue)\n        ? ([\n            getNewValue(currentValue[0], currentValue[0], step, min, max, 0),\n            getNewValue(currentValue[1], currentValue[1], step, min, max, 1),\n          ] as SliderValue<RANGE>)\n        : (getNewValue(\n            currentValue,\n            currentValue,\n            step,\n            min,\n            max,\n            0,\n          ) as SliderValue<RANGE>),\n    });\n  }, [step]);\n\n  useEffect(() => {\n    if (typeof value !== 'undefined') {\n      const targetValue = isRangeParams(props)\n        ? ([\n            getValidValue(props.value[0], min, max, step),\n            getValidValue(props.value[1], min, max, step),\n          ] as [number, number])\n        : getValidValue(props.value as number, min, max, step);\n      setCurrentValue(targetValue);\n    }\n  }, [range, typeof value]);\n\n  useEffect(() => {\n    if (isRangeParams(props)) {\n      if (props.value[0] > props.value[1]) {\n        const newValue: SliderValue<true> = [props.value[1], props.value[1]];\n        props.onChange?.({ value: newValue });\n      }\n    }\n  }, []);\n\n  const onSliderClick = (e: React.MouseEvent) => {\n    if (isNotRangeParams(props)) {\n      const positionValue = getValueByPosition(\n        { x: e.pageX, y: e.pageY },\n        sliderRef,\n        minValue,\n        maxValue,\n        step,\n      );\n      const newValue = getNewValue(\n        positionValue,\n        currentValue,\n        dragStepValue,\n        min,\n        max,\n        activeButton.current,\n      );\n      if (newValue !== value) {\n        setCurrentValue(newValue);\n        setTooltipPosition(getActiveValue(newValue, 0), 0);\n        onChange?.({\n          e,\n          value: newValue as SliderValue<RANGE>,\n        });\n      }\n    }\n  };\n\n  const onKeyPress = useCallback(\n    (event: React.KeyboardEvent, typeButton: ActiveButton) => {\n      if (\n        !disabled &&\n        typeof typeButton === 'number' &&\n        typeof currentValue !== 'undefined'\n      ) {\n        let stepIncrement = !Array.isArray(step) ? step || 1 : 1;\n        let validKeyCode = false;\n        const changedValue = getActiveValue(currentValue, typeButton);\n        switch (event.key) {\n          case 'ArrowUp':\n          case 'ArrowRight':\n          case '+':\n            validKeyCode = true;\n            break;\n          case 'ArrowLeft':\n          case 'ArrowDown':\n          case '-':\n            validKeyCode = true;\n            stepIncrement *= -1;\n            break;\n          default:\n            break;\n        }\n        if (validKeyCode) {\n          if (Array.isArray(step)) {\n            step.forEach((stepPoint, index) => {\n              if (\n                typeof typeButton === 'number' &&\n                changedValue === stepPoint\n              ) {\n                if (stepIncrement >= 0) {\n                  if (index === 0) {\n                    stepIncrement = step[1] - minValue;\n                  } else {\n                    stepIncrement =\n                      (typeof step[index + 1] !== 'undefined'\n                        ? step[index + 1]\n                        : maxValue) - stepPoint;\n                  }\n                } else if (index === 0) {\n                  stepIncrement = minValue - step[1];\n                } else {\n                  stepIncrement =\n                    (typeof step[index - 1] !== 'undefined'\n                      ? step[index - 1]\n                      : minValue) - stepPoint;\n                }\n              }\n            });\n          }\n          const newValue = getNewValue(\n            changedValue + stepIncrement,\n            currentValue,\n            step,\n            min,\n            max,\n            typeButton,\n          );\n          setCurrentValue(newValue);\n          setTooltipPosition(getActiveValue(newValue, typeButton), typeButton);\n          onChange?.({\n            e: event,\n            value: newValue as SliderValue<RANGE>,\n          });\n        }\n      }\n    },\n    [currentValue, step, min, max],\n  );\n\n  const setTooltipPosition = (value: number, position: ActiveButton) => {\n    if (sliderRef.current && typeof position === 'number') {\n      const button = buttonRefs[position].current || sliderRef.current;\n      const { x, width } = sliderRef.current.getBoundingClientRect();\n      const newPosition = {\n        y: button.offsetTop + button.offsetHeight + 50,\n        x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width,\n      };\n      if (position === 0) {\n        setLeftPopover(newPosition);\n      } else {\n        setRightPopover(newPosition);\n      }\n    }\n  };\n\n  const changePosition = (event: Event) => {\n    const nativeEvent = event as MouseEvent | TouchEvent;\n    if (typeof activeButton.current !== 'number') {\n      return value;\n    }\n    const position = trackPosition(nativeEvent);\n    const positionValue = getValueByPosition(\n      position,\n      sliderRef,\n      minValue,\n      maxValue,\n      step,\n    );\n    return getNewValue(\n      positionValue,\n      currentValue,\n      dragStepValue,\n      min,\n      max,\n      activeButton.current,\n    );\n  };\n\n  const onFocus = (\n    e: React.FocusEvent | React.MouseEvent,\n    button: ActiveButton,\n  ) => {\n    activeButton.current = button;\n  };\n\n  const handleTouchMove = (\n    event: MouseEvent | TouchEvent | Event,\n    typeButton?: ActiveButton,\n  ) => {\n    const button = typeButton || activeButton.current;\n    if (typeof button === 'number') {\n      const position = changePosition(event);\n      const oldValue: number = getActiveValue(currentValue, button);\n      const newValue: number = getActiveValue(position, button);\n      setCurrentValue(position);\n      if (oldValue !== newValue) {\n        onAfterChange?.({ e: event, value: position as SliderValue<RANGE> });\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (isRangeParams(props)) {\n      props.value?.forEach((val, index) => {\n        setTooltipPosition(\n          getActiveValue(val, activeButton.current),\n          index === 0 ? 0 : 1,\n        );\n      });\n    }\n    if (isNotRangeParams(props)) {\n      setTooltipPosition(getActiveValue(value, activeButton.current), 0);\n    }\n    activeButton.current = null;\n  }, [sizeSlider, typeof value]);\n\n  const handleRelease = useCallback(\n    (e: MouseEvent | TouchEvent | Event) => {\n      controlListeners('remove');\n      if (isRangeParams(props) && Array.isArray(lastValue.current)) {\n        const copyValues = [...lastValue.current].sort(\n          (a, b) => Number(a) - Number(b),\n        ) as SliderValue<true>;\n        props.onChange?.({ e, value: copyValues });\n      }\n      if (isNotRangeParams(props) && typeof lastValue.current === 'number') {\n        props.onChange?.({ e, value: lastValue.current });\n      }\n      activeButton.current = null;\n    },\n    [lastValue, value, onChange, handleTouchMove],\n  );\n\n  const handlePress = useCallback(\n    (typeButton: ActiveButton) => {\n      if (!disabled) {\n        activeButton.current = typeButton;\n        controlListeners('add');\n      }\n    },\n    [currentValue, value, onChange, handleTouchMove, disabled],\n  );\n\n  return {\n    onKeyPress,\n    onFocus,\n    handlePress,\n    onSliderClick,\n    activeButton: activeButton.current,\n    popoverPosition: [leftPopover, rightPopover],\n    currentValue: Array.isArray(currentValue) ? currentValue : [currentValue],\n  };\n}\n"],"mappings":"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"}

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.css

@@ -1 +1 @@
-.TabsFitModeDropdownWrapper{align-items:center;display:flex}.TabsFitModeDropdownWrapper-Tabs{max-width:100%}.TabsFitModeDropdownWrapper-MoreItems{position:absolute}.TabsFitModeDropdownWrapper-Tab_hidden{left:-100vw;position:absolute;visibility:hidden}
+.TabsFitModeDropdownWrapper{align-items:center;display:flex}.TabsFitModeDropdownWrapper-Tabs{max-width:100%}.TabsFitModeDropdownWrapper-MoreItems{position:absolute}.TabsFitModeDropdownWrapper-MoreItems_hidden,.TabsFitModeDropdownWrapper-Tab_hidden{left:-300vw;pointer-events:none;position:absolute;visibility:hidden}

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.d.ts

@@ -1,4 +1,4 @@
 import './TabsFitModeDropdownWrapper.css';
 import React from 'react';
 import { TabsFitModeWrapperProps } from '../types';
-export declare const TabsFitModeDropdownWrapper: <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement | null;
+export declare const TabsFitModeDropdownWrapper: <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, size, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement | null;

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js

@@ -1,2 +1,2 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=React.useRef(null),j=React.useRef(null),k=useFittingItems({tabsDimensions:c,containerRef:i,moreItemsRef:j}),l=k.isItemHidden,m=b.filter(function(a,b){return l(b)}),n=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(d.map(function(a){var b,c;return null!==(b=null===(c=a.current)||void 0===c?void 0:c.offsetHeight)&&void 0!==b?b:0})))},[c]),o=m.some(f),p=getTabsWidth(c.filter(function(a,b){return!l(b)}));return React.createElement("div",{ref:i,className:cnTabsFitModeDropdownWrapper(),style:{height:n}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({withRunningLine:!o,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:l(a)})}})),0<m.length&&React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper("MoreItems"),style:{left:p}},React.createElement(TabsMoreItems,{items:m,renderItem:g,getItemLabel:e,getItemChecked:f,height:n})))};
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=a.size,j=React.useRef(null),k=React.useRef(null),l=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k}),m=l.isItemHidden,n=b.filter(function(a,b){return m(b)}),o=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(d.map(function(a){var b,c;return null!==(b=null===(c=a.current)||void 0===c?void 0:c.offsetHeight)&&void 0!==b?b:0})))},[c]),p=n.some(f),q=getTabsWidth(c.filter(function(a,b){return!m(b)}));return React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper(),style:{height:o}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({withRunningLine:!p,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:m(a)})}})),React.createElement("div",{ref:k,className:cnTabsFitModeDropdownWrapper("MoreItems",{hidden:!n.length}),style:{left:n.length?q:void 0}},React.createElement(TabsMoreItems,{items:n,renderItem:g,getItemLabel:e,getItemChecked:f,height:o,size:i})))};
 //# sourceMappingURL=TabsFitModeDropdownWrapper.js.map

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","length","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n  items,\n  tabsDimensions,\n  tabRefs,\n  getItemLabel,\n  getItemChecked,\n  renderItem,\n  renderItemsList,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const moreItemsRef = React.useRef<HTMLDivElement>(null);\n  const { isItemHidden } = useFittingItems({\n    tabsDimensions,\n    containerRef: ref,\n    moreItemsRef,\n  });\n  const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n  const maxTabHeight: number = React.useMemo(() => {\n    return Math.max(\n      ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n    );\n  }, [tabsDimensions]);\n  const checkedItemIsHidden = hiddenItems.some(getItemChecked);\n  const visibleTabsWidth = getTabsWidth(\n    tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cnTabsFitModeDropdownWrapper()}\n      style={{ height: maxTabHeight }}\n    >\n      <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n        {renderItemsList({\n          withRunningLine: !checkedItemIsHidden,\n          getTabClassName: (idx) =>\n            cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n        })}\n      </div>\n      {hiddenItems.length > 0 && (\n        <div\n          ref={moreItemsRef}\n          className={cnTabsFitModeDropdownWrapper('MoreItems')}\n          style={{\n            /* В Safari скрытые табы с абсолютом продолжают растягивать контейнер,\n            поэтому приходится позиционировать кнопку абсолютом */\n            left: visibleTabsWidth,\n          }}\n        >\n          <TabsMoreItems\n            items={hiddenItems}\n            renderItem={renderItem}\n            getItemLabel={getItemLabel}\n            getItemChecked={getItemChecked}\n            height={maxTabHeight}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"yEAAA,yCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBACA,OAASC,aAAT,kCAEA,OAASC,eAAT,yBAEA,GAAMC,6BAA4B,CAAGJ,EAAE,CAAC,4BAAD,CAAvC,CAEA,MAAO,IAAMK,2BAA0B,CAAG,WAQsB,IAP9DC,EAO8D,GAP9DA,KAO8D,CAN9DC,CAM8D,GAN9DA,cAM8D,CAL9DC,CAK8D,GAL9DA,OAK8D,CAJ9DC,CAI8D,GAJ9DA,YAI8D,CAH9DC,CAG8D,GAH9DA,cAG8D,CAF9DC,CAE8D,GAF9DA,UAE8D,CAD9DC,CAC8D,GAD9DA,eAC8D,CACxDC,CAAG,CAAGd,KAAK,CAACe,MAAN,CAA6B,IAA7B,CADkD,CAExDC,CAAY,CAAGhB,KAAK,CAACe,MAAN,CAA6B,IAA7B,CAFyC,GAGrCX,eAAe,CAAC,CACvCI,cAAc,CAAdA,CADuC,CAEvCS,YAAY,CAAEH,CAFyB,CAGvCE,YAAY,CAAZA,CAHuC,CAAD,CAHsB,CAGtDE,CAHsD,GAGtDA,YAHsD,CAQxDC,CAAW,CAAGZ,CAAK,CAACa,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAR0C,CASxDC,CAAoB,CAAGvB,KAAK,CAACwB,OAAN,CAAc,UAAM,CAC/C,MAAOC,KAAI,CAACC,GAAL,OAAAD,IAAI,oBACNhB,CAAO,CAACkB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAGZ,CAJ4B,CAI1B,CAACtB,CAAD,CAJ0B,CATiC,CAcxDuB,CAAmB,CAAGZ,CAAW,CAACa,IAAZ,CAAiBrB,CAAjB,CAdkC,CAexDsB,CAAgB,CAAG/B,YAAY,CACnCM,CAAc,CAACY,MAAf,CAAsB,SAACc,CAAD,CAAMZ,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAfyB,CAmB9D,MACE,4BACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAET,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAE8B,MAAM,CAAEZ,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAElB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfuB,eAAe,CAAE,CAACL,CADH,CAEfM,eAAe,CAAE,yBAACf,CAAD,QACfjB,6BAA4B,CAAC,KAAD,CAAQ,CAAEiC,MAAM,CAAEpB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAFF,CAAD,CADlB,CALF,CAYwB,CAArB,CAAAH,CAAW,CAACoB,MAAZ,EACC,2BACE,GAAG,CAAEvB,CADP,CAEE,SAAS,CAAEX,4BAA4B,CAAC,WAAD,CAFzC,CAGE,KAAK,CAAE,CAGLmC,IAAI,CAAEP,CAHD,CAHT,EASE,oBAAC,aAAD,EACE,KAAK,CAAEd,CADT,CAEE,UAAU,CAAEP,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEY,CALV,EATF,CAbJ,CAiCH,CA7DM"}
+{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","size","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","length","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n  items,\n  tabsDimensions,\n  tabRefs,\n  getItemLabel,\n  getItemChecked,\n  renderItem,\n  renderItemsList,\n  size,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const moreItemsRef = React.useRef<HTMLDivElement>(null);\n  const { isItemHidden } = useFittingItems({\n    tabsDimensions,\n    containerRef: ref,\n    moreItemsRef,\n  });\n  const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n  const maxTabHeight: number = React.useMemo(() => {\n    return Math.max(\n      ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n    );\n  }, [tabsDimensions]);\n  const checkedItemIsHidden = hiddenItems.some(getItemChecked);\n  const visibleTabsWidth = getTabsWidth(\n    tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cnTabsFitModeDropdownWrapper()}\n      style={{ height: maxTabHeight }}\n    >\n      <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n        {renderItemsList({\n          withRunningLine: !checkedItemIsHidden,\n          getTabClassName: (idx) =>\n            cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n        })}\n      </div>\n      <div\n        ref={moreItemsRef}\n        className={cnTabsFitModeDropdownWrapper('MoreItems', {\n          hidden: !hiddenItems.length,\n        })}\n        style={{\n          /* В Safari скрытые табы с абсолютом продолжают растягивать контейнер,\n            поэтому приходится позиционировать кнопку абсолютом */\n          left: hiddenItems.length ? visibleTabsWidth : undefined,\n        }}\n      >\n        <TabsMoreItems\n          items={hiddenItems}\n          renderItem={renderItem}\n          getItemLabel={getItemLabel}\n          getItemChecked={getItemChecked}\n          height={maxTabHeight}\n          size={size}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"yEAAA,yCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBACA,OAASC,aAAT,kCAEA,OAASC,eAAT,yBAEA,GAAMC,6BAA4B,CAAGJ,EAAE,CAAC,4BAAD,CAAvC,CAEA,MAAO,IAAMK,2BAA0B,CAAG,WASsB,IAR9DC,EAQ8D,GAR9DA,KAQ8D,CAP9DC,CAO8D,GAP9DA,cAO8D,CAN9DC,CAM8D,GAN9DA,OAM8D,CAL9DC,CAK8D,GAL9DA,YAK8D,CAJ9DC,CAI8D,GAJ9DA,cAI8D,CAH9DC,CAG8D,GAH9DA,UAG8D,CAF9DC,CAE8D,GAF9DA,eAE8D,CAD9DC,CAC8D,GAD9DA,IAC8D,CACxDC,CAAG,CAAGf,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CADkD,CAExDC,CAAY,CAAGjB,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAFyC,GAGrCZ,eAAe,CAAC,CACvCI,cAAc,CAAdA,CADuC,CAEvCU,YAAY,CAAEH,CAFyB,CAGvCE,YAAY,CAAZA,CAHuC,CAAD,CAHsB,CAGtDE,CAHsD,GAGtDA,YAHsD,CAQxDC,CAAW,CAAGb,CAAK,CAACc,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAR0C,CASxDC,CAAoB,CAAGxB,KAAK,CAACyB,OAAN,CAAc,UAAM,CAC/C,MAAOC,KAAI,CAACC,GAAL,OAAAD,IAAI,oBACNjB,CAAO,CAACmB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAGZ,CAJ4B,CAI1B,CAACvB,CAAD,CAJ0B,CATiC,CAcxDwB,CAAmB,CAAGZ,CAAW,CAACa,IAAZ,CAAiBtB,CAAjB,CAdkC,CAexDuB,CAAgB,CAAGhC,YAAY,CACnCM,CAAc,CAACa,MAAf,CAAsB,SAACc,CAAD,CAAMZ,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAfyB,CAmB9D,MACE,4BACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAE+B,MAAM,CAAEZ,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEnB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfwB,eAAe,CAAE,CAACL,CADH,CAEfM,eAAe,CAAE,yBAACf,CAAD,QACflB,6BAA4B,CAAC,KAAD,CAAQ,CAAEkC,MAAM,CAAEpB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAFF,CAAD,CADlB,CALF,CAYE,2BACE,GAAG,CAAEN,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDkC,MAAM,CAAE,CAACnB,CAAW,CAACoB,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLC,IAAI,CAAErB,CAAW,CAACoB,MAAZ,CAAqBN,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEd,CADT,CAEE,UAAU,CAAER,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEa,CALV,CAME,IAAI,CAAEV,CANR,EAXF,CAZF,CAkCH,CA/DM"}

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.d.ts

@@ -8,8 +8,4 @@ export declare const useFittingItems: ({ tabsDimensions, containerRef, moreItems
     fittingItemsCount: number;
     isItemHidden: (idx: number) => boolean;
 };
-export declare const getFittingItemsCount: ({ tabsDimensions, totalWidth, moreItemsWidth, }: {
-    tabsDimensions: TabDimensions[];
-    totalWidth: number;
-    moreItemsWidth: number;
-}) => number;
+export declare const getFittingItemsCount: (tabsDimensions: TabDimensions[], totalWidth: number, moreItemsWidth: number) => number;

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{getTabsWidth}from"../helpers";export var useFittingItems=function(a){var b=a.tabsDimensions,c=a.containerRef,d=a.moreItemsRef,e=useComponentSize(c),f=e.width,g=useComponentSize(d),h=g.width,i=React.useMemo(function(){return getFittingItemsCount({tabsDimensions:b,totalWidth:f,moreItemsWidth:h})},[b,f,h]);return{fittingItemsCount:i,isItemHidden:React.useCallback(function(a){return a>=i},[i])}};export var getFittingItemsCount=function(a){var b=a.tabsDimensions,c=a.totalWidth,d=a.moreItemsWidth;if(!c)return b.length;var e,f=_createForOfIteratorHelper(b.entries());try{for(f.s();!(e=f.n()).done;){var g=_slicedToArray(e.value,2),h=g[0],i=g[1],j=h===b.length-1,k=b.slice(0,h),l=i.size+getTabsWidth(k)+(j?0:i.gap+d);if(l>c)return h}}catch(a){f.e(a)}finally{f.f()}return b.length};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";import{getTabsWidth}from"../helpers";export var useFittingItems=function(a){var b=a.tabsDimensions,c=a.containerRef,d=a.moreItemsRef,e=useComponentSize(c),f=e.width,g=useComponentSize(d),h=g.width,i=React.useMemo(function(){return getFittingItemsCount(b,f,h)},[b,f,h]);return{fittingItemsCount:i,isItemHidden:React.useCallback(function(a){return a>=i},[i])}};export var getFittingItemsCount=function(a,b,c){if(!b)return a.length;var d,e=_createForOfIteratorHelper(a.entries());try{for(e.s();!(d=e.n()).done;){var f=_slicedToArray(d.value,2),g=f[0],h=f[1],i=g===a.length-1,j=a.slice(0,g),k=h.size+getTabsWidth(j)+(i?0:h.gap+c);if(k>b)return g}}catch(a){e.e(a)}finally{e.f()}return a.length};
 //# sourceMappingURL=useFittingItems.js.map

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/useFittingItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFittingItems.js","names":["React","useComponentSize","getTabsWidth","useFittingItems","tabsDimensions","containerRef","moreItemsRef","containerWidth","width","moreItemsWidth","fittingItemsCount","useMemo","getFittingItemsCount","totalWidth","isItemHidden","useCallback","idx","length","entries","tabDimensions","isLastItem","previousTabsDimensions","slice","size","gap"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/useFittingItems.ts"],"sourcesContent":["import React from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { getTabsWidth } from '../helpers';\nimport { TabDimensions } from '../types';\n\nexport const useFittingItems = ({\n  tabsDimensions,\n  containerRef,\n  moreItemsRef,\n}: {\n  tabsDimensions: TabDimensions[];\n  containerRef: React.RefObject<HTMLElement>;\n  moreItemsRef: React.RefObject<HTMLElement>;\n}): {\n  fittingItemsCount: number;\n  isItemHidden: (idx: number) => boolean;\n} => {\n  const { width: containerWidth } = useComponentSize(containerRef);\n  const { width: moreItemsWidth } = useComponentSize(moreItemsRef);\n\n  const fittingItemsCount = React.useMemo(\n    () =>\n      getFittingItemsCount({\n        tabsDimensions,\n        totalWidth: containerWidth,\n        moreItemsWidth,\n      }),\n    [tabsDimensions, containerWidth, moreItemsWidth],\n  );\n\n  return {\n    fittingItemsCount,\n    isItemHidden: React.useCallback(\n      (idx) => idx >= fittingItemsCount,\n      [fittingItemsCount],\n    ),\n  };\n};\n\nexport const getFittingItemsCount = ({\n  tabsDimensions,\n  totalWidth,\n  moreItemsWidth,\n}: {\n  tabsDimensions: TabDimensions[];\n  totalWidth: number;\n  moreItemsWidth: number;\n}): number => {\n  if (!totalWidth) {\n    return tabsDimensions.length;\n  }\n\n  for (const [idx, tabDimensions] of tabsDimensions.entries()) {\n    const isLastItem = idx === tabsDimensions.length - 1;\n    const previousTabsDimensions = tabsDimensions.slice(0, idx);\n    const width =\n      tabDimensions.size +\n      getTabsWidth(previousTabsDimensions) +\n      (isLastItem ? 0 : tabDimensions.gap + moreItemsWidth);\n    if (width > totalWidth) {\n      return idx;\n    }\n  }\n\n  return tabsDimensions.length;\n};\n"],"mappings":"stCAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,gBAAT,wDACA,OAASC,YAAT,kBAGA,MAAO,IAAMC,gBAAe,CAAG,WAW1B,IAVHC,EAUG,GAVHA,cAUG,CATHC,CASG,GATHA,YASG,CARHC,CAQG,GARHA,YAQG,GAC+BL,gBAAgB,CAACI,CAAD,CAD/C,CACYE,CADZ,GACKC,KADL,GAE+BP,gBAAgB,CAACK,CAAD,CAF/C,CAEYG,CAFZ,GAEKD,KAFL,CAIGE,CAAiB,CAAGV,KAAK,CAACW,OAAN,CACxB,iBACEC,qBAAoB,CAAC,CACnBR,cAAc,CAAdA,CADmB,CAEnBS,UAAU,CAAEN,CAFO,CAGnBE,cAAc,CAAdA,CAHmB,CAAD,CADtB,CADwB,CAOxB,CAACL,CAAD,CAAiBG,CAAjB,CAAiCE,CAAjC,CAPwB,CAJvB,CAcH,MAAO,CACLC,iBAAiB,CAAjBA,CADK,CAELI,YAAY,CAAEd,KAAK,CAACe,WAAN,CACZ,SAACC,CAAD,QAASA,EAAG,EAAIN,CAAhB,CADY,CAEZ,CAACA,CAAD,CAFY,CAFT,CAOR,CAhCM,CAkCP,MAAO,IAAME,qBAAoB,CAAG,WAQtB,IAPZR,EAOY,GAPZA,cAOY,CANZS,CAMY,GANZA,UAMY,CALZJ,CAKY,GALZA,cAKY,CACZ,GAAI,CAACI,CAAL,CACE,MAAOT,EAAc,CAACa,MAAtB,CAFU,mCAKuBb,CAAc,CAACc,OAAf,EALvB,MAKZ,2BAA6D,iCAAjDF,CAAiD,MAA5CG,CAA4C,MACrDC,CAAU,CAAGJ,CAAG,GAAKZ,CAAc,CAACa,MAAf,CAAwB,CADQ,CAErDI,CAAsB,CAAGjB,CAAc,CAACkB,KAAf,CAAqB,CAArB,CAAwBN,CAAxB,CAF4B,CAGrDR,CAAK,CACTW,CAAa,CAACI,IAAd,CACArB,YAAY,CAACmB,CAAD,CADZ,EAECD,CAAU,CAAG,CAAH,CAAOD,CAAa,CAACK,GAAd,CAAoBf,CAFtC,CAJyD,CAO3D,GAAID,CAAK,CAAGK,CAAZ,CACE,MAAOG,EAEV,CAfW,+BAiBZ,MAAOZ,EAAc,CAACa,MACvB,CA1BM"}
+{"version":3,"file":"useFittingItems.js","names":["React","useComponentSize","getTabsWidth","useFittingItems","tabsDimensions","containerRef","moreItemsRef","containerWidth","width","moreItemsWidth","fittingItemsCount","useMemo","getFittingItemsCount","isItemHidden","useCallback","idx","totalWidth","length","entries","tabDimensions","isLastItem","previousTabsDimensions","slice","size","gap"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/useFittingItems.ts"],"sourcesContent":["import React from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { getTabsWidth } from '../helpers';\nimport { TabDimensions } from '../types';\n\nexport const useFittingItems = ({\n  tabsDimensions,\n  containerRef,\n  moreItemsRef,\n}: {\n  tabsDimensions: TabDimensions[];\n  containerRef: React.RefObject<HTMLElement>;\n  moreItemsRef: React.RefObject<HTMLElement>;\n}): {\n  fittingItemsCount: number;\n  isItemHidden: (idx: number) => boolean;\n} => {\n  const { width: containerWidth } = useComponentSize(containerRef);\n  const { width: moreItemsWidth } = useComponentSize(moreItemsRef);\n\n  const fittingItemsCount = React.useMemo(\n    () => getFittingItemsCount(tabsDimensions, containerWidth, moreItemsWidth),\n    [tabsDimensions, containerWidth, moreItemsWidth],\n  );\n\n  return {\n    fittingItemsCount,\n    isItemHidden: React.useCallback(\n      (idx) => idx >= fittingItemsCount,\n      [fittingItemsCount],\n    ),\n  };\n};\n\nexport const getFittingItemsCount = (\n  tabsDimensions: TabDimensions[],\n  totalWidth: number,\n  moreItemsWidth: number,\n): number => {\n  if (!totalWidth) {\n    return tabsDimensions.length;\n  }\n\n  for (const [idx, tabDimensions] of tabsDimensions.entries()) {\n    const isLastItem = idx === tabsDimensions.length - 1;\n    const previousTabsDimensions = tabsDimensions.slice(0, idx);\n    const width =\n      tabDimensions.size +\n      getTabsWidth(previousTabsDimensions) +\n      (isLastItem ? 0 : tabDimensions.gap + moreItemsWidth);\n    if (width > totalWidth) {\n      return idx;\n    }\n  }\n\n  return tabsDimensions.length;\n};\n"],"mappings":"stCAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,gBAAT,wDACA,OAASC,YAAT,kBAGA,MAAO,IAAMC,gBAAe,CAAG,WAW1B,IAVHC,EAUG,GAVHA,cAUG,CATHC,CASG,GATHA,YASG,CARHC,CAQG,GARHA,YAQG,GAC+BL,gBAAgB,CAACI,CAAD,CAD/C,CACYE,CADZ,GACKC,KADL,GAE+BP,gBAAgB,CAACK,CAAD,CAF/C,CAEYG,CAFZ,GAEKD,KAFL,CAIGE,CAAiB,CAAGV,KAAK,CAACW,OAAN,CACxB,iBAAMC,qBAAoB,CAACR,CAAD,CAAiBG,CAAjB,CAAiCE,CAAjC,CAA1B,CADwB,CAExB,CAACL,CAAD,CAAiBG,CAAjB,CAAiCE,CAAjC,CAFwB,CAJvB,CASH,MAAO,CACLC,iBAAiB,CAAjBA,CADK,CAELG,YAAY,CAAEb,KAAK,CAACc,WAAN,CACZ,SAACC,CAAD,QAASA,EAAG,EAAIL,CAAhB,CADY,CAEZ,CAACA,CAAD,CAFY,CAFT,CAOR,CA3BM,CA6BP,MAAO,IAAME,qBAAoB,CAAG,SAClCR,CADkC,CAElCY,CAFkC,CAGlCP,CAHkC,CAIvB,CACX,GAAI,CAACO,CAAL,CACE,MAAOZ,EAAc,CAACa,MAAtB,CAFS,mCAKwBb,CAAc,CAACc,OAAf,EALxB,MAKX,2BAA6D,iCAAjDH,CAAiD,MAA5CI,CAA4C,MACrDC,CAAU,CAAGL,CAAG,GAAKX,CAAc,CAACa,MAAf,CAAwB,CADQ,CAErDI,CAAsB,CAAGjB,CAAc,CAACkB,KAAf,CAAqB,CAArB,CAAwBP,CAAxB,CAF4B,CAGrDP,CAAK,CACTW,CAAa,CAACI,IAAd,CACArB,YAAY,CAACmB,CAAD,CADZ,EAECD,CAAU,CAAG,CAAH,CAAOD,CAAa,CAACK,GAAd,CAAoBf,CAFtC,CAJyD,CAO3D,GAAID,CAAK,CAAGQ,CAAZ,CACE,MAAOD,EAEV,CAfU,+BAiBX,MAAOX,EAAc,CAACa,MACvB,CAtBM"}

package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.css

@@ -1 +1 @@
-.TabsMoreItems-Button{align-items:center;display:flex}.TabsMoreItems-Content{background:var(--color-bg-default);border:1px solid var(--color-bg-border);border-radius:var(--control-radius);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;padding:var(--space-s) 0;white-space:nowrap}.TabsMoreItems-Item{padding:0 var(--space-s)}.TabsMoreItems-Item_active{position:relative}.TabsMoreItems-Item_active:before{background:var(--color-bg-brand);bottom:0;content:"";left:-1px;position:absolute;top:0;width:2px}.TabsMoreItems-Item>*{width:100%}
+.TabsMoreItems-Button{align-items:center;display:flex}.TabsMoreItems-Content{white-space:nowrap}.TabsMoreItems-Item{padding:0 var(--space-s)}.TabsMoreItems-Item_active{position:relative}.TabsMoreItems-Item_active:before{background:var(--color-bg-brand);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.TabsMoreItems-Item>*{width:100%}

package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"./TabsMoreItems.css";import{IconMeatball}from"@consta/icons/IconMeatball";import FocusTrap from"focus-trap-react";import React,{forwardRef,useEffect,useRef,useState}from"react";import{Transition}from"react-transition-group";import{useFlag}from"../../../hooks/useFlag/useFlag";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{animateTimeout,cnMixPopoverAnimate}from"../../../mixs/MixPopoverAnimate/MixPopoverAnimate";import{cn}from"../../../utils/bem";import{Button}from"../../Button/Button";import{Popover}from"../../Popover/Popover";var cnTabsMoreItems=cn("TabsMoreItems"),TabsMoreItemsRender=function(a,b){var c=a.items,d=a.renderItem,e=a.getItemLabel,f=a.getItemChecked,g=a.height,h=useFlag(!1),i=_slicedToArray(h,2),j=i[0],k=i[1],l=k.off,m=k.toggle,n=useRef(null),o=useRef(null),p=useState("downStartLeft"),q=_slicedToArray(p,2),r=q[0],s=q[1];return useEffect(function(){0===c.length&&l()},[c]),React.createElement(React.Fragment,null,React.createElement("div",{ref:useForkRef([b,n]),className:cnTabsMoreItems("Button"),style:{height:g}},React.createElement(Button,{size:"xs",view:"ghost",onlyIcon:!0,iconLeft:IconMeatball,onClick:m})),React.createElement(Transition,{in:j,unmountOnExit:!0,nodeRef:o,timeout:animateTimeout},function(a){var b;return React.createElement(Popover,{anchorRef:n,offset:-1,ref:o,direction:"downStartRight",spareDirection:"downStartLeft",className:cnTabsMoreItems("Popover",[cnMixPopoverAnimate({animate:a,direction:r})]),onSetDirection:s,possibleDirections:["downStartRight","downStartLeft","upStartRight","upStartLeft","downCenter","upCenter"]},React.createElement(FocusTrap,{focusTrapOptions:{fallbackFocus:null!==(b=n.current)&&void 0!==b?b:void 0,clickOutsideDeactivates:function clickOutsideDeactivates(a){var b,c=null===(b=n.current)||void 0===b?void 0:b.contains(a.target);return!c},allowOutsideClick:!0,onDeactivate:l}},React.createElement("div",{className:cnTabsMoreItems("Content")},c.map(function(a){return React.createElement("div",{key:e(a),className:cnTabsMoreItems("Item",{active:f(a)})},d(a,l))}))))}))};export var TabsMoreItems=forwardRef(TabsMoreItemsRender);
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"./TabsMoreItems.css";import{IconMeatball}from"@consta/icons/IconMeatball";import FocusTrap from"focus-trap-react";import React,{forwardRef,useEffect,useRef,useState}from"react";import{Transition}from"react-transition-group";import{Button}from"../../Button";import{ListBox}from"../../ListCanary";import{Popover}from"../../Popover/Popover";import{useFlag}from"../../../hooks/useFlag";import{useForkRef}from"../../../hooks/useForkRef";import{animateTimeout,cnMixPopoverAnimate}from"../../../mixs/MixPopoverAnimate";import{cn}from"../../../utils/bem";var cnTabsMoreItems=cn("TabsMoreItems"),TabsMoreItemsRender=function(a,b){var c=a.items,d=a.renderItem,e=a.getItemLabel,f=a.getItemChecked,g=a.height,h=a.size,i=useFlag(!1),j=_slicedToArray(i,2),k=j[0],l=j[1],m=useRef(null),n=useRef(null),o=useState("downStartLeft"),p=_slicedToArray(o,2),q=p[0],r=p[1];return useEffect(function(){0===c.length&&l.off()},[c]),React.createElement(React.Fragment,null,React.createElement("div",{ref:useForkRef([b,m]),className:cnTabsMoreItems("Button"),style:{height:g}},React.createElement(Button,{size:"xs",view:"ghost",onlyIcon:!0,iconLeft:IconMeatball,onClick:l.toggle})),React.createElement(Transition,{in:k,unmountOnExit:!0,nodeRef:n,timeout:animateTimeout},function(a){var b;return React.createElement(Popover,{anchorRef:m,offset:-1,ref:n,direction:"downStartRight",spareDirection:"downStartLeft",className:cnTabsMoreItems("Popover",[cnMixPopoverAnimate({animate:a,direction:q})]),onSetDirection:r,possibleDirections:["downStartRight","downStartLeft","upStartRight","upStartLeft","downCenter","upCenter"]},React.createElement(FocusTrap,{focusTrapOptions:{fallbackFocus:null!==(b=m.current)&&void 0!==b?b:void 0,clickOutsideDeactivates:function clickOutsideDeactivates(a){var b,c=null===(b=m.current)||void 0===b?void 0:b.contains(a.target);return!c},allowOutsideClick:!0,onDeactivate:l.off}},React.createElement(ListBox,{shadow:!0,border:!0,size:h,form:"default",className:cnTabsMoreItems("Content")},c.map(function(a){return React.createElement("div",{key:e(a),className:cnTabsMoreItems("Item",{active:f(a)})},d(a,l.off,!0))}))))}))};export var TabsMoreItems=forwardRef(TabsMoreItemsRender);
 //# sourceMappingURL=TabsMoreItems.js.map

package/__internal__/src/components/Tabs/MoreItems/TabsMoreItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsMoreItems.js","names":["IconMeatball","FocusTrap","React","forwardRef","useEffect","useRef","useState","Transition","useFlag","useForkRef","animateTimeout","cnMixPopoverAnimate","cn","Button","Popover","cnTabsMoreItems","TabsMoreItemsRender","props","ref","items","renderItem","getItemLabel","getItemChecked","height","isOpen","off","toggle","buttonRef","popoverRef","direction","setDirection","length","animate","fallbackFocus","current","clickOutsideDeactivates","e","isClickInsideButton","contains","target","allowOutsideClick","onDeactivate","map","item","active","TabsMoreItems"],"sources":["../../../../../../src/components/Tabs/MoreItems/TabsMoreItems.tsx"],"sourcesContent":["import './TabsMoreItems.css';\n\nimport { IconMeatball } from '@consta/icons/IconMeatball';\nimport FocusTrap from 'focus-trap-react';\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport {\n  animateTimeout,\n  cnMixPopoverAnimate,\n} from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';\nimport { cn } from '../../../utils/bem';\nimport { Button } from '../../Button/Button';\nimport { Direction, Popover } from '../../Popover/Popover';\nimport { TabsMoreItemsComponent, TabsMoreItemsProps } from '../types';\n\nconst cnTabsMoreItems = cn('TabsMoreItems');\n\nconst TabsMoreItemsRender = (\n  props: TabsMoreItemsProps,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const { items, renderItem, getItemLabel, getItemChecked, height } = props;\n  const [isOpen, { off, toggle }] = useFlag(false);\n  const buttonRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [direction, setDirection] = useState<Direction>('downStartLeft');\n\n  useEffect(() => {\n    items.length === 0 && off();\n  }, [items]);\n\n  return (\n    <>\n      <div\n        ref={useForkRef([ref, buttonRef])}\n        className={cnTabsMoreItems('Button')}\n        style={{ height }}\n      >\n        <Button\n          size=\"xs\"\n          view=\"ghost\"\n          onlyIcon\n          iconLeft={IconMeatball}\n          onClick={toggle}\n        />\n      </div>\n      <Transition\n        in={isOpen}\n        unmountOnExit\n        nodeRef={popoverRef}\n        timeout={animateTimeout}\n      >\n        {(animate) => (\n          <Popover\n            anchorRef={buttonRef}\n            offset={-1}\n            ref={popoverRef}\n            direction=\"downStartRight\"\n            spareDirection=\"downStartLeft\"\n            className={cnTabsMoreItems('Popover', [\n              cnMixPopoverAnimate({ animate, direction }),\n            ])}\n            onSetDirection={setDirection}\n            possibleDirections={[\n              'downStartRight',\n              'downStartLeft',\n              'upStartRight',\n              'upStartLeft',\n              'downCenter',\n              'upCenter',\n            ]}\n          >\n            <FocusTrap\n              focusTrapOptions={{\n                fallbackFocus: buttonRef.current ?? undefined,\n                clickOutsideDeactivates: (e) => {\n                  const isClickInsideButton = buttonRef.current?.contains(\n                    e.target as Node,\n                  );\n                  return !isClickInsideButton;\n                },\n                allowOutsideClick: true,\n                onDeactivate: off,\n              }}\n            >\n              <div className={cnTabsMoreItems('Content')}>\n                {items.map((item) => (\n                  <div\n                    key={getItemLabel(item)}\n                    className={cnTabsMoreItems('Item', {\n                      active: getItemChecked(item),\n                    })}\n                  >\n                    {renderItem(item, off)}\n                  </div>\n                ))}\n              </div>\n            </FocusTrap>\n          </Popover>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport const TabsMoreItems = forwardRef(\n  TabsMoreItemsRender,\n) as TabsMoreItemsComponent;\n"],"mappings":"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"}
+{"version":3,"file":"TabsMoreItems.js","names":["IconMeatball","FocusTrap","React","forwardRef","useEffect","useRef","useState","Transition","Button","ListBox","Popover","useFlag","useForkRef","animateTimeout","cnMixPopoverAnimate","cn","cnTabsMoreItems","TabsMoreItemsRender","props","ref","items","renderItem","getItemLabel","getItemChecked","height","size","open","setOpen","buttonRef","popoverRef","direction","setDirection","length","off","toggle","animate","fallbackFocus","current","clickOutsideDeactivates","e","isClickInsideButton","contains","target","allowOutsideClick","onDeactivate","map","item","active","TabsMoreItems"],"sources":["../../../../../../src/components/Tabs/MoreItems/TabsMoreItems.tsx"],"sourcesContent":["import './TabsMoreItems.css';\n\nimport { IconMeatball } from '@consta/icons/IconMeatball';\nimport FocusTrap from 'focus-trap-react';\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Button } from '##/components/Button';\nimport { ListBox } from '##/components/ListCanary';\nimport { Direction, Popover } from '##/components/Popover/Popover';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { animateTimeout, cnMixPopoverAnimate } from '##/mixs/MixPopoverAnimate';\nimport { cn } from '##/utils/bem';\n\nimport { TabsMoreItemsComponent, TabsMoreItemsProps } from '../types';\n\nconst cnTabsMoreItems = cn('TabsMoreItems');\n\nconst TabsMoreItemsRender = (\n  props: TabsMoreItemsProps,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const { items, renderItem, getItemLabel, getItemChecked, height, size } =\n    props;\n  const [open, setOpen] = useFlag(false);\n  const buttonRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [direction, setDirection] = useState<Direction>('downStartLeft');\n\n  useEffect(() => {\n    items.length === 0 && setOpen.off();\n  }, [items]);\n\n  return (\n    <>\n      <div\n        ref={useForkRef([ref, buttonRef])}\n        className={cnTabsMoreItems('Button')}\n        style={{ height }}\n      >\n        <Button\n          size=\"xs\"\n          view=\"ghost\"\n          onlyIcon\n          iconLeft={IconMeatball}\n          onClick={setOpen.toggle}\n        />\n      </div>\n      <Transition\n        in={open}\n        unmountOnExit\n        nodeRef={popoverRef}\n        timeout={animateTimeout}\n      >\n        {(animate) => (\n          <Popover\n            anchorRef={buttonRef}\n            offset={-1}\n            ref={popoverRef}\n            direction=\"downStartRight\"\n            spareDirection=\"downStartLeft\"\n            className={cnTabsMoreItems('Popover', [\n              cnMixPopoverAnimate({ animate, direction }),\n            ])}\n            onSetDirection={setDirection}\n            possibleDirections={[\n              'downStartRight',\n              'downStartLeft',\n              'upStartRight',\n              'upStartLeft',\n              'downCenter',\n              'upCenter',\n            ]}\n          >\n            <FocusTrap\n              focusTrapOptions={{\n                fallbackFocus: buttonRef.current ?? undefined,\n                clickOutsideDeactivates: (e) => {\n                  const isClickInsideButton = buttonRef.current?.contains(\n                    e.target as Node,\n                  );\n                  return !isClickInsideButton;\n                },\n                allowOutsideClick: true,\n                onDeactivate: setOpen.off,\n              }}\n            >\n              <ListBox\n                shadow\n                border\n                size={size}\n                form=\"default\"\n                className={cnTabsMoreItems('Content')}\n              >\n                {items.map((item) => (\n                  <div\n                    key={getItemLabel(item)}\n                    className={cnTabsMoreItems('Item', {\n                      active: getItemChecked(item),\n                    })}\n                  >\n                    {renderItem(item, setOpen.off, true)}\n                  </div>\n                ))}\n              </ListBox>\n            </FocusTrap>\n          </Popover>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport const TabsMoreItems = forwardRef(\n  TabsMoreItemsRender,\n) as TabsMoreItemsComponent;\n"],"mappings":"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"}

package/__internal__/src/components/Tabs/Tab/TabsTab.css

@@ -1 +1 @@
-.TabsTab{--tab-indent:var(--space-m);align-items:center;background-color:transparent;border:none;color:var(--color-typo-secondary);cursor:pointer;display:inline-flex;font-family:var(--font);font-size:var(--tab-font-size);line-height:var(--size-text-2xl);padding:var(--tab-padding) 0;position:relative;text-align:left;transition:color .2s}.TabsTab_size_xs{--only-icon-size:var(--space-m);--tab-padding:calc(var(--space-xs)/2 - var(--space-3xs)/2);--tab-font-size:var(--size-text-xs)}.TabsTab_size_s{--only-icon-size:var(--space-l);--tab-padding:calc(var(--space-xs) - var(--space-3xs));--tab-font-size:var(--size-text-s)}.TabsTab_size_m{--only-icon-size:var(--space-xl);--tab-padding:calc(var(--space-m)/2 - var(--space-3xs)/2);--tab-font-size:var(--size-text-m)}.TabsTab:hover,.TabsTab_checked{color:var(--color-typo-primary)}.TabsTab:before{border-radius:var(--control-radius);bottom:0;content:"";display:block;left:calc(var(--space-2xs)*-1);position:absolute;right:calc(var(--space-2xs)*-1);top:0}.TabsTab:focus{outline:none}.TabsTab-Icon{flex-shrink:0}.TabsTab:not(.TabsTab_onlyIcon) .TabsTab-Icon{margin-right:calc(var(--tab-indent)*.5)}.TabsTab_onlyIcon{justify-content:center;width:var(--only-icon-size)}
+.Text.ListItem.TabsTab{--tab-indent:var(--space-m);align-items:center;background-color:transparent;border:none;color:var(--color-typo-secondary);display:inline-flex;position:relative;text-align:left;transition:color .2s}.Text.ListItem.TabsTab:not(.Text.ListItem.TabsTab_renderInDropdown){line-height:var(--size-text-2xl)}.Text.ListItem.TabsTab:hover:not(.Text.ListItem.TabsTab_disabled),.Text.ListItem.TabsTab_checked:not(.Text.ListItem.TabsTab_disabled){color:var(--color-typo-primary)}.Text.ListItem.TabsTab:not(.Text.ListItem.TabsTab_renderInDropdown).Text.ListItem.TabsTab:before{background:transparent;border-radius:var(--control-radius);bottom:0;content:"";display:block;left:calc(var(--space-2xs)*-1);opacity:1;position:absolute;right:calc(var(--space-2xs)*-1);top:0;width:auto}.Text.ListItem.TabsTab_disabled{color:var(--color-control-typo-disable)}.Text.ListItem.TabsTab:focus{outline:none}.Text.ListItem.TabsTab_onlyIcon{justify-content:center}

package/__internal__/src/components/Tabs/Tab/TabsTab.d.ts

@@ -1,5 +1,13 @@
 import './TabsTab.css';
 import React from 'react';
-import { TabsTabProps } from '../types';
 export declare const cnTabsTab: import("@bem-react/classname").ClassNameFormatter;
-export declare const TabsTab: React.ForwardRefExoticComponent<TabsTabProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsTab: React.ForwardRefExoticComponent<{
+    onChange: React.MouseEventHandler<Element>;
+    checked: boolean;
+    size: "m" | "s" | "xs";
+    iconSize?: "m" | "s" | "xs" | "l" | undefined;
+    onlyIcon?: boolean | undefined;
+    className?: string | undefined;
+    label: string;
+    renderInDropdown?: boolean | undefined;
+} & Omit<import("../types").TabsItemDefault, "label"> & React.RefAttributes<HTMLButtonElement>>;

package/__internal__/src/components/Tabs/Tab/TabsTab.js

@@ -1,2 +1,2 @@
-import"./TabsTab.css";import React,{forwardRef}from"react";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnTabsTab=cn("TabsTab");var sizeMap={s:"xs",m:"s",xs:"xs"};export var TabsTab=forwardRef(function(a,b){var c=a.label,d=a.onChange,e=a.checked,f=a.size,g=a.onlyIcon,h=a.icon,i=a.iconSize,j=a.className,k=getByMap(sizeMap,f,i);return React.createElement("button",{className:cnTabsTab({size:f,checked:e,onlyIcon:g},[cnMixFocus({before:!0}),j]),onClick:e?void 0:d,ref:b,role:"tab",type:"button",title:g?c:void 0},h&&React.createElement(h,{className:cnTabsTab("Icon"),size:k}),!g&&c)});
+import"./TabsTab.css";import React,{forwardRef}from"react";import{ListItem,mapIconSize,mapItemVerticalPadding}from"../../ListCanary";import{cnMixFocus}from"../../../mixs/MixFocus";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnTabsTab=cn("TabsTab");export var TabsTab=forwardRef(function(a,b){var c=a.label,d=a.onChange,e=a.checked,f=a.size,g=a.onlyIcon,h=a.icon,i=a.iconSize,j=a.leftIcon,k=a.leftSide,l=a.className,m=a.rightIcon,n=a.rightSide,o=a.disabled,p=a.renderInDropdown;if(g){var q=j||m||h;return React.createElement("button",{className:cnTabsTab({size:f,checked:e,onlyIcon:g,renderInDropdown:p},[cnMixFocus({before:!0}),l]),role:"tab",type:"button",onClick:e?void 0:d,title:c},q&&React.createElement(q,{size:getByMap(mapIconSize,f,i)}))}return React.createElement(ListItem,{as:"button",className:cnTabsTab({checked:e,onlyIcon:g,renderInDropdown:p,disabled:o},[o?void 0:cnMixFocus({before:!0}),l]),role:"tab",type:"button",tabIndex:o?-1:void 0,onClick:e?void 0:d,ref:b,title:g?c.toString():void 0,label:c,leftIcon:j||h,leftSide:k,rightIcon:m,rightSide:n,iconSize:i,disabled:o,size:f,space:{pV:mapItemVerticalPadding?mapItemVerticalPadding[f]:"xs"}})});
 //# sourceMappingURL=TabsTab.js.map

package/__internal__/src/components/Tabs/Tab/TabsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTab.js","names":["React","forwardRef","cnMixFocus","cn","getByMap","cnTabsTab","sizeMap","s","m","xs","TabsTab","props","ref","label","onChange","checked","size","onlyIcon","Icon","icon","iconSizeProp","iconSize","className","before"],"sources":["../../../../../../src/components/Tabs/Tab/TabsTab.tsx"],"sourcesContent":["import './TabsTab.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef } from 'react';\n\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport { getByMap } from '../../../utils/getByMap';\nimport { TabsPropSize, TabsTabProps } from '../types';\n\nexport const cnTabsTab = cn('TabsTab');\n\nconst sizeMap: Record<TabsPropSize, IconPropSize> = {\n  s: 'xs',\n  m: 's',\n  xs: 'xs',\n};\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  (props, ref) => {\n    const {\n      label,\n      onChange,\n      checked,\n      size,\n      onlyIcon,\n      icon: Icon,\n      iconSize: iconSizeProp,\n      className,\n    } = props;\n    const iconSize = getByMap(sizeMap, size, iconSizeProp);\n\n    return (\n      <button\n        className={cnTabsTab({ size, checked, onlyIcon }, [\n          cnMixFocus({ before: true }),\n          className,\n        ])}\n        onClick={checked ? undefined : onChange}\n        ref={ref}\n        role=\"tab\"\n        type=\"button\"\n        title={onlyIcon ? label : undefined}\n      >\n        {Icon && <Icon className={cnTabsTab('Icon')} size={iconSize} />}\n        {!onlyIcon && label}\n      </button>\n    );\n  },\n);\n"],"mappings":"AAAA,sBAGA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,UAAT,uCACA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAGA,MAAO,IAAMC,UAAS,CAAGF,EAAE,CAAC,SAAD,CAApB,CAEP,GAAMG,QAA2C,CAAG,CAClDC,CAAC,CAAE,IAD+C,CAElDC,CAAC,CAAE,GAF+C,CAGlDC,EAAE,CAAE,IAH8C,CAApD,CAMA,MAAO,IAAMC,QAAO,CAAGT,UAAU,CAC/B,SAACU,CAAD,CAAQC,CAAR,CAAgB,IAEZC,EAFY,CAUVF,CAVU,CAEZE,KAFY,CAGZC,CAHY,CAUVH,CAVU,CAGZG,QAHY,CAIZC,CAJY,CAUVJ,CAVU,CAIZI,OAJY,CAKZC,CALY,CAUVL,CAVU,CAKZK,IALY,CAMZC,CANY,CAUVN,CAVU,CAMZM,QANY,CAONC,CAPM,CAUVP,CAVU,CAOZQ,IAPY,CAQFC,CARE,CAUVT,CAVU,CAQZU,QARY,CASZC,CATY,CAUVX,CAVU,CASZW,SATY,CAWRD,CAAQ,CAAGjB,QAAQ,CAACE,OAAD,CAAUU,CAAV,CAAgBI,CAAhB,CAXX,CAad,MACE,+BACE,SAAS,CAAEf,SAAS,CAAC,CAAEW,IAAI,CAAJA,CAAF,CAAQD,OAAO,CAAPA,CAAR,CAAiBE,QAAQ,CAARA,CAAjB,CAAD,CAA8B,CAChDf,UAAU,CAAC,CAAEqB,MAAM,GAAR,CAAD,CADsC,CAEhDD,CAFgD,CAA9B,CADtB,CAKE,OAAO,CAAEP,CAAO,QAAeD,CALjC,CAME,GAAG,CAAEF,CANP,CAOE,IAAI,CAAC,KAPP,CAQE,IAAI,CAAC,QARP,CASE,KAAK,CAAEK,CAAQ,CAAGJ,CAAH,OATjB,EAWGK,CAAI,EAAI,oBAAC,CAAD,EAAM,SAAS,CAAEb,SAAS,CAAC,MAAD,CAA1B,CAAoC,IAAI,CAAEgB,CAA1C,EAXX,CAYG,CAACJ,CAAD,EAAaJ,CAZhB,CAeH,CA9B8B,CAA1B"}
+{"version":3,"file":"TabsTab.js","names":["React","forwardRef","ListItem","mapIconSize","mapItemVerticalPadding","cnMixFocus","cn","getByMap","cnTabsTab","TabsTab","props","ref","label","onChange","checked","size","onlyIcon","icon","iconSize","leftIcon","leftSide","className","rightIcon","rightSide","disabled","renderInDropdown","Icon","before","toString","pV"],"sources":["../../../../../../src/components/Tabs/Tab/TabsTab.tsx"],"sourcesContent":["import './TabsTab.css';\n\nimport React, { forwardRef } from 'react';\n\nimport {\n  ListItem,\n  mapIconSize,\n  mapItemVerticalPadding,\n} from '##/components/ListCanary';\nimport { cnMixFocus } from '##/mixs/MixFocus';\nimport { cn } from '##/utils/bem';\nimport { getByMap } from '##/utils/getByMap';\n\nimport { TabsTabProps } from '../types';\n\nexport const cnTabsTab = cn('TabsTab');\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  (props, ref) => {\n    const {\n      label,\n      onChange,\n      checked,\n      size,\n      onlyIcon,\n      icon,\n      iconSize,\n      leftIcon,\n      leftSide,\n      className,\n      rightIcon,\n      rightSide,\n      disabled,\n      renderInDropdown,\n    } = props;\n\n    if (onlyIcon) {\n      const Icon = leftIcon || rightIcon || icon;\n\n      return (\n        <button\n          className={cnTabsTab({ size, checked, onlyIcon, renderInDropdown }, [\n            cnMixFocus({ before: true }),\n            className,\n          ])}\n          role=\"tab\"\n          type=\"button\"\n          onClick={checked ? undefined : onChange}\n          title={label}\n        >\n          {Icon && <Icon size={getByMap(mapIconSize, size, iconSize)} />}\n        </button>\n      );\n    }\n\n    return (\n      <ListItem\n        as=\"button\"\n        className={cnTabsTab(\n          { checked, onlyIcon, renderInDropdown, disabled },\n          [!disabled ? cnMixFocus({ before: true }) : undefined, className],\n        )}\n        role=\"tab\"\n        type=\"button\"\n        tabIndex={disabled ? -1 : undefined}\n        onClick={checked ? undefined : onChange}\n        ref={ref}\n        title={onlyIcon ? label.toString() : undefined}\n        label={label}\n        leftIcon={leftIcon || icon}\n        leftSide={leftSide}\n        rightIcon={rightIcon}\n        rightSide={rightSide}\n        iconSize={iconSize}\n        disabled={disabled}\n        size={size}\n        space={{\n          pV: mapItemVerticalPadding ? mapItemVerticalPadding[size] : 'xs',\n        }}\n      />\n    );\n  },\n);\n"],"mappings":"AAAA,sBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OACEC,QADF,CAEEC,WAFF,CAGEC,sBAHF,wBAKA,OAASC,UAAT,8BACA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAIA,MAAO,IAAMC,UAAS,CAAGF,EAAE,CAAC,SAAD,CAApB,CAEP,MAAO,IAAMG,QAAO,CAAGR,UAAU,CAC/B,SAACS,CAAD,CAAQC,CAAR,CAAgB,CACd,GACEC,EADF,CAeIF,CAfJ,CACEE,KADF,CAEEC,CAFF,CAeIH,CAfJ,CAEEG,QAFF,CAGEC,CAHF,CAeIJ,CAfJ,CAGEI,OAHF,CAIEC,CAJF,CAeIL,CAfJ,CAIEK,IAJF,CAKEC,CALF,CAeIN,CAfJ,CAKEM,QALF,CAMEC,CANF,CAeIP,CAfJ,CAMEO,IANF,CAOEC,CAPF,CAeIR,CAfJ,CAOEQ,QAPF,CAQEC,CARF,CAeIT,CAfJ,CAQES,QARF,CASEC,CATF,CAeIV,CAfJ,CASEU,QATF,CAUEC,CAVF,CAeIX,CAfJ,CAUEW,SAVF,CAWEC,CAXF,CAeIZ,CAfJ,CAWEY,SAXF,CAYEC,CAZF,CAeIb,CAfJ,CAYEa,SAZF,CAaEC,CAbF,CAeId,CAfJ,CAaEc,QAbF,CAcEC,CAdF,CAeIf,CAfJ,CAcEe,gBAdF,CAiBA,GAAIT,CAAJ,CAAc,CACZ,GAAMU,EAAI,CAAGP,CAAQ,EAAIG,CAAZ,EAAyBL,CAAtC,CAEA,MACE,+BACE,SAAS,CAAET,SAAS,CAAC,CAAEO,IAAI,CAAJA,CAAF,CAAQD,OAAO,CAAPA,CAAR,CAAiBE,QAAQ,CAARA,CAAjB,CAA2BS,gBAAgB,CAAhBA,CAA3B,CAAD,CAAgD,CAClEpB,UAAU,CAAC,CAAEsB,MAAM,GAAR,CAAD,CADwD,CAElEN,CAFkE,CAAhD,CADtB,CAKE,IAAI,CAAC,KALP,CAME,IAAI,CAAC,QANP,CAOE,OAAO,CAAEP,CAAO,QAAeD,CAPjC,CAQE,KAAK,CAAED,CART,EAUGc,CAAI,EAAI,oBAAC,CAAD,EAAM,IAAI,CAAEnB,QAAQ,CAACJ,WAAD,CAAcY,CAAd,CAAoBG,CAApB,CAApB,EAVX,CAaH,CAED,MACE,qBAAC,QAAD,EACE,EAAE,CAAC,QADL,CAEE,SAAS,CAAEV,SAAS,CAClB,CAAEM,OAAO,CAAPA,CAAF,CAAWE,QAAQ,CAARA,CAAX,CAAqBS,gBAAgB,CAAhBA,CAArB,CAAuCD,QAAQ,CAARA,CAAvC,CADkB,CAElB,CAAEA,CAAD,QAAYnB,UAAU,CAAC,CAAEsB,MAAM,GAAR,CAAD,CAAvB,CAAuDN,CAAvD,CAFkB,CAFtB,CAME,IAAI,CAAC,KANP,CAOE,IAAI,CAAC,QAPP,CAQE,QAAQ,CAAEG,CAAQ,CAAG,CAAC,CAAJ,OARpB,CASE,OAAO,CAAEV,CAAO,QAAeD,CATjC,CAUE,GAAG,CAAEF,CAVP,CAWE,KAAK,CAAEK,CAAQ,CAAGJ,CAAK,CAACgB,QAAN,EAAH,OAXjB,CAYE,KAAK,CAAEhB,CAZT,CAaE,QAAQ,CAAEO,CAAQ,EAAIF,CAbxB,CAcE,QAAQ,CAAEG,CAdZ,CAeE,SAAS,CAAEE,CAfb,CAgBE,SAAS,CAAEC,CAhBb,CAiBE,QAAQ,CAAEL,CAjBZ,CAkBE,QAAQ,CAAEM,CAlBZ,CAmBE,IAAI,CAAET,CAnBR,CAoBE,KAAK,CAAE,CACLc,EAAE,CAAEzB,sBAAsB,CAAGA,sBAAsB,CAACW,CAAD,CAAzB,CAAkC,IADvD,CApBT,EAyBH,CAhE8B,CAA1B"}

package/__internal__/src/components/Tabs/Tabs.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["onChange"],_excluded2=["size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemLabel","onChange","iconSize","renderItem"];import"./Tabs.css";import React,{createRef,forwardRef,useMemo}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useResizeObserved}from"../../hooks/useResizeObserved/useResizeObserved";import{cn}from"../../utils/bem";import{getTabsDirection,getTabsWrapper,withDefaultGetters}from"./helpers";import{TabsBorderLine,TabsRunningLine}from"./Line/TabsLine";import{cnTabsTab,TabsTab}from"./Tab/TabsTab";import{tabsDefaultFitMode,tabsDefaultLinePosition,tabsDefaultSize,tabsDefaultView}from"./types";export var cnTabs=cn("Tabs");function renderItemDefault(a){var b=a.onChange,c=_objectWithoutProperties(a,_excluded);return React.createElement(TabsTab,Object.assign({},c,{onChange:b}))}var TabsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?tabsDefaultSize:d,f=c.className,g=c.items,h=c.view,i=void 0===h?tabsDefaultView:h,j=c.value,k=c.linePosition,l=void 0===k?tabsDefaultLinePosition:k,m=c.fitMode,n=void 0===m?tabsDefaultFitMode:m,o=c.onlyIcon,p=c.getItemIcon,q=c.getItemLabel,r=c.onChange,s=c.iconSize,t=c.renderItem,u=void 0===t?renderItemDefault:t,v=_objectWithoutProperties(c,_excluded2),w=useChoiceGroup({value:j||null,getKey:q,callBack:r,multiple:!1}),x=w.getOnChange,y=w.getChecked,z=getTabsDirection(l),A="vertical"===z,B=useMemo(function(){return Array(g.length).fill(null).map(function(){return createRef()})},[g,n,A]),C=useResizeObserved(B,function(a){var b;return{size:null!==(b=null===a||void 0===a?void 0:a[A?"offsetHeight":"offsetWidth"])&&void 0!==b?b:0,gap:a?parseInt(getComputedStyle(a)[A?"marginBottom":"marginRight"],10):0}}),D=g.findIndex(y),E=function(a,b){return u({item:a,onChange:function(){null===b||void 0===b?void 0:b(),x(a).apply(void 0,arguments)},checked:y(a),label:q(a).toString(),icon:null===p||void 0===p?void 0:p(a),onlyIcon:o,size:e,iconSize:s})},F=getTabsWrapper(z,n);return React.createElement("div",Object.assign({className:cnTabs({size:e,view:i,direction:z},[f]),ref:b},v),React.createElement(F,{tabRefs:B,tabsDimensions:C,renderItem:E,renderItemsList:function renderItemsList(a){var b=a.withRunningLine,c=a.getTabClassName;return React.createElement("div",{className:cnTabs("List",{direction:z,linePosition:l})},g.map(function(a,b){return React.createElement("div",{ref:B[b],key:q(a),className:cnTabs("Tab",{direction:z},[null===c||void 0===c?void 0:c(b)])},E(a))}),(!(void 0!==b)||b)&&React.createElement(TabsRunningLine,{linePosition:l,tabsDimensions:C,activeTabIdx:D}))},getItemLabel:q,getItemChecked:y,items:g}),"bordered"===i&&React.createElement(TabsBorderLine,{linePosition:l}))};export var Tabs=forwardRef(TabsRender);export{TabsTab,cnTabsTab};export*from"./types";
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["item"],_excluded2=["size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemLabel","onChange","iconSize","renderItem","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled"];import"./Tabs.css";import React,{forwardRef}from"react";import{useRefs}from"../../hooks/useRefs";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useResizeObserved}from"../../hooks/useResizeObserved/useResizeObserved";import{cn}from"../../utils/bem";import{getTabsDirection,getTabsWrapper,withDefaultGetters}from"./helpers";import{TabsBorderLine,TabsRunningLine}from"./Line/TabsLine";import{cnTabsTab,TabsTab}from"./Tab/TabsTab";import{tabsDefaultFitMode,tabsDefaultLinePosition,tabsDefaultSize,tabsDefaultView}from"./types";export var cnTabs=cn("Tabs");function renderItemDefault(a){var b=a.item,c=_objectWithoutProperties(a,_excluded);return React.createElement(TabsTab,c)}var TabsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?tabsDefaultSize:d,f=c.className,g=c.items,h=c.view,i=void 0===h?tabsDefaultView:h,j=c.value,k=c.linePosition,l=void 0===k?tabsDefaultLinePosition:k,m=c.fitMode,n=void 0===m?tabsDefaultFitMode:m,o=c.onlyIcon,p=c.getItemIcon,q=c.getItemLabel,r=c.onChange,s=c.iconSize,t=c.renderItem,u=void 0===t?renderItemDefault:t,v=c.getItemLeftIcon,w=c.getItemLeftSide,x=c.getItemRightIcon,y=c.getItemRightSide,z=c.getItemDisabled,A=c.disabled,B=_objectWithoutProperties(c,_excluded2),C=useChoiceGroup({value:j||null,getKey:q,callBack:r,multiple:!1}),D=C.getOnChange,E=C.getChecked,F=getTabsDirection(l),G="vertical"===F,H=useRefs(g.length,[g,n,G]),I=useResizeObserved(H,function(a){var b;return{size:null!==(b=null===a||void 0===a?void 0:a[G?"offsetHeight":"offsetWidth"])&&void 0!==b?b:0,gap:a?parseInt(getComputedStyle(a)[G?"marginBottom":"marginRight"],10):0}}),J=g.findIndex(E),K=function(a,b,c){return u({item:a,onChange:function(){null===b||void 0===b?void 0:b(),D(a).apply(void 0,arguments)},checked:E(a),label:q(a).toString(),icon:p(a),leftIcon:v(a),rightIcon:x(a),leftSide:w(a),rightSide:y(a),disabled:A||z(a),onlyIcon:o,size:e,iconSize:s,renderInDropdown:c})},L=getTabsWrapper(F,n);return React.createElement("div",Object.assign({className:cnTabs({size:e,view:i,direction:F},[f]),ref:b},B),React.createElement(L,{tabRefs:H,tabsDimensions:I,renderItem:K,renderItemsList:function renderItemsList(a){var b=a.withRunningLine,c=a.getTabClassName;return React.createElement("div",{className:cnTabs("List",{direction:F,linePosition:l})},g.map(function(a,b){return React.createElement("div",{ref:H[b],key:q(a),className:cnTabs("Tab",{direction:F},[null===c||void 0===c?void 0:c(b)])},K(a))}),(!(void 0!==b)||b)&&!A&&React.createElement(TabsRunningLine,{linePosition:l,tabsDimensions:I,activeTabIdx:J}))},getItemLabel:q,getItemChecked:E,items:g,size:e}),"bordered"===i&&React.createElement(TabsBorderLine,{linePosition:l}))};export var Tabs=forwardRef(TabsRender);export{TabsTab,cnTabsTab};export*from"./types";
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","createRef","forwardRef","useMemo","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","cnTabsTab","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","onChange","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemLabel","iconSize","renderItem","renderItemProp","getKey","callBack","multiple","getOnChange","getChecked","tabsDirection","isVertical","tabRefs","Array","length","fill","map","tabsDimensions","el","gap","parseInt","getComputedStyle","activeTabIdx","findIndex","item","onClick","checked","label","toString","icon","Wrapper","direction","renderItemsList","withRunningLine","getTabClassName","idx","Tabs"],"sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import './Tabs.css';\n\nimport React, { createRef, forwardRef, useMemo } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';\nimport { cn } from '../../utils/bem';\nimport {\n  getTabsDirection,\n  getTabsWrapper,\n  withDefaultGetters,\n} from './helpers';\nimport { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';\nimport { cnTabsTab, TabsTab } from './Tab/TabsTab';\nimport {\n  RenderItemProps,\n  RenderItemsListProp,\n  TabDimensions,\n  TabsComponent,\n  tabsDefaultFitMode,\n  tabsDefaultLinePosition,\n  tabsDefaultSize,\n  tabsDefaultView,\n  TabsProps,\n} from './types';\n\nexport const cnTabs = cn('Tabs');\n\nfunction renderItemDefault<ITEM>(\n  props: RenderItemProps<ITEM>,\n): React.ReactElement {\n  const { onChange, ...otherProps } = props;\n  return <TabsTab {...otherProps} onChange={onChange} />;\n}\n\nconst TabsRender = (props: TabsProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    size = tabsDefaultSize,\n    className,\n    items,\n    view = tabsDefaultView,\n    value,\n    linePosition = tabsDefaultLinePosition,\n    fitMode = tabsDefaultFitMode,\n    onlyIcon,\n    getItemIcon,\n    getItemLabel,\n    onChange,\n    iconSize,\n    renderItem: renderItemProp = renderItemDefault,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value: value || null,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: false,\n  });\n\n  const tabsDirection = getTabsDirection(linePosition);\n  const isVertical = tabsDirection === 'vertical';\n  const tabRefs = useMemo(\n    () =>\n      new Array(items.length).fill(null).map(() => createRef<HTMLDivElement>()),\n    [items, fitMode, isVertical],\n  );\n  const tabsDimensions = useResizeObserved(\n    tabRefs,\n    (el): TabDimensions => ({\n      size: el?.[isVertical ? 'offsetHeight' : 'offsetWidth'] ?? 0,\n      gap: el\n        ? parseInt(\n            getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'],\n            10,\n          )\n        : 0,\n    }),\n  );\n\n  const activeTabIdx = items.findIndex(getChecked);\n\n  const renderItem = (item: typeof items[number], onClick?: () => void) =>\n    renderItemProp({\n      item,\n      onChange: (...args) => {\n        onClick?.();\n        getOnChange(item)(...args);\n      },\n      checked: getChecked(item),\n      label: getItemLabel(item).toString(),\n      icon: getItemIcon?.(item),\n      onlyIcon,\n      size,\n      iconSize,\n    });\n\n  const renderItemsList: RenderItemsListProp = ({\n    withRunningLine = true,\n    getTabClassName,\n  }) => (\n    <div className={cnTabs('List', { direction: tabsDirection, linePosition })}>\n      {items.map((item, idx) => (\n        <div\n          ref={tabRefs[idx]}\n          key={getItemLabel(item)}\n          className={cnTabs('Tab', { direction: tabsDirection }, [\n            getTabClassName?.(idx),\n          ])}\n        >\n          {renderItem(item)}\n        </div>\n      ))}\n      {withRunningLine && (\n        <TabsRunningLine\n          linePosition={linePosition}\n          tabsDimensions={tabsDimensions}\n          activeTabIdx={activeTabIdx}\n        />\n      )}\n    </div>\n  );\n\n  const Wrapper = getTabsWrapper(tabsDirection, fitMode);\n\n  return (\n    <div\n      className={cnTabs({ size, view, direction: tabsDirection }, [className])}\n      ref={ref}\n      {...otherProps}\n    >\n      <Wrapper\n        tabRefs={tabRefs}\n        tabsDimensions={tabsDimensions}\n        renderItem={renderItem}\n        renderItemsList={renderItemsList}\n        getItemLabel={getItemLabel}\n        getItemChecked={getChecked}\n        items={items}\n      />\n      {view === 'bordered' && <TabsBorderLine linePosition={linePosition} />}\n    </div>\n  );\n};\n\nexport const Tabs = forwardRef(TabsRender) as TabsComponent;\n\nexport { TabsTab, cnTabsTab };\n\nexport * from './types';\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","forwardRef","useRefs","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","cnTabsTab","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemLabel","onChange","iconSize","renderItem","renderItemProp","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled","getKey","callBack","multiple","getOnChange","getChecked","tabsDirection","isVertical","tabRefs","length","tabsDimensions","el","gap","parseInt","getComputedStyle","activeTabIdx","findIndex","onClick","renderInDropdown","checked","label","toString","icon","leftIcon","rightIcon","leftSide","rightSide","Wrapper","direction","renderItemsList","withRunningLine","getTabClassName","map","idx","Tabs"],"sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import './Tabs.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useRefs } from '##/hooks/useRefs';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';\nimport { cn } from '../../utils/bem';\nimport {\n  getTabsDirection,\n  getTabsWrapper,\n  withDefaultGetters,\n} from './helpers';\nimport { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';\nimport { cnTabsTab, TabsTab } from './Tab/TabsTab';\nimport {\n  RenderItemProps,\n  RenderItemsListProp,\n  TabDimensions,\n  TabsComponent,\n  tabsDefaultFitMode,\n  tabsDefaultLinePosition,\n  tabsDefaultSize,\n  tabsDefaultView,\n  TabsProps,\n} from './types';\n\nexport const cnTabs = cn('Tabs');\n\nfunction renderItemDefault<ITEM>(\n  props: RenderItemProps<ITEM>,\n): React.ReactElement {\n  const { item, ...otherProps } = props;\n  return <TabsTab {...otherProps} />;\n}\n\nconst TabsRender = (props: TabsProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    size = tabsDefaultSize,\n    className,\n    items,\n    view = tabsDefaultView,\n    value,\n    linePosition = tabsDefaultLinePosition,\n    fitMode = tabsDefaultFitMode,\n    onlyIcon,\n    getItemIcon,\n    getItemLabel,\n    onChange,\n    iconSize,\n    renderItem: renderItemProp = renderItemDefault,\n    getItemLeftIcon,\n    getItemLeftSide,\n    getItemRightIcon,\n    getItemRightSide,\n    getItemDisabled,\n    disabled,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value: value || null,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: false,\n  });\n\n  const tabsDirection = getTabsDirection(linePosition);\n  const isVertical = tabsDirection === 'vertical';\n  const tabRefs = useRefs<HTMLDivElement>(items.length, [\n    items,\n    fitMode,\n    isVertical,\n  ]);\n\n  const tabsDimensions = useResizeObserved(\n    tabRefs,\n    (el): TabDimensions => ({\n      size: el?.[isVertical ? 'offsetHeight' : 'offsetWidth'] ?? 0,\n      gap: el\n        ? parseInt(\n            getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'],\n            10,\n          )\n        : 0,\n    }),\n  );\n\n  const activeTabIdx = items.findIndex(getChecked);\n\n  const renderItem = (\n    item: typeof items[number],\n    onClick?: () => void,\n    renderInDropdown?: boolean,\n  ) =>\n    renderItemProp({\n      item,\n      onChange: (...args) => {\n        onClick?.();\n        getOnChange(item)(...args);\n      },\n      checked: getChecked(item),\n      label: getItemLabel(item).toString(),\n      icon: getItemIcon(item),\n      leftIcon: getItemLeftIcon(item),\n      rightIcon: getItemRightIcon(item),\n      leftSide: getItemLeftSide(item),\n      rightSide: getItemRightSide(item),\n      disabled: disabled || getItemDisabled(item),\n      onlyIcon,\n      size,\n      iconSize,\n      renderInDropdown,\n    });\n\n  const renderItemsList: RenderItemsListProp = ({\n    withRunningLine = true,\n    getTabClassName,\n  }) => (\n    <div className={cnTabs('List', { direction: tabsDirection, linePosition })}>\n      {items.map((item, idx) => (\n        <div\n          ref={tabRefs[idx]}\n          key={getItemLabel(item)}\n          className={cnTabs('Tab', { direction: tabsDirection }, [\n            getTabClassName?.(idx),\n          ])}\n        >\n          {renderItem(item)}\n        </div>\n      ))}\n      {withRunningLine && !disabled && (\n        <TabsRunningLine\n          linePosition={linePosition}\n          tabsDimensions={tabsDimensions}\n          activeTabIdx={activeTabIdx}\n        />\n      )}\n    </div>\n  );\n\n  const Wrapper = getTabsWrapper(tabsDirection, fitMode);\n\n  return (\n    <div\n      className={cnTabs({ size, view, direction: tabsDirection }, [className])}\n      ref={ref}\n      {...otherProps}\n    >\n      <Wrapper\n        tabRefs={tabRefs}\n        tabsDimensions={tabsDimensions}\n        renderItem={renderItem}\n        renderItemsList={renderItemsList}\n        getItemLabel={getItemLabel}\n        getItemChecked={getChecked}\n        items={items}\n        size={size}\n      />\n      {view === 'bordered' && <TabsBorderLine linePosition={linePosition} />}\n    </div>\n  );\n};\n\nexport const Tabs = forwardRef(TabsRender) as TabsComponent;\n\nexport { TabsTab, cnTabsTab };\n\nexport * from './types';\n"],"mappings":"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"}

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

@@ -1,11 +1,16 @@
 import React from 'react';
-import { TabDimensions, TabsDirection, TabsFitModeWrapperProps, TabsItemDefault, TabsPropFitMode, TabsPropGetItemIcon, TabsPropGetItemLabel, TabsPropLinePosition, TabsProps } from './types';
+import { TabDimensions, TabsDirection, TabsFitModeWrapperProps, TabsItemDefault, TabsPropFitMode, TabsPropGetItemDisabled, TabsPropGetItemIcon, TabsPropGetItemLabel, TabsPropGetItemSide, TabsPropLinePosition, TabsProps } from './types';
 export declare const getTabsDirection: (linePosition: TabsPropLinePosition) => TabsDirection;
 export declare const getTabsWidth: (tabsDimensions: TabDimensions[]) => number;
-export declare const getTabsWrapper: (tabsDirection: TabsDirection, fitMode: TabsPropFitMode) => <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const getTabsWrapper: (tabsDirection: TabsDirection, fitMode: TabsPropFitMode) => <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, size, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export declare const withDefaultGetters: (props: TabsProps) => {
     getItemLabel: TabsPropGetItemLabel<TabsItemDefault>;
     getItemIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemLeftIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemRightIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemLeftSide: TabsPropGetItemSide<TabsItemDefault>;
+    getItemRightSide: TabsPropGetItemSide<TabsItemDefault>;
+    getItemDisabled: TabsPropGetItemDisabled<TabsItemDefault>;
     size?: "m" | "s" | "xs" | undefined;
     onlyIcon?: boolean | undefined;
     view?: "clear" | "bordered" | undefined;
@@ -15,6 +20,7 @@ export declare const withDefaultGetters: (props: TabsProps) => {
     children?: undefined;
     onChange: import("./types").TabsPropOnChange<TabsItemDefault>;
     renderItem?: import("./types").RenderItem<TabsItemDefault> | undefined;
+    disabled?: boolean | undefined;
     linePosition?: "top" | "bottom" | undefined;
     fitMode?: "scroll" | "dropdown" | undefined;
     defaultChecked?: boolean | undefined;
@@ -276,6 +282,11 @@ export declare const withDefaultGetters: (props: TabsProps) => {
 } | {
     getItemLabel: TabsPropGetItemLabel<TabsItemDefault>;
     getItemIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemLeftIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemRightIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemLeftSide: TabsPropGetItemSide<TabsItemDefault>;
+    getItemRightSide: TabsPropGetItemSide<TabsItemDefault>;
+    getItemDisabled: TabsPropGetItemDisabled<TabsItemDefault>;
     size?: "m" | "s" | "xs" | undefined;
     onlyIcon?: boolean | undefined;
     view?: "clear" | "bordered" | undefined;
@@ -285,6 +296,7 @@ export declare const withDefaultGetters: (props: TabsProps) => {
     children?: undefined;
     onChange: import("./types").TabsPropOnChange<TabsItemDefault>;
     renderItem?: import("./types").RenderItem<TabsItemDefault> | undefined;
+    disabled?: boolean | undefined;
     linePosition: "left" | "right";
     fitMode?: undefined;
     defaultChecked?: boolean | undefined;

package/__internal__/src/components/Tabs/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 React from"react";import{TabsFitModeDropdownWrapper}from"./FitModeDropdownWrapper/TabsFitModeDropdownWrapper";import{TabsFitModeScrollWrapper}from"./FitModeScrollWrapper/TabsFitModeScrollWrapper";export var getTabsDirection=function(a){return"left"===a||"right"===a?"vertical":"horizontal"};export var getTabsWidth=function(a){return a.reduce(function(a,b){return a+b.size+b.gap},0)};export var getTabsWrapper=function(a,b){return"vertical"===a?OnlyListWrapper:"scroll"===b?TabsFitModeScrollWrapper:TabsFitModeDropdownWrapper};var defaultGetItemLabel=function(a){return a.label},defaultGetItemIcon=function(a){return a.icon};export var withDefaultGetters=function(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIcon:a.getItemIcon||defaultGetItemIcon})};var OnlyListWrapper=function(a){var b=a.renderItemsList;return React.createElement(React.Fragment,null,b({}))};export var getVisibleTabsRange=function(a){for(var b,c,d=a.tabsDimensions,e=a.containerWidth,f=a.containerPaddingLeft,g=a.scrollLeft,h=null,i=null,j=g,k=0;k<d.length;k++){var l=getTabsWidth(d.slice(0,k)),m=f+l;m>=j&&null===h&&(h=k);var n=m+d[k].size;n<=j+e&&(i=k)}return h=null!==(b=h)&&void 0!==b?b:0,i=Math.max(h,null!==(c=i)&&void 0!==c?c:0),[h,i]};
+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 React from"react";import{TabsFitModeDropdownWrapper}from"./FitModeDropdownWrapper/TabsFitModeDropdownWrapper";import{TabsFitModeScrollWrapper}from"./FitModeScrollWrapper/TabsFitModeScrollWrapper";export var getTabsDirection=function(a){return"left"===a||"right"===a?"vertical":"horizontal"};export var getTabsWidth=function(a){return a.reduce(function(a,b){return a+b.size+b.gap},0)};export var getTabsWrapper=function(a,b){return"vertical"===a?OnlyListWrapper:"scroll"===b?TabsFitModeScrollWrapper:TabsFitModeDropdownWrapper};var defaultGetItemLabel=function(a){return a.label},defaultGetItemIcon=function(a){return a.icon},defaultGetItemLeftIcon=function(a){return a.leftIcon},defaultGetItemRightIcon=function(a){return a.rightIcon},defaultGetItemLeftSide=function(a){return a.leftSide},defaultGetItemRightSide=function(a){return a.rightSide},defaultGetItemDisable=function(a){return a.disabled};export var withDefaultGetters=function(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIcon:a.getItemIcon||defaultGetItemIcon,getItemLeftIcon:a.getItemLeftIcon||defaultGetItemLeftIcon,getItemRightIcon:a.getItemRightIcon||defaultGetItemRightIcon,getItemLeftSide:a.getItemLeftSide||defaultGetItemLeftSide,getItemRightSide:a.getItemRightSide||defaultGetItemRightSide,getItemDisabled:a.getItemDisabled||defaultGetItemDisable})};var OnlyListWrapper=function(a){var b=a.renderItemsList;return React.createElement(React.Fragment,null,b({}))};export var getVisibleTabsRange=function(a){for(var b,c,d=a.tabsDimensions,e=a.containerWidth,f=a.containerPaddingLeft,g=a.scrollLeft,h=null,i=null,j=g,k=0;k<d.length;k++){var l=getTabsWidth(d.slice(0,k)),m=f+l;m>=j&&null===h&&(h=k);var n=m+d[k].size;n<=j+e&&(i=k)}return h=null!==(b=h)&&void 0!==b?b:0,i=Math.max(h,null!==(c=i)&&void 0!==c?c:0),[h,i]};
 //# sourceMappingURL=helpers.js.map