@consta/uikit 4.11.0 → 4.12.0

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

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["React","TabsFitModeDropdownWrapper","TabsFitModeScrollWrapper","getTabsDirection","linePosition","getTabsWidth","tabsDimensions","reduce","acc","td","size","gap","getTabsWrapper","tabsDirection","fitMode","OnlyListWrapper","defaultGetItemLabel","item","label","defaultGetItemIcon","icon","withDefaultGetters","props","getItemLabel","getItemIcon","renderItemsList","getVisibleTabsRange","containerWidth","containerPaddingLeft","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","containerLeftSide","idx","length","previousTabsWidth","slice","tabElLeftSide","tabElRightSide","Math","max"],"sources":["../../../../../src/components/Tabs/helpers.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabsFitModeDropdownWrapper } from './FitModeDropdownWrapper/TabsFitModeDropdownWrapper';\nimport { TabsFitModeScrollWrapper } from './FitModeScrollWrapper/TabsFitModeScrollWrapper';\nimport {\n  TabDimensions,\n  TabsDirection,\n  TabsFitModeWrapperProps,\n  TabsItemDefault,\n  TabsPropFitMode,\n  TabsPropGetItemIcon,\n  TabsPropGetItemLabel,\n  TabsPropLinePosition,\n  TabsProps,\n} from './types';\n\nexport const getTabsDirection = (\n  linePosition: TabsPropLinePosition,\n): TabsDirection =>\n  linePosition === 'left' || linePosition === 'right'\n    ? 'vertical'\n    : 'horizontal';\n\nexport const getTabsWidth = (tabsDimensions: TabDimensions[]): number =>\n  tabsDimensions.reduce((acc, td) => acc + td.size + td.gap, 0);\n\nexport const getTabsWrapper = (\n  tabsDirection: TabsDirection,\n  fitMode: TabsPropFitMode,\n) => {\n  if (tabsDirection === 'vertical') {\n    return OnlyListWrapper;\n  }\n\n  return fitMode === 'scroll'\n    ? TabsFitModeScrollWrapper\n    : TabsFitModeDropdownWrapper;\n};\n\nconst defaultGetItemLabel: TabsPropGetItemLabel<TabsItemDefault> = (item) =>\n  item.label;\nconst defaultGetItemIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n  item.icon;\n\nexport const withDefaultGetters = (props: TabsProps) => {\n  return {\n    ...props,\n    getItemLabel: props.getItemLabel || defaultGetItemLabel,\n    getItemIcon: props.getItemIcon || defaultGetItemIcon,\n  };\n};\n\nconst OnlyListWrapper = <ITEM,>({\n  renderItemsList,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => (\n  <>{renderItemsList({})}</>\n);\n\nexport const getVisibleTabsRange = ({\n  tabsDimensions,\n  containerWidth,\n  containerPaddingLeft,\n  scrollLeft,\n}: {\n  tabsDimensions: TabDimensions[];\n  containerWidth: number;\n  containerPaddingLeft: number;\n  scrollLeft: number;\n}): [number, number] => {\n  let firstVisibleTabIdx = null;\n  let lastVisibleTabIdx = null;\n\n  const containerLeftSide = scrollLeft;\n  const containerRightSide = containerLeftSide + containerWidth;\n\n  for (let idx = 0; idx < tabsDimensions.length; idx++) {\n    const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n    const tabElLeftSide = containerPaddingLeft + previousTabsWidth;\n    const isTabLeftSideVisible = tabElLeftSide >= containerLeftSide;\n    if (isTabLeftSideVisible && firstVisibleTabIdx === null) {\n      firstVisibleTabIdx = idx;\n    }\n\n    const tabElRightSide = tabElLeftSide + tabsDimensions[idx].size;\n    const isTabRightSideVisible = tabElRightSide <= containerRightSide;\n    if (isTabRightSideVisible) {\n      lastVisibleTabIdx = idx;\n    }\n  }\n\n  firstVisibleTabIdx = firstVisibleTabIdx ?? 0;\n  lastVisibleTabIdx = Math.max(firstVisibleTabIdx, lastVisibleTabIdx ?? 0);\n\n  return [firstVisibleTabIdx, lastVisibleTabIdx];\n};\n"],"mappings":"qqBAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,0BAAT,2DACA,OAASC,wBAAT,uDAaA,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,QAGb,MAAjB,GAAAA,CAAY,EAAgC,OAAjB,GAAAA,CAA3B,CACI,UADJ,CAEI,YAL0B,CAAzB,CAOP,MAAO,IAAMC,aAAY,CAAG,SAACC,CAAD,QAC1BA,EAAc,CAACC,MAAf,CAAsB,SAACC,CAAD,CAAMC,CAAN,QAAaD,EAAG,CAAGC,CAAE,CAACC,IAAT,CAAgBD,CAAE,CAACE,GAAhC,CAAtB,CAA2D,CAA3D,CAD0B,CAArB,CAGP,MAAO,IAAMC,eAAc,CAAG,SAC5BC,CAD4B,CAE5BC,CAF4B,CAGzB,OACmB,UAAlB,GAAAD,CADD,CAEME,eAFN,CAKgB,QAAZ,GAAAD,CAAO,CACVZ,wBADU,CAEVD,0BACL,CAXM,C,GAaDe,oBAA0D,CAAG,SAACC,CAAD,QACjEA,EAAI,CAACC,KAD4D,C,CAE7DC,kBAAwD,CAAG,SAACF,CAAD,QAC/DA,EAAI,CAACG,IAD0D,C,CAGjE,MAAO,IAAMC,mBAAkB,CAAG,SAACC,CAAD,CAAsB,CACtD,sCACKA,CADL,MAEEC,YAAY,CAAED,CAAK,CAACC,YAAN,EAAsBP,mBAFtC,CAGEQ,WAAW,CAAEF,CAAK,CAACE,WAAN,EAAqBL,kBAHpC,EAKD,CANM,CAQP,GAAMJ,gBAAe,CAAG,eACtBU,EADsB,GACtBA,eADsB,OAGtB,yCAAGA,CAAe,CAAC,EAAD,CAAlB,CAHsB,CAAxB,CAMA,MAAO,IAAMC,oBAAmB,CAAG,WAUX,CAOtB,YAhBApB,CAgBA,GAhBAA,cAgBA,CAfAqB,CAeA,GAfAA,cAeA,CAdAC,CAcA,GAdAA,oBAcA,CAbAC,CAaA,GAbAA,UAaA,CANIC,CAAkB,CAAG,IAMzB,CALIC,CAAiB,CAAG,IAKxB,CAHMC,CAAiB,CAAGH,CAG1B,CAASI,CAAG,CAAG,CAAf,CAAkBA,CAAG,CAAG3B,CAAc,CAAC4B,MAAvC,CAA+CD,CAAG,EAAlD,CAAsD,IAC9CE,EAAiB,CAAG9B,YAAY,CAACC,CAAc,CAAC8B,KAAf,CAAqB,CAArB,CAAwBH,CAAxB,CAAD,CADc,CAE9CI,CAAa,CAAGT,CAAoB,CAAGO,CAFO,CAGvBE,CAAa,EAAIL,CAC1C,EAA+C,IAAvB,GAAAF,CAJwB,GAKlDA,CAAkB,CAAGG,CAL6B,KAQ9CK,EAAc,CAAGD,CAAa,CAAG/B,CAAc,CAAC2B,CAAD,CAAd,CAAoBvB,IARP,CAStB4B,CAAc,EAXnBN,CAAiB,CAAGL,CAEO,GAWlDI,CAAiB,CAAGE,CAX8B,CAarD,CAKD,MAHAH,EAAkB,WAAGA,CAAH,gBAAyB,CAG3C,CAFAC,CAAiB,CAAGQ,IAAI,CAACC,GAAL,CAASV,CAAT,WAA6BC,CAA7B,gBAAkD,CAAlD,CAEpB,CAAO,CAACD,CAAD,CAAqBC,CAArB,CACR,CApCM"}
+{"version":3,"file":"helpers.js","names":["React","TabsFitModeDropdownWrapper","TabsFitModeScrollWrapper","getTabsDirection","linePosition","getTabsWidth","tabsDimensions","reduce","acc","td","size","gap","getTabsWrapper","tabsDirection","fitMode","OnlyListWrapper","defaultGetItemLabel","item","label","defaultGetItemIcon","icon","defaultGetItemLeftIcon","leftIcon","defaultGetItemRightIcon","rightIcon","defaultGetItemLeftSide","leftSide","defaultGetItemRightSide","rightSide","defaultGetItemDisable","disabled","withDefaultGetters","props","getItemLabel","getItemIcon","getItemLeftIcon","getItemRightIcon","getItemLeftSide","getItemRightSide","getItemDisabled","renderItemsList","getVisibleTabsRange","containerWidth","containerPaddingLeft","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","containerLeftSide","idx","length","previousTabsWidth","slice","tabElLeftSide","tabElRightSide","Math","max"],"sources":["../../../../../src/components/Tabs/helpers.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabsFitModeDropdownWrapper } from './FitModeDropdownWrapper/TabsFitModeDropdownWrapper';\nimport { TabsFitModeScrollWrapper } from './FitModeScrollWrapper/TabsFitModeScrollWrapper';\nimport {\n  TabDimensions,\n  TabsDirection,\n  TabsFitModeWrapperProps,\n  TabsItemDefault,\n  TabsPropFitMode,\n  TabsPropGetItemDisabled,\n  TabsPropGetItemIcon,\n  TabsPropGetItemLabel,\n  TabsPropGetItemSide,\n  TabsPropLinePosition,\n  TabsProps,\n} from './types';\n\nexport const getTabsDirection = (\n  linePosition: TabsPropLinePosition,\n): TabsDirection =>\n  linePosition === 'left' || linePosition === 'right'\n    ? 'vertical'\n    : 'horizontal';\n\nexport const getTabsWidth = (tabsDimensions: TabDimensions[]): number =>\n  tabsDimensions.reduce((acc, td) => acc + td.size + td.gap, 0);\n\nexport const getTabsWrapper = (\n  tabsDirection: TabsDirection,\n  fitMode: TabsPropFitMode,\n) => {\n  if (tabsDirection === 'vertical') {\n    return OnlyListWrapper;\n  }\n\n  return fitMode === 'scroll'\n    ? TabsFitModeScrollWrapper\n    : TabsFitModeDropdownWrapper;\n};\n\nconst defaultGetItemLabel: TabsPropGetItemLabel<TabsItemDefault> = (item) =>\n  item.label;\nconst defaultGetItemIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n  item.icon;\nconst defaultGetItemLeftIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n  item.leftIcon;\nconst defaultGetItemRightIcon: TabsPropGetItemIcon<TabsItemDefault> = (item) =>\n  item.rightIcon;\nconst defaultGetItemLeftSide: TabsPropGetItemSide<TabsItemDefault> = (item) =>\n  item.leftSide;\nconst defaultGetItemRightSide: TabsPropGetItemSide<TabsItemDefault> = (item) =>\n  item.rightSide;\nconst defaultGetItemDisable: TabsPropGetItemDisabled<TabsItemDefault> = (\n  item,\n) => item.disabled;\n\nexport const withDefaultGetters = (props: TabsProps) => {\n  return {\n    ...props,\n    getItemLabel: props.getItemLabel || defaultGetItemLabel,\n    getItemIcon: props.getItemIcon || defaultGetItemIcon,\n    getItemLeftIcon: props.getItemLeftIcon || defaultGetItemLeftIcon,\n    getItemRightIcon: props.getItemRightIcon || defaultGetItemRightIcon,\n    getItemLeftSide: props.getItemLeftSide || defaultGetItemLeftSide,\n    getItemRightSide: props.getItemRightSide || defaultGetItemRightSide,\n    getItemDisabled: props.getItemDisabled || defaultGetItemDisable,\n  };\n};\n\nconst OnlyListWrapper = <ITEM,>({\n  renderItemsList,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => (\n  <>{renderItemsList({})}</>\n);\n\nexport const getVisibleTabsRange = ({\n  tabsDimensions,\n  containerWidth,\n  containerPaddingLeft,\n  scrollLeft,\n}: {\n  tabsDimensions: TabDimensions[];\n  containerWidth: number;\n  containerPaddingLeft: number;\n  scrollLeft: number;\n}): [number, number] => {\n  let firstVisibleTabIdx = null;\n  let lastVisibleTabIdx = null;\n\n  const containerLeftSide = scrollLeft;\n  const containerRightSide = containerLeftSide + containerWidth;\n\n  for (let idx = 0; idx < tabsDimensions.length; idx++) {\n    const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n    const tabElLeftSide = containerPaddingLeft + previousTabsWidth;\n    const isTabLeftSideVisible = tabElLeftSide >= containerLeftSide;\n    if (isTabLeftSideVisible && firstVisibleTabIdx === null) {\n      firstVisibleTabIdx = idx;\n    }\n\n    const tabElRightSide = tabElLeftSide + tabsDimensions[idx].size;\n    const isTabRightSideVisible = tabElRightSide <= containerRightSide;\n    if (isTabRightSideVisible) {\n      lastVisibleTabIdx = idx;\n    }\n  }\n\n  firstVisibleTabIdx = firstVisibleTabIdx ?? 0;\n  lastVisibleTabIdx = Math.max(firstVisibleTabIdx, lastVisibleTabIdx ?? 0);\n\n  return [firstVisibleTabIdx, lastVisibleTabIdx];\n};\n"],"mappings":"qqBAAA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,0BAAT,2DACA,OAASC,wBAAT,uDAeA,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,QAGb,MAAjB,GAAAA,CAAY,EAAgC,OAAjB,GAAAA,CAA3B,CACI,UADJ,CAEI,YAL0B,CAAzB,CAOP,MAAO,IAAMC,aAAY,CAAG,SAACC,CAAD,QAC1BA,EAAc,CAACC,MAAf,CAAsB,SAACC,CAAD,CAAMC,CAAN,QAAaD,EAAG,CAAGC,CAAE,CAACC,IAAT,CAAgBD,CAAE,CAACE,GAAhC,CAAtB,CAA2D,CAA3D,CAD0B,CAArB,CAGP,MAAO,IAAMC,eAAc,CAAG,SAC5BC,CAD4B,CAE5BC,CAF4B,CAGzB,OACmB,UAAlB,GAAAD,CADD,CAEME,eAFN,CAKgB,QAAZ,GAAAD,CAAO,CACVZ,wBADU,CAEVD,0BACL,CAXM,C,GAaDe,oBAA0D,CAAG,SAACC,CAAD,QACjEA,EAAI,CAACC,KAD4D,C,CAE7DC,kBAAwD,CAAG,SAACF,CAAD,QAC/DA,EAAI,CAACG,IAD0D,C,CAE3DC,sBAA4D,CAAG,SAACJ,CAAD,QACnEA,EAAI,CAACK,QAD8D,C,CAE/DC,uBAA6D,CAAG,SAACN,CAAD,QACpEA,EAAI,CAACO,SAD+D,C,CAEhEC,sBAA4D,CAAG,SAACR,CAAD,QACnEA,EAAI,CAACS,QAD8D,C,CAE/DC,uBAA6D,CAAG,SAACV,CAAD,QACpEA,EAAI,CAACW,SAD+D,C,CAEhEC,qBAA+D,CAAG,SACtEZ,CADsE,QAEnEA,EAAI,CAACa,QAF8D,C,CAIxE,MAAO,IAAMC,mBAAkB,CAAG,SAACC,CAAD,CAAsB,CACtD,sCACKA,CADL,MAEEC,YAAY,CAAED,CAAK,CAACC,YAAN,EAAsBjB,mBAFtC,CAGEkB,WAAW,CAAEF,CAAK,CAACE,WAAN,EAAqBf,kBAHpC,CAIEgB,eAAe,CAAEH,CAAK,CAACG,eAAN,EAAyBd,sBAJ5C,CAKEe,gBAAgB,CAAEJ,CAAK,CAACI,gBAAN,EAA0Bb,uBAL9C,CAMEc,eAAe,CAAEL,CAAK,CAACK,eAAN,EAAyBZ,sBAN5C,CAOEa,gBAAgB,CAAEN,CAAK,CAACM,gBAAN,EAA0BX,uBAP9C,CAQEY,eAAe,CAAEP,CAAK,CAACO,eAAN,EAAyBV,qBAR5C,EAUD,CAXM,CAaP,GAAMd,gBAAe,CAAG,eACtByB,EADsB,GACtBA,eADsB,OAGtB,yCAAGA,CAAe,CAAC,EAAD,CAAlB,CAHsB,CAAxB,CAMA,MAAO,IAAMC,oBAAmB,CAAG,WAUX,CAOtB,YAhBAnC,CAgBA,GAhBAA,cAgBA,CAfAoC,CAeA,GAfAA,cAeA,CAdAC,CAcA,GAdAA,oBAcA,CAbAC,CAaA,GAbAA,UAaA,CANIC,CAAkB,CAAG,IAMzB,CALIC,CAAiB,CAAG,IAKxB,CAHMC,CAAiB,CAAGH,CAG1B,CAASI,CAAG,CAAG,CAAf,CAAkBA,CAAG,CAAG1C,CAAc,CAAC2C,MAAvC,CAA+CD,CAAG,EAAlD,CAAsD,IAC9CE,EAAiB,CAAG7C,YAAY,CAACC,CAAc,CAAC6C,KAAf,CAAqB,CAArB,CAAwBH,CAAxB,CAAD,CADc,CAE9CI,CAAa,CAAGT,CAAoB,CAAGO,CAFO,CAGvBE,CAAa,EAAIL,CAC1C,EAA+C,IAAvB,GAAAF,CAJwB,GAKlDA,CAAkB,CAAGG,CAL6B,KAQ9CK,EAAc,CAAGD,CAAa,CAAG9C,CAAc,CAAC0C,CAAD,CAAd,CAAoBtC,IARP,CAStB2C,CAAc,EAXnBN,CAAiB,CAAGL,CAEO,GAWlDI,CAAiB,CAAGE,CAX8B,CAarD,CAKD,MAHAH,EAAkB,WAAGA,CAAH,gBAAyB,CAG3C,CAFAC,CAAiB,CAAGQ,IAAI,CAACC,GAAL,CAASV,CAAT,WAA6BC,CAA7B,gBAAkD,CAAlD,CAEpB,CAAO,CAACD,CAAD,CAAqBC,CAArB,CACR,CApCM"}

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

@@ -7,6 +7,14 @@ export declare type TabDimensions = {
 };
 export declare type TabsItemDefault = {
     label: string | number;
+    leftIcon?: IconComponent;
+    rightIcon?: IconComponent;
+    rightSide?: React.ReactNode;
+    leftSide?: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * @deprecated since version 4.11.0 use leftIcon
+     */
     icon?: IconComponent;
 };
 export declare const tabsSizes: readonly ["m", "s", "xs"];
@@ -24,6 +32,8 @@ export declare const tabsDefaultFitMode: TabsPropFitMode;
 export declare type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number;
 export declare type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type TabsPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
+export declare type TabsPropGetItemSide<ITEM> = (item: ITEM) => React.ReactNode | undefined;
+export declare type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type TabsPropOnChange<ITEM> = (props: {
     e: React.MouseEvent;
     value: ITEM;
@@ -32,12 +42,12 @@ export declare type RenderItemProps<ITEM> = {
     item: ITEM;
     onChange: React.MouseEventHandler;
     checked: boolean;
-    label: string;
-    icon?: IconComponent;
     size: TabsPropSize;
     iconSize?: IconPropSize;
     onlyIcon?: boolean;
-};
+    label: string;
+    renderInDropdown?: boolean;
+} & Omit<TabsItemDefault, 'label'>;
 export declare type RenderItem<ITEM> = (props: RenderItemProps<ITEM>) => React.ReactElement | null;
 export declare type TabsFitModeWrapperProps<ITEM> = {
     items: ITEM[];
@@ -47,6 +57,7 @@ export declare type TabsFitModeWrapperProps<ITEM> = {
     renderItem: (item: ITEM) => React.ReactNode;
     renderItemsList: RenderItemsListProp;
     tabRefs: Array<React.RefObject<HTMLElement>>;
+    size: TabsPropSize;
 };
 export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
     size?: TabsPropSize;
@@ -55,11 +66,20 @@ export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesA
     iconSize?: IconPropSize;
     items: ITEM[];
     value?: ITEM | null;
-    getItemIcon?: TabsPropGetItemIcon<ITEM>;
     getItemLabel?: TabsPropGetItemLabel<ITEM>;
+    getItemLeftIcon?: TabsPropGetItemIcon<ITEM>;
+    getItemRightIcon?: TabsPropGetItemIcon<ITEM>;
+    getItemLeftSide?: TabsPropGetItemSide<ITEM>;
+    getItemRightSide?: TabsPropGetItemSide<ITEM>;
+    getItemDisabled?: TabsPropGetItemDisabled<ITEM>;
     children?: never;
     onChange: TabsPropOnChange<ITEM>;
     renderItem?: RenderItem<ITEM>;
+    disabled?: boolean;
+    /**
+     * @deprecated since version 4.11.0 use getItemLeftIcon
+     */
+    getItemIcon?: TabsPropGetItemIcon<ITEM>;
 } & ({
     linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;
     fitMode?: 'dropdown' | 'scroll';
@@ -73,21 +93,22 @@ export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesA
 });
 export declare type TabsComponent = <ITEM>(props: TabsProps<ITEM>) => React.ReactElement | null;
 export declare type TabsTabProps = {
+    onChange: React.MouseEventHandler;
+    checked: boolean;
     size: TabsPropSize;
-    onlyIcon?: boolean;
-    icon?: IconComponent;
     iconSize?: IconPropSize;
-    label: string;
-    checked: boolean;
-    onChange: React.MouseEventHandler<HTMLButtonElement>;
+    onlyIcon?: boolean;
     className?: string;
-};
+    label: string;
+    renderInDropdown?: boolean;
+} & Omit<TabsItemDefault, 'label'>;
 export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
     items: ITEM[];
-    renderItem: (item: ITEM, onClick: () => void) => React.ReactNode;
+    renderItem: (item: ITEM, onClick: () => void, renderInDropdown?: boolean) => React.ReactNode;
     getItemLabel: TabsPropGetItemLabel<ITEM>;
     getItemChecked: TabsPropGetItemChecked<ITEM>;
     height: number;
+    size: TabsPropSize;
 } & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
 export declare type TabsMoreItemsComponent = <ITEM>(props: TabsMoreItemsProps<ITEM>) => React.ReactElement | null;
 export declare type RenderItemsListProp = (props: {

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["tabsSizes","tabsDefaultSize","tabsViews","tabsDefaultView","tabsLinePositions","tabsDefaultLinePosition","tabsFitModes","tabsDefaultFitMode"],"sources":["../../../../../src/components/Tabs/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type TabDimensions = {\n  size: number;\n  gap: number;\n};\n\nexport type TabsItemDefault = {\n  label: string | number;\n  icon?: IconComponent;\n};\n\nexport const tabsSizes = ['m', 's', 'xs'] as const;\nexport type TabsPropSize = typeof tabsSizes[number];\nexport const tabsDefaultSize: TabsPropSize = tabsSizes[0];\n\nexport const tabsViews = ['bordered', 'clear'] as const;\nexport type TabsPropView = typeof tabsViews[number];\nexport const tabsDefaultView: TabsPropView = tabsViews[0];\n\nexport const tabsLinePositions = ['bottom', 'top', 'left', 'right'] as const;\nexport type TabsPropLinePosition = typeof tabsLinePositions[number];\nexport const tabsDefaultLinePosition: TabsPropLinePosition = 'bottom';\n\nexport const tabsFitModes = ['scroll', 'dropdown'] as const;\nexport type TabsPropFitMode = typeof tabsFitModes[number];\nexport const tabsDefaultFitMode: TabsPropFitMode = 'dropdown';\n\nexport type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number;\nexport type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\nexport type TabsPropGetItemIcon<ITEM> = (\n  item: ITEM,\n) => IconComponent | undefined;\n\nexport type TabsPropOnChange<ITEM> = (props: {\n  e: React.MouseEvent;\n  value: ITEM;\n}) => void;\n\nexport type RenderItemProps<ITEM> = {\n  item: ITEM;\n  onChange: React.MouseEventHandler;\n  checked: boolean;\n  label: string;\n  icon?: IconComponent;\n  size: TabsPropSize;\n  iconSize?: IconPropSize;\n  onlyIcon?: boolean;\n};\n\nexport type RenderItem<ITEM> = (\n  props: RenderItemProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsFitModeWrapperProps<ITEM> = {\n  items: ITEM[];\n  tabsDimensions: TabDimensions[];\n  getItemLabel: TabsPropGetItemLabel<ITEM>;\n  getItemChecked: TabsPropGetItemChecked<ITEM>;\n  renderItem: (item: ITEM) => React.ReactNode;\n  renderItemsList: RenderItemsListProp;\n  tabRefs: Array<React.RefObject<HTMLElement>>;\n};\n\nexport type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<\n  {\n    size?: TabsPropSize;\n    onlyIcon?: boolean;\n    view?: TabsPropView;\n    iconSize?: IconPropSize;\n    items: ITEM[];\n    value?: ITEM | null;\n    getItemIcon?: TabsPropGetItemIcon<ITEM>;\n    getItemLabel?: TabsPropGetItemLabel<ITEM>;\n    children?: never;\n    onChange: TabsPropOnChange<ITEM>;\n    renderItem?: RenderItem<ITEM>;\n  } & (\n    | {\n        linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;\n        fitMode?: 'dropdown' | 'scroll';\n      }\n    | {\n        linePosition: Extract<TabsPropLinePosition, 'left' | 'right'>;\n        fitMode?: never;\n      }\n  ),\n  HTMLDivElement\n> &\n  (ITEM extends { label: TabsItemDefault['label'] }\n    ? {}\n    : {\n        getItemLabel: TabsPropGetItemLabel<ITEM>;\n      });\n\nexport type TabsComponent = <ITEM>(\n  props: TabsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsTabProps = {\n  size: TabsPropSize;\n  onlyIcon?: boolean;\n  icon?: IconComponent;\n  iconSize?: IconPropSize;\n  label: string;\n  checked: boolean;\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n};\n\nexport type TabsMoreItemsProps<ITEM = TabsItemDefault> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      items: ITEM[];\n      renderItem: (item: ITEM, onClick: () => void) => React.ReactNode;\n      getItemLabel: TabsPropGetItemLabel<ITEM>;\n      getItemChecked: TabsPropGetItemChecked<ITEM>;\n      height: number;\n    } & React.RefAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\nexport type TabsMoreItemsComponent = <ITEM>(\n  props: TabsMoreItemsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type RenderItemsListProp = (props: {\n  withRunningLine?: boolean;\n  getTabClassName?: (idx: number) => string | undefined;\n}) => React.ReactNode;\n\nexport type TabsDirection = 'horizontal' | 'vertical';\n"],"mappings":"AAeA,MAAO,IAAMA,UAAS,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,UAAS,CAAG,CAAC,UAAD,CAAa,OAAb,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAkB,MAAlB,CAA0B,OAA1B,CAA1B,CAEP,MAAO,IAAMC,wBAA6C,CAAG,QAAtD,CAEP,MAAO,IAAMC,aAAY,CAAG,CAAC,QAAD,CAAW,UAAX,CAArB,CAEP,MAAO,IAAMC,mBAAmC,CAAG,UAA5C"}
+{"version":3,"file":"types.js","names":["tabsSizes","tabsDefaultSize","tabsViews","tabsDefaultView","tabsLinePositions","tabsDefaultLinePosition","tabsFitModes","tabsDefaultFitMode"],"sources":["../../../../../src/components/Tabs/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type TabDimensions = {\n  size: number;\n  gap: number;\n};\n\nexport type TabsItemDefault = {\n  label: string | number;\n  leftIcon?: IconComponent;\n  rightIcon?: IconComponent;\n  rightSide?: React.ReactNode;\n  leftSide?: React.ReactNode;\n  disabled?: boolean;\n\n  /**\n   * @deprecated since version 4.11.0 use leftIcon\n   */\n  icon?: IconComponent;\n};\n\nexport const tabsSizes = ['m', 's', 'xs'] as const;\nexport type TabsPropSize = typeof tabsSizes[number];\nexport const tabsDefaultSize: TabsPropSize = tabsSizes[0];\n\nexport const tabsViews = ['bordered', 'clear'] as const;\nexport type TabsPropView = typeof tabsViews[number];\nexport const tabsDefaultView: TabsPropView = tabsViews[0];\n\nexport const tabsLinePositions = ['bottom', 'top', 'left', 'right'] as const;\nexport type TabsPropLinePosition = typeof tabsLinePositions[number];\nexport const tabsDefaultLinePosition: TabsPropLinePosition = 'bottom';\n\nexport const tabsFitModes = ['scroll', 'dropdown'] as const;\nexport type TabsPropFitMode = typeof tabsFitModes[number];\nexport const tabsDefaultFitMode: TabsPropFitMode = 'dropdown';\n\nexport type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number;\nexport type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\nexport type TabsPropGetItemIcon<ITEM> = (\n  item: ITEM,\n) => IconComponent | undefined;\nexport type TabsPropGetItemSide<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type TabsPropOnChange<ITEM> = (props: {\n  e: React.MouseEvent;\n  value: ITEM;\n}) => void;\n\nexport type RenderItemProps<ITEM> = {\n  item: ITEM;\n  onChange: React.MouseEventHandler;\n  checked: boolean;\n  size: TabsPropSize;\n  iconSize?: IconPropSize;\n  onlyIcon?: boolean;\n  label: string;\n  renderInDropdown?: boolean;\n} & Omit<TabsItemDefault, 'label'>;\n\nexport type RenderItem<ITEM> = (\n  props: RenderItemProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsFitModeWrapperProps<ITEM> = {\n  items: ITEM[];\n  tabsDimensions: TabDimensions[];\n  getItemLabel: TabsPropGetItemLabel<ITEM>;\n  getItemChecked: TabsPropGetItemChecked<ITEM>;\n  renderItem: (item: ITEM) => React.ReactNode;\n  renderItemsList: RenderItemsListProp;\n  tabRefs: Array<React.RefObject<HTMLElement>>;\n  size: TabsPropSize;\n};\n\nexport type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<\n  {\n    size?: TabsPropSize;\n    onlyIcon?: boolean;\n    view?: TabsPropView;\n    iconSize?: IconPropSize;\n    items: ITEM[];\n    value?: ITEM | null;\n    getItemLabel?: TabsPropGetItemLabel<ITEM>;\n    getItemLeftIcon?: TabsPropGetItemIcon<ITEM>;\n    getItemRightIcon?: TabsPropGetItemIcon<ITEM>;\n    getItemLeftSide?: TabsPropGetItemSide<ITEM>;\n    getItemRightSide?: TabsPropGetItemSide<ITEM>;\n    getItemDisabled?: TabsPropGetItemDisabled<ITEM>;\n    children?: never;\n    onChange: TabsPropOnChange<ITEM>;\n    renderItem?: RenderItem<ITEM>;\n    disabled?: boolean;\n\n    /**\n     * @deprecated since version 4.11.0 use getItemLeftIcon\n     */\n    getItemIcon?: TabsPropGetItemIcon<ITEM>;\n  } & (\n    | {\n        linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;\n        fitMode?: 'dropdown' | 'scroll';\n      }\n    | {\n        linePosition: Extract<TabsPropLinePosition, 'left' | 'right'>;\n        fitMode?: never;\n      }\n  ),\n  HTMLDivElement\n> &\n  (ITEM extends { label: TabsItemDefault['label'] }\n    ? {}\n    : {\n        getItemLabel: TabsPropGetItemLabel<ITEM>;\n      });\n\nexport type TabsComponent = <ITEM>(\n  props: TabsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type TabsTabProps = {\n  onChange: React.MouseEventHandler;\n  checked: boolean;\n  size: TabsPropSize;\n  iconSize?: IconPropSize;\n  onlyIcon?: boolean;\n  className?: string;\n  label: string;\n  renderInDropdown?: boolean;\n} & Omit<TabsItemDefault, 'label'>;\n\nexport type TabsMoreItemsProps<ITEM = TabsItemDefault> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      items: ITEM[];\n      renderItem: (\n        item: ITEM,\n        onClick: () => void,\n        renderInDropdown?: boolean,\n      ) => React.ReactNode;\n      getItemLabel: TabsPropGetItemLabel<ITEM>;\n      getItemChecked: TabsPropGetItemChecked<ITEM>;\n      height: number;\n      size: TabsPropSize;\n    } & React.RefAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n\nexport type TabsMoreItemsComponent = <ITEM>(\n  props: TabsMoreItemsProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type RenderItemsListProp = (props: {\n  withRunningLine?: boolean;\n  getTabClassName?: (idx: number) => string | undefined;\n}) => React.ReactNode;\n\nexport type TabsDirection = 'horizontal' | 'vertical';\n"],"mappings":"AAwBA,MAAO,IAAMA,UAAS,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,UAAS,CAAG,CAAC,UAAD,CAAa,OAAb,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAkB,MAAlB,CAA0B,OAA1B,CAA1B,CAEP,MAAO,IAAMC,wBAA6C,CAAG,QAAtD,CAEP,MAAO,IAAMC,aAAY,CAAG,CAAC,QAAD,CAAW,UAAX,CAArB,CAEP,MAAO,IAAMC,mBAAmC,CAAG,UAA5C"}

package/__internal__/src/components/TagBase/TagBase.css

@@ -1 +1 @@
-.TagBase{--tag-base-typo-color:var(--color-control-typo-ghost);--tag-base-half-space:calc(var(--tag-base-spaсe)/2);background:var(--tag-base-bg-color);border:none;border-radius:var(--control-radius);box-shadow:inset 0 0 0 1px var(--tag-base-border-color);color:var(--tag-base-typo-color);display:inline-flex;font-family:var(--font--primary);font-size:var(--tag-base-font-size);height:var(--tag-base-height);line-height:var(--tag-base-height);overflow:hidden;padding-bottom:0;padding-left:var(--tag-base-spaсe);padding-right:var(--tag-base-spaсe);padding-top:0;position:relative;text-decoration:none;transition:box-shadow .15s ease,background .15s ease,color .15s ease}.TagBase:focus,.TagBase:focus:hover{outline:none}.TagBase_view_stroked{--tag-base-border-color:var(--color-control-bg-border-default);--tag-base-bg-color:var(--color-bg-default)}.TagBase_view_filled{--tag-base-border-color:transparent;--tag-base-bg-color:var(--color-control-bg-ghost)}.TagBase_withAction{cursor:pointer}.TagBase_withAction.TagBase_view_stroked:hover{--tag-base-border-color:var(--color-control-bg-border-default-hover)}.TagBase_withAction.TagBase_view_filled:hover{--tag-base-bg-color:var(--color-control-bg-ghost-hover);--tag-base-border-color:transparent}.TagBase_size_xs{--tag-base-height:var(--space-l);--tag-base-spaсe:var(--space-2xs);--tag-base-font-size:var(--size-text-xs)}.TagBase_size_s{--tag-base-height:var(--space-xl);--tag-base-spaсe:var(--space-xs);--tag-base-font-size:var(--size-text-xs)}.TagBase_size_m{--tag-base-height:calc(var(--space-2xl) - var(--space-2xs));--tag-base-spaсe:var(--space-xs);--tag-base-font-size:var(--size-text-s)}.TagBase_size_l{--tag-base-height:var(--space-2xl);--tag-base-spaсe:var(--space-s);--tag-base-font-size:var(--size-text-m)}.TagBase_withCancel{padding-right:0}.TagBase_withIcon{padding-left:0}.TagBase[class*=TagBase_group]:before{background:var(--tag-base-group-color);content:"";height:100%;left:0;position:absolute;top:0;width:2px}.TagBase_group_1{--tag-base-group-color:#e92064}.TagBase_group_2{--tag-base-group-color:#b92eff}.TagBase_group_3{--tag-base-group-color:#1160ff}.TagBase_group_4{--tag-base-group-color:#0fafff}.TagBase_group_5{--tag-base-group-color:#02e2ff}.TagBase_group_6{--tag-base-group-color:#0c6}.TagBase_group_7{--tag-base-group-color:#b4d50b}.TagBase_group_8{--tag-base-group-color:#f5b800}.TagBase_group_9{--tag-base-group-color:#f56600}.TagBase-CancelButton{align-items:center;background:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;height:var(--tag-base-height);opacity:.4;outline:none;padding:0 var(--tag-base-half-space) 0 var(--tag-base-half-space);transition:opacity .15s ease}.TagBase-CancelButton:hover{background:transparent;opacity:1;outline:none}.TagBase-Label{height:var(--tag-base-height);line-height:var(--tag-base-height)}.TagBase-IconWrapper{align-items:center;display:inline-flex;height:var(--tag-base-height);padding:0 var(--tag-base-half-space) 0 var(--tag-base-half-space)}
+.TagBase{--tag-base-typo-color:var(--color-control-typo-ghost);--tag-base-half-space:calc(var(--tag-base-spaсe)/2);background:var(--tag-base-bg-color);border:none;border-radius:var(--control-radius);box-shadow:inset 0 0 0 1px var(--tag-base-border-color);color:var(--tag-base-typo-color);display:inline-flex;font-family:var(--font--primary);font-size:var(--tag-base-font-size);height:var(--tag-base-height);line-height:var(--tag-base-height);overflow:hidden;padding-bottom:0;padding-left:var(--tag-base-spaсe);padding-right:var(--tag-base-spaсe);padding-top:0;position:relative;text-decoration:none;transition:box-shadow .15s ease,background .15s ease,color .15s ease}.TagBase:focus,.TagBase:focus:hover{outline:none}.TagBase_view_stroked{--tag-base-border-color:var(--color-control-bg-border-default);--tag-base-bg-color:var(--color-bg-default)}.TagBase_view_filled{--tag-base-border-color:transparent;--tag-base-bg-color:var(--color-control-bg-ghost)}.TagBase_withAction{cursor:pointer}.TagBase_withAction.TagBase_view_stroked:hover{--tag-base-border-color:var(--color-control-bg-border-default-hover)}.TagBase_withAction.TagBase_view_filled:hover{--tag-base-bg-color:var(--color-control-bg-ghost-hover);--tag-base-border-color:transparent}.TagBase_size_xs{--tag-base-height:calc(var(--space-m) + var(--space-3xs));--tag-base-spaсe:var(--space-2xs);--tag-base-font-size:var(--size-text-2xs)}.TagBase_size_s{--tag-base-height:var(--space-xl);--tag-base-spaсe:var(--space-xs);--tag-base-font-size:var(--size-text-xs)}.TagBase_size_m{--tag-base-height:calc(var(--space-2xl) - var(--space-2xs));--tag-base-spaсe:var(--space-xs);--tag-base-font-size:var(--size-text-s)}.TagBase_size_l{--tag-base-height:var(--space-2xl);--tag-base-spaсe:var(--space-s);--tag-base-font-size:var(--size-text-m)}.TagBase_withCancel{padding-right:0}.TagBase_withIcon{padding-left:0}.TagBase[class*=TagBase_group]:before{background:var(--tag-base-group-color);content:"";height:100%;left:0;position:absolute;top:0;width:2px}.TagBase_group_1{--tag-base-group-color:#e92064}.TagBase_group_2{--tag-base-group-color:#b92eff}.TagBase_group_3{--tag-base-group-color:#1160ff}.TagBase_group_4{--tag-base-group-color:#0fafff}.TagBase_group_5{--tag-base-group-color:#02e2ff}.TagBase_group_6{--tag-base-group-color:#0c6}.TagBase_group_7{--tag-base-group-color:#b4d50b}.TagBase_group_8{--tag-base-group-color:#f5b800}.TagBase_group_9{--tag-base-group-color:#f56600}.TagBase-CancelButton{align-items:center;background:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;height:var(--tag-base-height);opacity:.4;outline:none;padding:0 var(--tag-base-half-space) 0 var(--tag-base-half-space);transition:opacity .15s ease}.TagBase-CancelButton:hover{background:transparent;opacity:1;outline:none}.TagBase-Label{height:var(--tag-base-height);line-height:var(--tag-base-height)}.TagBase-IconWrapper{align-items:center;display:inline-flex;height:var(--tag-base-height);padding:0 var(--tag-base-half-space) 0 var(--tag-base-half-space)}

package/__internal__/src/hooks/useForkRef/useForkRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForkRef.js","names":["useMemo","setRef","useForkRef","refs","length","refValue","ref"],"sources":["../../../../../src/hooks/useForkRef/useForkRef.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { setRef } from '../../utils/setRef';\n\nexport function useForkRef<T>(\n  refs: (React.Ref<T> | undefined)[],\n): React.RefCallback<T> | null {\n  return useMemo(() => {\n    if (refs.length < 1) {\n      return null;\n    }\n    return (refValue) => {\n      for (const ref of refs) {\n        setRef(ref as React.MutableRefObject<T>, refValue);\n      }\n    };\n  }, [refs]);\n}\n"],"mappings":"qpCAAA,OAASA,OAAT,KAAwB,OAAxB,CAEA,OAASC,MAAT,0BAEA,MAAO,SAASC,WAAT,CACLC,CADK,CAEwB,CAC7B,MAAOH,QAAO,CAAC,UAAM,OACD,EAAd,CAAAG,CAAI,CAACC,MADU,CAEV,IAFU,CAIZ,SAACC,CAAD,CAAc,oCACDF,CADC,MACnB,2BAAwB,IAAbG,EAAa,SACtBL,MAAM,CAACK,CAAD,CAAmCD,CAAnC,CACP,CAHkB,+BAIpB,CACF,CATa,CASX,CAACF,CAAD,CATW,CAUf"}
+{"version":3,"file":"useForkRef.js","names":["useMemo","setRef","useForkRef","refs","length","refValue","ref"],"sources":["../../../../../src/hooks/useForkRef/useForkRef.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { setRef } from '##/utils/setRef';\n\nexport function useForkRef<T>(\n  refs: (React.Ref<T> | undefined)[],\n): React.RefCallback<T> | null {\n  return useMemo(() => {\n    if (refs.length < 1) {\n      return null;\n    }\n    return (refValue) => {\n      for (const ref of refs) {\n        setRef(ref as React.MutableRefObject<T>, refValue);\n      }\n    };\n  }, [refs]);\n}\n"],"mappings":"qpCAAA,OAASA,OAAT,KAAwB,OAAxB,CAEA,OAASC,MAAT,0BAEA,MAAO,SAASC,WAAT,CACLC,CADK,CAEwB,CAC7B,MAAOH,QAAO,CAAC,UAAM,OACD,EAAd,CAAAG,CAAI,CAACC,MADU,CAEV,IAFU,CAIZ,SAACC,CAAD,CAAc,oCACDF,CADC,MACnB,2BAAwB,IAAbG,EAAa,SACtBL,MAAM,CAACK,CAAD,CAAmCD,CAAnC,CACP,CAHkB,+BAIpB,CACF,CATa,CASX,CAACF,CAAD,CATW,CAUf"}

package/__internal__/src/hooks/useRefs/useRefs.js

@@ -1,2 +1,2 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{createRef,useMemo}from"react";var isNotNumber=function(a){return"number"!=typeof a};export var useRefs=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:[];return useMemo(function(){if(isNotNumber(a)){for(var b,c={},d=0;d<a.length;d++)b=a[d],c[b]=createRef();return c}return Array(a).fill(null).map(function(){return createRef()})},["number"==typeof a?a:a.join("-")].concat(_toConsumableArray(b)))};
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{createRef,useMemo}from"react";var isNotNumber=function(a){return"number"!=typeof a};export var useRefs=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:[];return useMemo(function(){if(isNotNumber(a)){for(var b={},c=0;c<a.length;c++)b[a[c]]=createRef();return b}return Array(a).fill(null).map(function(){return createRef()})},["number"==typeof a?a:a.join("-")].concat(_toConsumableArray(b)))};
 //# sourceMappingURL=useRefs.js.map

package/__internal__/src/hooks/useRefs/useRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRefs.js","names":["createRef","useMemo","isNotNumber","value","useRefs","elements","deps","key","obj","index","length","Array","fill","map","join"],"sources":["../../../../../src/hooks/useRefs/useRefs.ts"],"sourcesContent":["import { createRef, useMemo } from 'react';\n\nconst isNotNumber = <T>(value: T): value is Exclude<T, number> =>\n  typeof value !== 'number';\n\ntype Return<T, E extends number | string[]> = E extends string[]\n  ? Record<E[number], React.RefObject<T>>\n  : Array<React.RefObject<T>>;\n\nexport const useRefs = <T, E extends number | string[] = number>(\n  elements: E,\n  deps: unknown[] = [],\n): Return<T, E> =>\n  useMemo(() => {\n    if (isNotNumber(elements)) {\n      const obj: Record<string, React.RefObject<T>> = {};\n      for (let index = 0; index < elements.length; index++) {\n        const key = elements[index];\n        obj[key] = createRef<T>();\n      }\n\n      return obj as Return<T, E>;\n    }\n\n    return new Array(elements as number)\n      .fill(null)\n      .map(() => createRef<T>()) as unknown as Return<T, E>;\n  }, [typeof elements === 'number' ? elements : elements.join('-'), ...deps]);\n"],"mappings":"yEAAA,OAASA,SAAT,CAAoBC,OAApB,KAAmC,OAAnC,CAEA,GAAMC,YAAW,CAAG,SAAIC,CAAJ,QACD,QAAjB,QAAOA,EADW,CAApB,CAOA,MAAO,IAAMC,QAAO,CAAG,SACrBC,CADqB,KAErBC,EAFqB,wDAEH,EAFG,OAIrBL,QAAO,CAAC,UAAM,CACZ,GAAIC,WAAW,CAACG,CAAD,CAAf,CAA2B,CAEzB,OACQE,EADR,CADMC,CAAuC,CAAG,EAChD,CAASC,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGJ,CAAQ,CAACK,MAArC,CAA6CD,CAAK,EAAlD,CACQF,CADR,CACcF,CAAQ,CAACI,CAAD,CADtB,CAEED,CAAG,CAACD,CAAD,CAAH,CAAWP,SAAS,EAFtB,CAKA,MAAOQ,EACR,CAED,MAAWG,MAAJ,CAAUN,CAAV,EACJO,IADI,CACC,IADD,EAEJC,GAFI,CAEA,iBAAMb,UAAS,EAAf,CAFA,CAGR,CAdM,EAciB,QAApB,QAAOK,EAAP,CAA+BA,CAA/B,CAA0CA,CAAQ,CAACS,IAAT,CAAc,GAAd,CAdvC,4BAc8DR,CAd9D,GAJc,CAAhB"}
+{"version":3,"file":"useRefs.js","names":["createRef","useMemo","isNotNumber","value","useRefs","elements","deps","obj","index","length","Array","fill","map","join"],"sources":["../../../../../src/hooks/useRefs/useRefs.ts"],"sourcesContent":["import { createRef, useMemo } from 'react';\n\nconst isNotNumber = <T>(value: T): value is Exclude<T, number> =>\n  typeof value !== 'number';\n\ntype Return<T, E extends number | string[]> = E extends string[]\n  ? Record<E[number], React.RefObject<T>>\n  : Array<React.RefObject<T>>;\n\nexport const useRefs = <T, E extends number | string[] = number>(\n  elements: E,\n  deps: unknown[] = [],\n): Return<T, E> =>\n  useMemo(() => {\n    if (isNotNumber(elements)) {\n      const obj: Record<string, React.RefObject<T>> = {};\n      for (let index = 0; index < elements.length; index++) {\n        obj[elements[index]] = createRef<T>();\n      }\n\n      return obj as Return<T, E>;\n    }\n\n    return new Array(elements as number)\n      .fill(null)\n      .map(() => createRef<T>()) as unknown as Return<T, E>;\n  }, [typeof elements === 'number' ? elements : elements.join('-'), ...deps]);\n"],"mappings":"yEAAA,OAASA,SAAT,CAAoBC,OAApB,KAAmC,OAAnC,CAEA,GAAMC,YAAW,CAAG,SAAIC,CAAJ,QACD,QAAjB,QAAOA,EADW,CAApB,CAOA,MAAO,IAAMC,QAAO,CAAG,SACrBC,CADqB,KAErBC,EAFqB,wDAEH,EAFG,OAIrBL,QAAO,CAAC,UAAM,CACZ,GAAIC,WAAW,CAACG,CAAD,CAAf,CAA2B,CAEzB,OADME,EAAuC,CAAG,EAChD,CAASC,CAAK,CAAG,CAAjB,CAAoBA,CAAK,CAAGH,CAAQ,CAACI,MAArC,CAA6CD,CAAK,EAAlD,CACED,CAAG,CAACF,CAAQ,CAACG,CAAD,CAAT,CAAH,CAAuBR,SAAS,EAAhC,CAGF,MAAOO,EACR,CAED,MAAWG,MAAJ,CAAUL,CAAV,EACJM,IADI,CACC,IADD,EAEJC,GAFI,CAEA,iBAAMZ,UAAS,EAAf,CAFA,CAGR,CAbM,EAaiB,QAApB,QAAOK,EAAP,CAA+BA,CAA/B,CAA0CA,CAAQ,CAACQ,IAAT,CAAc,GAAd,CAbvC,4BAa8DP,CAb9D,GAJc,CAAhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "keywords": [
     "ui-kit",
     "design-system",