@consta/uikit 4.28.0 → 4.29.0

package/__internal__/src/components/ListCanary/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/ListCanary/index.ts"],"sourcesContent":["export * from './ListCanary';\nexport * from './types';\nexport * from './ListAddItem';\nexport * from './ListItem';\nexport * from './ListLoader';\nexport * from './ListGroupLabel';\nexport * from './ListItemGrid';\nexport * from './ListBox';\nexport * from './ListDivider';\nexport * from './maps';\n"],"mappings":"AAAA,0BACA,qBACA,2BACA,wBACA,0BACA,8BACA,4BACA,uBACA,2BACA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/ListCanary/index.ts"],"sourcesContent":["export * from './ListCanary';\nexport * from './types';\nexport * from './ListAddItem';\nexport * from './ListItem';\nexport * from './ListLoader';\nexport * from './ListGroupLabel';\nexport * from './ListItemGrid';\nexport * from './ListBox';\nexport * from './ListDivider';\nexport * from './maps';\nexport * from './renderHeader';\n"],"mappings":"AAAA,0BACA,qBACA,2BACA,wBACA,0BACA,8BACA,4BACA,uBACA,2BACA,oBACA"}

package/__internal__/src/components/ListCanary/renderHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MixSpaceProps } from "../../mixs/MixSpace";
+import { ListPropSize } from './types';
+export declare const renderHeader: (label: string | undefined, first: boolean, size: ListPropSize, rightSide: React.ReactNode, labelSpace: MixSpaceProps | undefined, dividerSpase: MixSpaceProps | undefined, className: string | undefined) => React.ReactNode | null;

package/__internal__/src/components/ListCanary/renderHeader.js

@@ -0,0 +1,2 @@
+import React from"react";import{ListDivider}from"./ListDivider";import{ListGroupLabel}from"./ListGroupLabel";export var renderHeader=function(a,b,c,d,e,f,g){return a?React.createElement(ListGroupLabel,{size:c,label:a,rightSide:d,space:e,className:g}):a||b?null:React.createElement(ListDivider,{size:c,space:f,className:g})};
+//# sourceMappingURL=renderHeader.js.map

package/__internal__/src/components/ListCanary/renderHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderHeader.js","names":["React","ListDivider","ListGroupLabel","renderHeader","label","first","size","rightSide","labelSpace","dividerSpase","className"],"sources":["../../../../../src/components/ListCanary/renderHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { MixSpaceProps } from '##/mixs/MixSpace';\n\nimport { ListDivider } from './ListDivider';\nimport { ListGroupLabel } from './ListGroupLabel';\nimport { ListPropSize } from './types';\n\nexport const renderHeader = (\n  label: string | undefined,\n  first: boolean,\n  size: ListPropSize,\n  rightSide: React.ReactNode,\n  labelSpace: MixSpaceProps | undefined,\n  dividerSpase: MixSpaceProps | undefined,\n  className: string | undefined,\n): React.ReactNode | null => {\n  if (label) {\n    return (\n      <ListGroupLabel\n        size={size}\n        label={label}\n        rightSide={rightSide}\n        space={labelSpace}\n        className={className}\n      />\n    );\n  }\n\n  if (!label && !first) {\n    return (\n      <ListDivider size={size} space={dividerSpase} className={className} />\n    );\n  }\n\n  return null;\n};\n"],"mappings":"AAAA,MAAOA,MAAP,KAAkB,OAAlB,CAIA,OAASC,WAAT,qBACA,OAASC,cAAT,wBAGA,MAAO,IAAMC,aAAY,CAAG,SAC1BC,CAD0B,CAE1BC,CAF0B,CAG1BC,CAH0B,CAI1BC,CAJ0B,CAK1BC,CAL0B,CAM1BC,CAN0B,CAO1BC,CAP0B,CAQC,OACvBN,EADuB,CAGvB,oBAAC,cAAD,EACE,IAAI,CAAEE,CADR,CAEE,KAAK,CAAEF,CAFT,CAGE,SAAS,CAAEG,CAHb,CAIE,KAAK,CAAEC,CAJT,CAKE,SAAS,CAAEE,CALb,EAHuB,CAatBN,CAAD,EAAWC,CAbY,CAmBpB,IAnBoB,CAevB,oBAAC,WAAD,EAAa,IAAI,CAAEC,CAAnB,CAAyB,KAAK,CAAEG,CAAhC,CAA8C,SAAS,CAAEC,CAAzD,EAKL,CA5BM"}

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

@@ -2,6 +2,7 @@ import { IconComponent, IconPropSize } from '@consta/icons/Icon';
 import React from 'react';
 import { MixSpaceProps } from "../../mixs/MixSpace";
 import { Group } from "../../utils/getGroups";
+import { AsAttributes, AsTags } from "../../utils/types/AsTags";
 import { PropsWithAsAttributes } from "../../utils/types/PropsWithAsAttributes";
 import { PropsWithHTMLAttributesAndRef } from "../../utils/types/PropsWithHTMLAttributes";
 export declare const listPropSize: readonly ["m", "xs", "s", "l"];
@@ -49,8 +50,8 @@ export declare type ListPropGetItemLeftSide<ITEM> = (item: ITEM) => React.ReactN
 export declare type ListPropGetItemLeftIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
 export declare type ListPropGetItemRightSide<ITEM> = (item: ITEM) => React.ReactNode | undefined;
 export declare type ListPropGetItemRightIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
-export declare type ListPropGetItemAs<ITEM> = (item: ITEM) => keyof JSX.IntrinsicElements | undefined;
-export declare type ListPropGetItemAttributes<ITEM> = (item: ITEM) => JSX.IntrinsicElements[keyof JSX.IntrinsicElements] | undefined;
+export declare type ListPropGetItemAs<ITEM> = (item: ITEM) => AsTags | undefined;
+export declare type ListPropGetItemAttributes<ITEM> = (item: ITEM) => AsAttributes | undefined;
 export declare type ListPropGetItemOnClick<ITEM> = (item: ITEM) => React.MouseEventHandler | undefined;
 export declare type ListPropSortGroup<ITEM, GROUP> = (a: Group<ITEM, GROUP>, b: Group<ITEM, GROUP>) => number;
 export declare type ListPropGetGroupKey<GROUP> = (item: GROUP) => string | number;
@@ -99,13 +100,13 @@ export declare type ListProps<ITEM = DefaultListItem, GROUP = DefaultListGroup>
     getGroupKey: ListPropGetGroupKey<GROUP>;
 });
 export declare type ListComponent = <ITEM = DefaultListItem, GROUP = DefaultListGroup>(props: ListProps<ITEM, GROUP>) => React.ReactElement | null;
-export declare type ListItemProps<AS extends keyof JSX.IntrinsicElements = 'div'> = PropsWithAsAttributes<Omit<DefaultListItem, 'id' | 'groupId' | 'attributes' | 'onClick'> & {
+export declare type ListItemProps<AS extends AsTags = 'div'> = PropsWithAsAttributes<Omit<DefaultListItem, 'id' | 'groupId' | 'attributes' | 'onClick'> & {
     size?: ListPropSize;
     innerOffset?: 'normal' | 'increased';
     space?: MixSpaceProps;
     iconSize?: IconPropSize;
 }, AS>;
-export declare type ListItemComponent = <AS extends keyof JSX.IntrinsicElements = 'div'>(props: ListItemProps<AS>) => React.ReactElement | null;
+export declare type ListItemComponent = <AS extends AsTags = 'div'>(props: ListItemProps<AS>) => React.ReactElement | null;
 export declare type ListGroupLabelProps = PropsWithHTMLAttributesAndRef<{
     size?: ListPropSize;
     label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["listPropSize","defaultListPropSize","listPropInnerOffset","defaultListPropInnerOffset","listPropStatus","listPropForm","defaultListPropForm"],"sources":["../../../../../src/components/ListCanary/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { MixSpaceProps } from '##/mixs/MixSpace';\nimport { Group } from '##/utils/getGroups';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const listPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type ListPropSize = typeof listPropSize[number];\nexport const defaultListPropSize = listPropSize[0];\n\nexport const listPropInnerOffset = ['normal', 'increased'] as const;\nexport type ListPropInnerOffset = typeof listPropInnerOffset[number];\nexport const defaultListPropInnerOffset = listPropInnerOffset[0];\n\nexport const listPropStatus = ['alert', 'success', 'warning'] as const;\nexport type ListPropStatus = typeof listPropStatus[number];\n\nexport const listPropForm = ['default', 'brick', 'round'] as const;\nexport type ListPropForm = typeof listPropForm[number];\nexport const defaultListPropForm = listPropForm[0];\n\nexport type DefaultListGroup = {\n  id: string | number;\n  label?: string;\n  rightSide?: React.ReactNode;\n};\n\nexport type DefaultListItem = {\n  label: React.ReactNode;\n  disabled?: boolean;\n  active?: boolean;\n  checked?: boolean;\n  status?: ListPropStatus;\n  groupId?: string | number;\n  leftSide?: React.ReactNode;\n  leftIcon?: IconComponent;\n  rightSide?: React.ReactNode;\n  rightIcon?: IconComponent;\n  onClick?: React.MouseEventHandler;\n};\n\nexport type ListPropOnItemClick<ITEM> = (\n  item: ITEM,\n  params: {\n    e: React.MouseEvent;\n    item: ITEM;\n  },\n) => void;\n\nexport type ListPropRenderItem<ITEM> = (\n  item: ITEM,\n) => React.ReactElement | null;\n\n// ITEMS\n\nexport type ListPropGetItemLabel<ITEM> = (item: ITEM) => React.ReactNode;\n\nexport type ListPropGetItemAdditionalClassName<ITEM> = (item: ITEM) => string;\n\nexport type ListPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemActive<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemStatus<ITEM> = (\n  item: ITEM,\n) => ListPropStatus | undefined;\n\nexport type ListPropGetItemGroupId<ITEM> = (\n  item: ITEM,\n) => string | number | undefined;\n\nexport type ListPropGetItemLeftSide<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemLeftIcon<ITEM> = (\n  item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemRightSide<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRightIcon<ITEM> = (\n  item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemAs<ITEM> = (\n  item: ITEM,\n) => keyof JSX.IntrinsicElements | undefined;\n\nexport type ListPropGetItemAttributes<ITEM> = (\n  item: ITEM,\n) => JSX.IntrinsicElements[keyof JSX.IntrinsicElements] | undefined;\n\nexport type ListPropGetItemOnClick<ITEM> = (\n  item: ITEM,\n) => React.MouseEventHandler | undefined;\n\nexport type ListPropSortGroup<ITEM, GROUP> = (\n  a: Group<ITEM, GROUP>,\n  b: Group<ITEM, GROUP>,\n) => number;\n\n// GROUPS\nexport type ListPropGetGroupKey<GROUP> = (item: GROUP) => string | number;\nexport type ListPropGetGroupAdditionalClassName<GROUP> = (\n  item: GROUP,\n) => string;\n\nexport type ListPropGetGroupLabel<GROUP> = (item: GROUP) => string | undefined;\nexport type ListPropGetGroupRightSide<GROUP> = (\n  item: GROUP,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRef<ITEM> = (\n  item: ITEM,\n) => React.RefObject<HTMLElement> | undefined;\n\nexport type ListProps<ITEM = DefaultListItem, GROUP = DefaultListGroup> = {\n  size?: ListPropSize;\n  items: ITEM[];\n  innerOffset?: ListPropInnerOffset;\n  itemSpase?: MixSpaceProps;\n  groupLabelSpase?: MixSpaceProps;\n  dividerSpase?: MixSpaceProps;\n  onItemClick?: ListPropOnItemClick<ITEM>;\n  getItemLabel?: ListPropGetItemLabel<ITEM>;\n  getItemDisabled?: ListPropGetItemDisabled<ITEM>;\n  getItemActive?: ListPropGetItemActive<ITEM>;\n  getItemChecked?: ListPropGetItemActive<ITEM>;\n  getItemLeftSide?: ListPropGetItemLeftSide<ITEM>;\n  getItemLeftIcon?: ListPropGetItemLeftIcon<ITEM>;\n  getItemRightSide?: ListPropGetItemRightSide<ITEM>;\n  getItemRightIcon?: ListPropGetItemRightIcon<ITEM>;\n  getItemGroupKey?: ListPropGetItemGroupId<ITEM>;\n  getItemOnClick?: ListPropGetItemOnClick<ITEM>;\n  getItemStatus?: ListPropGetItemStatus<ITEM>;\n  getItemAs?: ListPropGetItemAs<ITEM>;\n  getItemAttributes?: ListPropGetItemAttributes<ITEM>;\n  getItemRef?: ListPropGetItemRef<ITEM>;\n  getItemAdditionalClassName?: ListPropGetItemAdditionalClassName<ITEM>;\n  renderItem?: ListPropRenderItem<ITEM>;\n  groups?: GROUP[];\n  getGroupKey?: ListPropGetGroupKey<GROUP>;\n  getGroupLabel?: ListPropGetGroupLabel<GROUP>;\n  getGroupRightSide?: ListPropGetGroupRightSide<GROUP>;\n  sortGroup?: ListPropSortGroup<ITEM, GROUP>;\n  getGroupAdditionalClassName?: ListPropGetGroupAdditionalClassName<GROUP>;\n  disabled?: boolean;\n} & (ITEM extends { label: DefaultListItem['label'] }\n  ? {}\n  : { getItemLabel: ListPropGetItemLabel<ITEM> }) &\n  (GROUP extends { id: DefaultListGroup['id'] }\n    ? {}\n    : { getGroupKey: ListPropGetGroupKey<GROUP> });\n\nexport type ListComponent = <ITEM = DefaultListItem, GROUP = DefaultListGroup>(\n  props: ListProps<ITEM, GROUP>,\n) => React.ReactElement | null;\n\nexport type ListItemProps<AS extends keyof JSX.IntrinsicElements = 'div'> =\n  PropsWithAsAttributes<\n    Omit<DefaultListItem, 'id' | 'groupId' | 'attributes' | 'onClick'> & {\n      size?: ListPropSize;\n      innerOffset?: 'normal' | 'increased';\n      space?: MixSpaceProps;\n      iconSize?: IconPropSize;\n    },\n    AS\n  >;\n\nexport type ListItemComponent = <\n  AS extends keyof JSX.IntrinsicElements = 'div',\n>(\n  props: ListItemProps<AS>,\n) => React.ReactElement | null;\n\nexport type ListGroupLabelProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    label: string;\n    innerOffset?: ListPropInnerOffset;\n    rightSide?: React.ReactNode;\n    space?: MixSpaceProps;\n  },\n  HTMLDivElement\n>;\n\nexport type ListDividerProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    innerOffset?: ListPropInnerOffset;\n    space?: MixSpaceProps;\n  },\n  HTMLDivElement\n>;\n\nexport type ListBoxProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    form?: ListPropForm;\n    border?: boolean;\n    shadow?: boolean;\n  },\n  HTMLDivElement\n>;\n\nexport type ListAddItemProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    label: React.ReactNode;\n    innerOffset?: ListPropInnerOffset;\n    active?: boolean;\n    underLine?: boolean;\n  },\n  HTMLDivElement\n>;\n"],"mappings":"AAQA,MAAO,IAAMA,aAAY,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAArB,CAEP,MAAO,IAAMC,oBAAmB,CAAGD,YAAY,CAAC,CAAD,CAAxC,CAEP,MAAO,IAAME,oBAAmB,CAAG,CAAC,QAAD,CAAW,WAAX,CAA5B,CAEP,MAAO,IAAMC,2BAA0B,CAAGD,mBAAmB,CAAC,CAAD,CAAtD,CAEP,MAAO,IAAME,eAAc,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAvB,CAGP,MAAO,IAAMC,aAAY,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAqB,OAArB,CAArB,CAEP,MAAO,IAAMC,oBAAmB,CAAGD,YAAY,CAAC,CAAD,CAAxC"}
+{"version":3,"file":"types.js","names":["listPropSize","defaultListPropSize","listPropInnerOffset","defaultListPropInnerOffset","listPropStatus","listPropForm","defaultListPropForm"],"sources":["../../../../../src/components/ListCanary/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { MixSpaceProps } from '##/mixs/MixSpace';\nimport { Group } from '##/utils/getGroups';\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const listPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type ListPropSize = typeof listPropSize[number];\nexport const defaultListPropSize = listPropSize[0];\n\nexport const listPropInnerOffset = ['normal', 'increased'] as const;\nexport type ListPropInnerOffset = typeof listPropInnerOffset[number];\nexport const defaultListPropInnerOffset = listPropInnerOffset[0];\n\nexport const listPropStatus = ['alert', 'success', 'warning'] as const;\nexport type ListPropStatus = typeof listPropStatus[number];\n\nexport const listPropForm = ['default', 'brick', 'round'] as const;\nexport type ListPropForm = typeof listPropForm[number];\nexport const defaultListPropForm = listPropForm[0];\n\nexport type DefaultListGroup = {\n  id: string | number;\n  label?: string;\n  rightSide?: React.ReactNode;\n};\n\nexport type DefaultListItem = {\n  label: React.ReactNode;\n  disabled?: boolean;\n  active?: boolean;\n  checked?: boolean;\n  status?: ListPropStatus;\n  groupId?: string | number;\n  leftSide?: React.ReactNode;\n  leftIcon?: IconComponent;\n  rightSide?: React.ReactNode;\n  rightIcon?: IconComponent;\n  onClick?: React.MouseEventHandler;\n};\n\nexport type ListPropOnItemClick<ITEM> = (\n  item: ITEM,\n  params: {\n    e: React.MouseEvent;\n    item: ITEM;\n  },\n) => void;\n\nexport type ListPropRenderItem<ITEM> = (\n  item: ITEM,\n) => React.ReactElement | null;\n\n// ITEMS\n\nexport type ListPropGetItemLabel<ITEM> = (item: ITEM) => React.ReactNode;\n\nexport type ListPropGetItemAdditionalClassName<ITEM> = (item: ITEM) => string;\n\nexport type ListPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemActive<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type ListPropGetItemStatus<ITEM> = (\n  item: ITEM,\n) => ListPropStatus | undefined;\n\nexport type ListPropGetItemGroupId<ITEM> = (\n  item: ITEM,\n) => string | number | undefined;\n\nexport type ListPropGetItemLeftSide<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemLeftIcon<ITEM> = (\n  item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemRightSide<ITEM> = (\n  item: ITEM,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRightIcon<ITEM> = (\n  item: ITEM,\n) => IconComponent | undefined;\n\nexport type ListPropGetItemAs<ITEM> = (item: ITEM) => AsTags | undefined;\n\nexport type ListPropGetItemAttributes<ITEM> = (\n  item: ITEM,\n) => AsAttributes | undefined;\n\nexport type ListPropGetItemOnClick<ITEM> = (\n  item: ITEM,\n) => React.MouseEventHandler | undefined;\n\nexport type ListPropSortGroup<ITEM, GROUP> = (\n  a: Group<ITEM, GROUP>,\n  b: Group<ITEM, GROUP>,\n) => number;\n\n// GROUPS\nexport type ListPropGetGroupKey<GROUP> = (item: GROUP) => string | number;\nexport type ListPropGetGroupAdditionalClassName<GROUP> = (\n  item: GROUP,\n) => string;\n\nexport type ListPropGetGroupLabel<GROUP> = (item: GROUP) => string | undefined;\nexport type ListPropGetGroupRightSide<GROUP> = (\n  item: GROUP,\n) => React.ReactNode | undefined;\n\nexport type ListPropGetItemRef<ITEM> = (\n  item: ITEM,\n) => React.RefObject<HTMLElement> | undefined;\n\nexport type ListProps<ITEM = DefaultListItem, GROUP = DefaultListGroup> = {\n  size?: ListPropSize;\n  items: ITEM[];\n  innerOffset?: ListPropInnerOffset;\n  itemSpase?: MixSpaceProps;\n  groupLabelSpase?: MixSpaceProps;\n  dividerSpase?: MixSpaceProps;\n  onItemClick?: ListPropOnItemClick<ITEM>;\n  getItemLabel?: ListPropGetItemLabel<ITEM>;\n  getItemDisabled?: ListPropGetItemDisabled<ITEM>;\n  getItemActive?: ListPropGetItemActive<ITEM>;\n  getItemChecked?: ListPropGetItemActive<ITEM>;\n  getItemLeftSide?: ListPropGetItemLeftSide<ITEM>;\n  getItemLeftIcon?: ListPropGetItemLeftIcon<ITEM>;\n  getItemRightSide?: ListPropGetItemRightSide<ITEM>;\n  getItemRightIcon?: ListPropGetItemRightIcon<ITEM>;\n  getItemGroupKey?: ListPropGetItemGroupId<ITEM>;\n  getItemOnClick?: ListPropGetItemOnClick<ITEM>;\n  getItemStatus?: ListPropGetItemStatus<ITEM>;\n  getItemAs?: ListPropGetItemAs<ITEM>;\n  getItemAttributes?: ListPropGetItemAttributes<ITEM>;\n  getItemRef?: ListPropGetItemRef<ITEM>;\n  getItemAdditionalClassName?: ListPropGetItemAdditionalClassName<ITEM>;\n  renderItem?: ListPropRenderItem<ITEM>;\n  groups?: GROUP[];\n  getGroupKey?: ListPropGetGroupKey<GROUP>;\n  getGroupLabel?: ListPropGetGroupLabel<GROUP>;\n  getGroupRightSide?: ListPropGetGroupRightSide<GROUP>;\n  sortGroup?: ListPropSortGroup<ITEM, GROUP>;\n  getGroupAdditionalClassName?: ListPropGetGroupAdditionalClassName<GROUP>;\n  disabled?: boolean;\n} & (ITEM extends { label: DefaultListItem['label'] }\n  ? {}\n  : { getItemLabel: ListPropGetItemLabel<ITEM> }) &\n  (GROUP extends { id: DefaultListGroup['id'] }\n    ? {}\n    : { getGroupKey: ListPropGetGroupKey<GROUP> });\n\nexport type ListComponent = <ITEM = DefaultListItem, GROUP = DefaultListGroup>(\n  props: ListProps<ITEM, GROUP>,\n) => React.ReactElement | null;\n\nexport type ListItemProps<AS extends AsTags = 'div'> = PropsWithAsAttributes<\n  Omit<DefaultListItem, 'id' | 'groupId' | 'attributes' | 'onClick'> & {\n    size?: ListPropSize;\n    innerOffset?: 'normal' | 'increased';\n    space?: MixSpaceProps;\n    iconSize?: IconPropSize;\n  },\n  AS\n>;\n\nexport type ListItemComponent = <AS extends AsTags = 'div'>(\n  props: ListItemProps<AS>,\n) => React.ReactElement | null;\n\nexport type ListGroupLabelProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    label: string;\n    innerOffset?: ListPropInnerOffset;\n    rightSide?: React.ReactNode;\n    space?: MixSpaceProps;\n  },\n  HTMLDivElement\n>;\n\nexport type ListDividerProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    innerOffset?: ListPropInnerOffset;\n    space?: MixSpaceProps;\n  },\n  HTMLDivElement\n>;\n\nexport type ListBoxProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    form?: ListPropForm;\n    border?: boolean;\n    shadow?: boolean;\n  },\n  HTMLDivElement\n>;\n\nexport type ListAddItemProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: ListPropSize;\n    label: React.ReactNode;\n    innerOffset?: ListPropInnerOffset;\n    active?: boolean;\n    underLine?: boolean;\n  },\n  HTMLDivElement\n>;\n"],"mappings":"AASA,MAAO,IAAMA,aAAY,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAArB,CAEP,MAAO,IAAMC,oBAAmB,CAAGD,YAAY,CAAC,CAAD,CAAxC,CAEP,MAAO,IAAME,oBAAmB,CAAG,CAAC,QAAD,CAAW,WAAX,CAA5B,CAEP,MAAO,IAAMC,2BAA0B,CAAGD,mBAAmB,CAAC,CAAD,CAAtD,CAEP,MAAO,IAAME,eAAc,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAvB,CAGP,MAAO,IAAMC,aAAY,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAqB,OAArB,CAArB,CAEP,MAAO,IAAMC,oBAAmB,CAAGD,YAAY,CAAC,CAAD,CAAxC"}

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

@@ -105,7 +105,7 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
     getItemContent?: PropGetItemContent<ITEM> | undefined;
     getItemStatus?: PropGetItemStatus<ITEM> | undefined;
     getItemOnClick?: PropGetItemOnClick<ITEM> | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "size" | "direction" | "getItemLabel" | "getItemStatus" | "onItemClick" | "getItemOnClick" | "getItemContent" | "steps" | "activeStepIndex" | "getItemLineStatus" | "getItemTooltipContent" | "getItemPoint" | "getItemProgress"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "size" | "getItemLabel" | "getItemStatus" | "direction" | "onItemClick" | "getItemOnClick" | "getItemContent" | "steps" | "activeStepIndex" | "getItemLineStatus" | "getItemTooltipContent" | "getItemPoint" | "getItemProgress"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
     label: string | undefined;
 } ? {} : {
     getItemLabel: PropGetItemLabel<ITEM>;
@@ -119,6 +119,6 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
     getItemLineStatus: PropGetItemLineStatus<DefaultItem> | PropGetItemLineStatus<ITEM>;
     getItemOnClick: PropGetItemOnClick<DefaultItem> | PropGetItemOnClick<ITEM>;
 };
-export declare const getItemPosition: (index: number, lendth: number) => "end" | "start" | "center";
+export declare const getItemPosition: (index: number, lendth: number) => "start" | "center" | "end";
 export declare const getLineSize: (container: React.RefObject<HTMLElement>, activeElement: React.RefObject<HTMLElement>, direction: PropDirection) => number;
 export declare const calculateLines: (refs: React.RefObject<HTMLElement>[], direction: PropDirection) => number[];

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

@@ -94,8 +94,8 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
         e: React.SyntheticEvent<Element, Event>;
     }) => void;
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "defaultClear" | "defaultBrick" | "brick" | "brickDefault" | "brickClear" | "brickRound" | "roundClear" | "roundBrick" | "clearRound" | "clearDefault" | "clearBrick" | "clearClear" | undefined;
-    dropdownForm?: "default" | "round" | "brick" | undefined;
+    form?: "default" | "defaultClear" | "defaultBrick" | "brick" | "brickDefault" | "brickClear" | "brickRound" | "round" | "roundClear" | "roundBrick" | "clearRound" | "clearDefault" | "clearBrick" | "clearClear" | undefined;
+    dropdownForm?: "default" | "brick" | "round" | undefined;
     size?: "m" | "s" | "xs" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     status?: "alert" | "warning" | "success" | undefined;

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

@@ -96,8 +96,8 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
         e: React.SyntheticEvent<Element, Event>;
     }) => void;
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "defaultClear" | "defaultBrick" | "brick" | "brickDefault" | "brickClear" | "brickRound" | "roundClear" | "roundBrick" | "clearRound" | "clearDefault" | "clearBrick" | "clearClear" | undefined;
-    dropdownForm?: "default" | "round" | "brick" | undefined;
+    form?: "default" | "defaultClear" | "defaultBrick" | "brick" | "brickDefault" | "brickClear" | "brickRound" | "round" | "roundClear" | "roundBrick" | "clearRound" | "clearDefault" | "clearBrick" | "clearClear" | undefined;
+    dropdownForm?: "default" | "brick" | "round" | undefined;
     size?: "m" | "s" | "xs" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     status?: "alert" | "warning" | "success" | undefined;

package/__internal__/src/components/Sidebar/Sidebar.d.ts

@@ -1,7 +1,7 @@
 import './Sidebar.css';
 import React from 'react';
+import { AsTagAttribute } from "../../utils/types/AsTags";
 import { PropsWithHTMLAttributes } from "../../utils/types/PropsWithHTMLAttributes";
-declare type DivProps = JSX.IntrinsicElements['div'];
 declare const sidebarPropPosition: readonly ["right", "bottom", "left", "top"];
 declare type SidebarPropPosition = typeof sidebarPropPosition[number];
 export declare const sidebarPropSize: readonly ["s", "m", "l", "full", "1/2", "1/3", "1/4", "2/3", "3/4"];
@@ -31,7 +31,7 @@ declare type SidebarActionsProps = {
 export declare const cnSidebar: import("@bem-react/classname").ClassNameFormatter;
 declare const SidebarContent: React.FC<SidebarContentProps>;
 declare const SidebarActions: React.FC<SidebarActionsProps>;
-interface SidebarComponent extends React.FC<SidebarProps>, DivProps {
+interface SidebarComponent extends React.FC<SidebarProps>, AsTagAttribute<'div'> {
     Content: typeof SidebarContent;
     Actions: typeof SidebarActions;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","names":["React","useEffect","useRef","Transition","PortalWithTheme","usePortalContext","useTheme","useClickOutside","useGlobalKeys","cn","sidebarPropPosition","sidebarPropPositionDefault","sidebarPropSize","sidebarPropSizeDefault","cnSidebar","SidebarContent","className","children","rest","SidebarActions","ContextConsumer","onClickOutside","ignoreClicksInsideRefs","refs","isActive","handler","Sidebar","props","isOpen","onClose","onOpen","hasOverlay","onEsc","position","size","container","window","document","body","style","rootClassName","afterClose","otherProps","ref","portalRef","theme","Escape","e","animate","zIndex","Content","Actions"],"sources":["../../../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import './Sidebar.css';\n\nimport React, { useEffect, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n  PortalWithTheme,\n  usePortalContext,\n} from '##/components/PortalWithTheme';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useGlobalKeys } from '##/hooks/useGlobalKeys';\nimport { cn } from '##/utils/bem';\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\ntype DivProps = JSX.IntrinsicElements['div'];\n\nconst sidebarPropPosition = ['right', 'bottom', 'left', 'top'] as const;\ntype SidebarPropPosition = typeof sidebarPropPosition[number];\nconst sidebarPropPositionDefault: SidebarPropPosition = sidebarPropPosition[0];\n\nexport const sidebarPropSize = [\n  's',\n  'm',\n  'l',\n  'full',\n  '1/2',\n  '1/3',\n  '1/4',\n  '2/3',\n  '3/4',\n] as const;\n\nexport type SidebarPropSize = typeof sidebarPropSize[number];\nconst sidebarPropSizeDefault: SidebarPropSize = sidebarPropSize[1];\n\ntype SidebarProps = PropsWithHTMLAttributes<\n  {\n    isOpen?: boolean;\n    onClose?: () => void;\n    onOpen?: () => void;\n    hasOverlay?: boolean;\n    onClickOutside?: (event: MouseEvent) => void;\n    onEsc?: (event: KeyboardEvent) => void;\n    position?: SidebarPropPosition;\n    size?: SidebarPropSize;\n    rootClassName?: string;\n    children?: React.ReactNode;\n    container?: HTMLDivElement | undefined;\n    afterClose?: () => void;\n  },\n  HTMLDivElement\n>;\n\ntype SidebarContentProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\ntype SidebarActionsProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\nexport const cnSidebar = cn('Sidebar');\n\nconst SidebarContent: React.FC<SidebarContentProps> = ({\n  className,\n  children,\n  ...rest\n}) => (\n  <div className={cnSidebar('Content', null, [className])} {...rest}>\n    {children}\n  </div>\n);\n\nconst SidebarActions: React.FC<SidebarActionsProps> = ({\n  className,\n  children,\n  ...rest\n}) => (\n  <div className={cnSidebar('Actions', null, [className])} {...rest}>\n    {children}\n  </div>\n);\n\nconst ContextConsumer: React.FC<{\n  onClickOutside?: (event: MouseEvent) => void;\n  ignoreClicksInsideRefs?: ReadonlyArray<React.RefObject<HTMLElement>>;\n  children: React.ReactNode;\n}> = ({ onClickOutside, children, ignoreClicksInsideRefs }) => {\n  const { refs } = usePortalContext();\n\n  useClickOutside({\n    isActive: !!onClickOutside,\n    ignoreClicksInsideRefs: [\n      ...(ignoreClicksInsideRefs || []),\n      ...(refs || []),\n    ],\n    handler: onClickOutside,\n  });\n\n  return children as React.ReactElement;\n};\n\ninterface SidebarComponent extends React.FC<SidebarProps>, DivProps {\n  Content: typeof SidebarContent;\n  Actions: typeof SidebarActions;\n}\n\nexport const Sidebar: SidebarComponent = (props) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    hasOverlay = true,\n    onClickOutside,\n    onEsc,\n    position = sidebarPropPositionDefault,\n    size = sidebarPropSizeDefault,\n    className,\n    children,\n    container = window.document.body,\n    style,\n    rootClassName,\n    afterClose,\n    ...otherProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  const portalRef = useRef<HTMLDivElement>(null);\n\n  const { theme } = useTheme();\n\n  useEffect(() => {\n    if (isOpen) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isOpen]);\n\n  useGlobalKeys({\n    Escape: (e) => isOpen && onEsc && onEsc(e),\n  });\n\n  return (\n    <Transition\n      in={isOpen}\n      unmountOnExit\n      timeout={240}\n      nodeRef={portalRef}\n      onExiting={afterClose}\n    >\n      {(animate) => (\n        <PortalWithTheme\n          preset={theme}\n          ref={portalRef}\n          container={container}\n          className={cnSidebar({ position, hasOverlay }, [rootClassName])}\n          style={\n            typeof style?.zIndex === 'number'\n              ? { zIndex: style.zIndex }\n              : undefined\n          }\n        >\n          {hasOverlay && (\n            <div\n              className={cnSidebar('Overlay', { animate })}\n              aria-label=\"Overlay\"\n            />\n          )}\n          <div\n            {...otherProps}\n            style={{\n              ...style,\n              zIndex: undefined,\n            }}\n            className={cnSidebar('Window', { size, position, animate }, [\n              className,\n            ])}\n            ref={ref}\n          >\n            <ContextConsumer\n              onClickOutside={onClickOutside}\n              ignoreClicksInsideRefs={[ref]}\n            >\n              {children}\n            </ContextConsumer>\n          </div>\n        </PortalWithTheme>\n      )}\n    </Transition>\n  );\n};\n\nSidebar.Content = SidebarContent;\nSidebar.Actions = SidebarActions;\n"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","names":["React","useEffect","useRef","Transition","PortalWithTheme","usePortalContext","useTheme","useClickOutside","useGlobalKeys","cn","sidebarPropPosition","sidebarPropPositionDefault","sidebarPropSize","sidebarPropSizeDefault","cnSidebar","SidebarContent","className","children","rest","SidebarActions","ContextConsumer","onClickOutside","ignoreClicksInsideRefs","refs","isActive","handler","Sidebar","props","isOpen","onClose","onOpen","hasOverlay","onEsc","position","size","container","window","document","body","style","rootClassName","afterClose","otherProps","ref","portalRef","theme","Escape","e","animate","zIndex","Content","Actions"],"sources":["../../../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import './Sidebar.css';\n\nimport React, { useEffect, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n  PortalWithTheme,\n  usePortalContext,\n} from '##/components/PortalWithTheme';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useGlobalKeys } from '##/hooks/useGlobalKeys';\nimport { cn } from '##/utils/bem';\nimport { AsTagAttribute } from '##/utils/types/AsTags';\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nconst sidebarPropPosition = ['right', 'bottom', 'left', 'top'] as const;\ntype SidebarPropPosition = typeof sidebarPropPosition[number];\nconst sidebarPropPositionDefault: SidebarPropPosition = sidebarPropPosition[0];\n\nexport const sidebarPropSize = [\n  's',\n  'm',\n  'l',\n  'full',\n  '1/2',\n  '1/3',\n  '1/4',\n  '2/3',\n  '3/4',\n] as const;\n\nexport type SidebarPropSize = typeof sidebarPropSize[number];\nconst sidebarPropSizeDefault: SidebarPropSize = sidebarPropSize[1];\n\ntype SidebarProps = PropsWithHTMLAttributes<\n  {\n    isOpen?: boolean;\n    onClose?: () => void;\n    onOpen?: () => void;\n    hasOverlay?: boolean;\n    onClickOutside?: (event: MouseEvent) => void;\n    onEsc?: (event: KeyboardEvent) => void;\n    position?: SidebarPropPosition;\n    size?: SidebarPropSize;\n    rootClassName?: string;\n    children?: React.ReactNode;\n    container?: HTMLDivElement | undefined;\n    afterClose?: () => void;\n  },\n  HTMLDivElement\n>;\n\ntype SidebarContentProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\ntype SidebarActionsProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\nexport const cnSidebar = cn('Sidebar');\n\nconst SidebarContent: React.FC<SidebarContentProps> = ({\n  className,\n  children,\n  ...rest\n}) => (\n  <div className={cnSidebar('Content', null, [className])} {...rest}>\n    {children}\n  </div>\n);\n\nconst SidebarActions: React.FC<SidebarActionsProps> = ({\n  className,\n  children,\n  ...rest\n}) => (\n  <div className={cnSidebar('Actions', null, [className])} {...rest}>\n    {children}\n  </div>\n);\n\nconst ContextConsumer: React.FC<{\n  onClickOutside?: (event: MouseEvent) => void;\n  ignoreClicksInsideRefs?: ReadonlyArray<React.RefObject<HTMLElement>>;\n  children: React.ReactNode;\n}> = ({ onClickOutside, children, ignoreClicksInsideRefs }) => {\n  const { refs } = usePortalContext();\n\n  useClickOutside({\n    isActive: !!onClickOutside,\n    ignoreClicksInsideRefs: [\n      ...(ignoreClicksInsideRefs || []),\n      ...(refs || []),\n    ],\n    handler: onClickOutside,\n  });\n\n  return children as React.ReactElement;\n};\n\ninterface SidebarComponent\n  extends React.FC<SidebarProps>,\n    AsTagAttribute<'div'> {\n  Content: typeof SidebarContent;\n  Actions: typeof SidebarActions;\n}\n\nexport const Sidebar: SidebarComponent = (props) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    hasOverlay = true,\n    onClickOutside,\n    onEsc,\n    position = sidebarPropPositionDefault,\n    size = sidebarPropSizeDefault,\n    className,\n    children,\n    container = window.document.body,\n    style,\n    rootClassName,\n    afterClose,\n    ...otherProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  const portalRef = useRef<HTMLDivElement>(null);\n\n  const { theme } = useTheme();\n\n  useEffect(() => {\n    if (isOpen) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isOpen]);\n\n  useGlobalKeys({\n    Escape: (e) => isOpen && onEsc && onEsc(e),\n  });\n\n  return (\n    <Transition\n      in={isOpen}\n      unmountOnExit\n      timeout={240}\n      nodeRef={portalRef}\n      onExiting={afterClose}\n    >\n      {(animate) => (\n        <PortalWithTheme\n          preset={theme}\n          ref={portalRef}\n          container={container}\n          className={cnSidebar({ position, hasOverlay }, [rootClassName])}\n          style={\n            typeof style?.zIndex === 'number'\n              ? { zIndex: style.zIndex }\n              : undefined\n          }\n        >\n          {hasOverlay && (\n            <div\n              className={cnSidebar('Overlay', { animate })}\n              aria-label=\"Overlay\"\n            />\n          )}\n          <div\n            {...otherProps}\n            style={{\n              ...style,\n              zIndex: undefined,\n            }}\n            className={cnSidebar('Window', { size, position, animate }, [\n              className,\n            ])}\n            ref={ref}\n          >\n            <ContextConsumer\n              onClickOutside={onClickOutside}\n              ignoreClicksInsideRefs={[ref]}\n            >\n              {children}\n            </ContextConsumer>\n          </div>\n        </PortalWithTheme>\n      )}\n    </Transition>\n  );\n};\n\nSidebar.Content = SidebarContent;\nSidebar.Actions = SidebarActions;\n"],"mappings":"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"}

package/__internal__/src/components/SnackBar/helper.d.ts

@@ -12,7 +12,7 @@ export declare const withDefaultGetters: (props: SnackBarProps) => {
     getItemOnAutoClose: SnackBarPropGetItemOnAutoClose<SnackBarItemDefault>;
     items: SnackBarItemDefault[];
     children?: undefined;
-    form?: "default" | "round" | "brick" | undefined;
+    form?: "default" | "brick" | "round" | undefined;
     onItemClose?: ((item: SnackBarItemDefault) => void) | undefined;
     onItemAutoClose?: ((item: SnackBarItemDefault) => void) | undefined;
     defaultChecked?: boolean | undefined;

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=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 d.length?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}))):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})))};
+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=b.findIndex(f),m=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k,activeIndex:l}),n=m.visibleIndexes,o=m.isItemHidden,p=b.filter(function(a,b){return o(b)}),q=React.useMemo(function(){return d.length?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}))):0},[c]),r=getTabsWidth(c.filter(function(a,b){return!o(b)}));return React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper(),style:{height:q}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({visibleIndexes:n,withRunningLine:!0,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:o(a)})}})),React.createElement("div",{ref:k,className:cnTabsFitModeDropdownWrapper("MoreItems",{hidden:!p.length}),style:{left:p.length?r:void 0}},React.createElement(TabsMoreItems,{items:p,renderItem:g,getItemLabel:e,getItemChecked:f,height:q,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","size","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","length","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","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    if (!tabRefs.length) {\n      return 0;\n    }\n    return Math.max(\n      ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n    );\n  }, [tabsDimensions]);\n\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,OAC1ChB,EAAO,CAACiB,MADkC,CAIxCC,IAAI,CAACC,GAAL,OAAAD,IAAI,oBACNlB,CAAO,CAACoB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAJoC,CAEtC,CAKV,CAP4B,CAO1B,CAACxB,CAAD,CAP0B,CATiC,CAkBxDyB,CAAmB,CAAGb,CAAW,CAACc,IAAZ,CAAiBvB,CAAjB,CAlBkC,CAmBxDwB,CAAgB,CAAGjC,YAAY,CACnCM,CAAc,CAACa,MAAf,CAAsB,SAACe,CAAD,CAAMb,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAnByB,CAuB9D,MACE,4BACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAEgC,MAAM,CAAEb,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEnB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfyB,eAAe,CAAE,CAACL,CADH,CAEfM,eAAe,CAAE,yBAAChB,CAAD,QACflB,6BAA4B,CAAC,KAAD,CAAQ,CAAEmC,MAAM,CAAErB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAFF,CAAD,CADlB,CALF,CAYE,2BACE,GAAG,CAAEN,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDmC,MAAM,CAAE,CAACpB,CAAW,CAACM,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLe,IAAI,CAAErB,CAAW,CAACM,MAAZ,CAAqBS,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEf,CADT,CAEE,UAAU,CAAER,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEa,CALV,CAME,IAAI,CAAEV,CANR,EAXF,CAZF,CAkCH,CAnEM"}
+{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","size","ref","useRef","moreItemsRef","activeIndex","findIndex","containerRef","visibleIndexes","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","length","Math","max","map","tabRef","current","offsetHeight","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","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\n  const activeIndex = items.findIndex(getItemChecked);\n\n  const { visibleIndexes, isItemHidden } = useFittingItems({\n    tabsDimensions,\n    containerRef: ref,\n    moreItemsRef,\n    activeIndex,\n  });\n\n  const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n  const maxTabHeight: number = React.useMemo(() => {\n    if (!tabRefs.length) {\n      return 0;\n    }\n    return Math.max(\n      ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n    );\n  }, [tabsDimensions]);\n\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          visibleIndexes,\n          withRunningLine: true,\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,CAIxDE,CAAW,CAAGX,CAAK,CAACY,SAAN,CAAgBR,CAAhB,CAJ0C,GAMrBP,eAAe,CAAC,CACvDI,cAAc,CAAdA,CADuD,CAEvDY,YAAY,CAAEL,CAFyC,CAGvDE,YAAY,CAAZA,CAHuD,CAIvDC,WAAW,CAAXA,CAJuD,CAAD,CANM,CAMtDG,CANsD,GAMtDA,cANsD,CAMtCC,CANsC,GAMtCA,YANsC,CAaxDC,CAAW,CAAGhB,CAAK,CAACiB,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAb0C,CAcxDC,CAAoB,CAAG3B,KAAK,CAAC4B,OAAN,CAAc,UAAM,OAC1CnB,EAAO,CAACoB,MADkC,CAIxCC,IAAI,CAACC,GAAL,OAAAD,IAAI,oBACNrB,CAAO,CAACuB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAJoC,CAEtC,CAKV,CAP4B,CAO1B,CAAC3B,CAAD,CAP0B,CAdiC,CAuBxD4B,CAAgB,CAAGlC,YAAY,CACnCM,CAAc,CAACgB,MAAf,CAAsB,SAACa,CAAD,CAAMX,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAvByB,CA2B9D,MACE,4BACE,GAAG,CAAEX,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAEiC,MAAM,CAAEX,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEtB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfQ,cAAc,CAAdA,CADe,CAEfkB,eAAe,GAFA,CAGfC,eAAe,CAAE,yBAACd,CAAD,QACfrB,6BAA4B,CAAC,KAAD,CAAQ,CAAEoC,MAAM,CAAEnB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAHF,CAAD,CADlB,CALF,CAaE,2BACE,GAAG,CAAET,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDoC,MAAM,CAAE,CAAClB,CAAW,CAACM,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLa,IAAI,CAAEnB,CAAW,CAACM,MAAZ,CAAqBO,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEb,CADT,CAEE,UAAU,CAAEX,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEgB,CALV,CAME,IAAI,CAAEb,CANR,EAXF,CAbF,CAmCH,CAxEM"}

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TabDimensions } from '../types';
-export declare const useFittingItems: ({ tabsDimensions, containerRef, moreItemsRef, }: {
+export declare const useFittingItems: ({ tabsDimensions, containerRef, moreItemsRef, activeIndex, }: {
     tabsDimensions: TabDimensions[];
     containerRef: React.RefObject<HTMLElement>;
     moreItemsRef: React.RefObject<HTMLElement>;
+    activeIndex?: number | undefined;
 }) => {
-    fittingItemsCount: number;
+    visibleIndexes: number[];
     isItemHidden: (idx: number) => boolean;
 };
-export declare const getFittingItemsCount: (tabsDimensions: TabDimensions[], totalWidth: number, moreItemsWidth: number) => number;
+export declare const getFittingItems: (tabsDimensions: TabDimensions[], totalWidth: number, moreItemsWidth: number, activeIndex?: 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(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};
+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,{useMemo}from"react";import{useComponentSize}from"../../../hooks/useComponentSize/useComponentSize";export var useFittingItems=function(a){var b=a.tabsDimensions,c=a.containerRef,d=a.moreItemsRef,e=a.activeIndex,f=useComponentSize(c),g=f.width,h=useComponentSize(d),i=h.width,j=useMemo(function(){return getFittingItems(b,g,i,e)},[b,g,i,e]);return{visibleIndexes:j,isItemHidden:React.useCallback(function(a){return!j.includes(a)},[j])}};export var getFittingItems=function(a,b,c,d){if(!b)return Array.from({length:a.length}).map(function(a,b){return b});var e,f="number"==typeof d&&-1<d?a[d].size+a[d].gap:0,g=[],h=_createForOfIteratorHelper(a.entries());try{for(h.s();!(e=h.n()).done;){var i=_slicedToArray(e.value,2),j=i[0],k=i[1];if(j!==d){var l=j===a.length-1;if(f+=k.size+(l?0:k.gap),f+c>b)return d&&!g.includes(d)&&g.push(d),g;g.push(j)}else g.push(d)}}catch(a){h.e(a)}finally{h.f()}return Array.from({length:a.length}).map(function(a,b){return b})};
 //# 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","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"}
+{"version":3,"file":"useFittingItems.js","names":["React","useMemo","useComponentSize","useFittingItems","tabsDimensions","containerRef","moreItemsRef","activeIndex","containerWidth","width","moreItemsWidth","visibleIndexes","getFittingItems","isItemHidden","useCallback","idx","includes","totalWidth","Array","from","length","map","_el","index","size","gap","arr","entries","tabDimensions","isLastItem","push"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/useFittingItems.ts"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';\nimport { TabDimensions } from '../types';\n\nexport const useFittingItems = ({\n  tabsDimensions,\n  containerRef,\n  moreItemsRef,\n  activeIndex,\n}: {\n  tabsDimensions: TabDimensions[];\n  containerRef: React.RefObject<HTMLElement>;\n  moreItemsRef: React.RefObject<HTMLElement>;\n  activeIndex?: number;\n}): {\n  visibleIndexes: number[];\n  isItemHidden: (idx: number) => boolean;\n} => {\n  const { width: containerWidth } = useComponentSize(containerRef);\n  const { width: moreItemsWidth } = useComponentSize(moreItemsRef);\n\n  const visibleIndexes = useMemo(\n    () =>\n      getFittingItems(\n        tabsDimensions,\n        containerWidth,\n        moreItemsWidth,\n        activeIndex,\n      ),\n    [tabsDimensions, containerWidth, moreItemsWidth, activeIndex],\n  );\n\n  return {\n    visibleIndexes,\n    isItemHidden: React.useCallback(\n      (idx) => !visibleIndexes.includes(idx),\n      [visibleIndexes],\n    ),\n  };\n};\n\nexport const getFittingItems = (\n  tabsDimensions: TabDimensions[],\n  totalWidth: number,\n  moreItemsWidth: number,\n  activeIndex?: number,\n): number[] => {\n  if (!totalWidth) {\n    return Array.from<number>({ length: tabsDimensions.length }).map(\n      (_el, index) => index,\n    );\n  }\n  let width =\n    typeof activeIndex === 'number' && activeIndex > -1\n      ? tabsDimensions[activeIndex].size + tabsDimensions[activeIndex].gap\n      : 0;\n  const arr: number[] = [];\n  for (const [idx, tabDimensions] of tabsDimensions.entries()) {\n    if (idx !== activeIndex) {\n      const isLastItem = idx === tabsDimensions.length - 1;\n      width += tabDimensions.size + (isLastItem ? 0 : tabDimensions.gap);\n      if (width + moreItemsWidth > totalWidth) {\n        if (activeIndex && !arr.includes(activeIndex)) {\n          arr.push(activeIndex);\n        }\n        return arr;\n      }\n      arr.push(idx);\n    } else {\n      arr.push(activeIndex);\n    }\n  }\n\n  return Array.from<number>({ length: tabsDimensions.length }).map(\n    (_el, index) => index,\n  );\n};\n"],"mappings":"stCAAA,MAAOA,MAAP,EAAgBC,OAAhB,KAA+B,OAA/B,CAEA,OAASC,gBAAT,wDAGA,MAAO,IAAMC,gBAAe,CAAG,WAa1B,IAZHC,EAYG,GAZHA,cAYG,CAXHC,CAWG,GAXHA,YAWG,CAVHC,CAUG,GAVHA,YAUG,CATHC,CASG,GATHA,WASG,GAC+BL,gBAAgB,CAACG,CAAD,CAD/C,CACYG,CADZ,GACKC,KADL,GAE+BP,gBAAgB,CAACI,CAAD,CAF/C,CAEYI,CAFZ,GAEKD,KAFL,CAIGE,CAAc,CAAGV,OAAO,CAC5B,iBACEW,gBAAe,CACbR,CADa,CAEbI,CAFa,CAGbE,CAHa,CAIbH,CAJa,CADjB,CAD4B,CAQ5B,CAACH,CAAD,CAAiBI,CAAjB,CAAiCE,CAAjC,CAAiDH,CAAjD,CAR4B,CAJ3B,CAeH,MAAO,CACLI,cAAc,CAAdA,CADK,CAELE,YAAY,CAAEb,KAAK,CAACc,WAAN,CACZ,SAACC,CAAD,QAAS,CAACJ,CAAc,CAACK,QAAf,CAAwBD,CAAxB,CAAV,CADY,CAEZ,CAACJ,CAAD,CAFY,CAFT,CAOR,CAnCM,CAqCP,MAAO,IAAMC,gBAAe,CAAG,SAC7BR,CAD6B,CAE7Ba,CAF6B,CAG7BP,CAH6B,CAI7BH,CAJ6B,CAKhB,CACb,GAAI,CAACU,CAAL,CACE,MAAOC,MAAK,CAACC,IAAN,CAAmB,CAAEC,MAAM,CAAEhB,CAAc,CAACgB,MAAzB,CAAnB,EAAsDC,GAAtD,CACL,SAACC,CAAD,CAAMC,CAAN,QAAgBA,EAAhB,CADK,CAAP,CAFW,MAMTd,CAAK,CACgB,QAAvB,QAAOF,EAAP,EAAiD,CAAC,CAAf,CAAAA,CAAnC,CACIH,CAAc,CAACG,CAAD,CAAd,CAA4BiB,IAA5B,CAAmCpB,CAAc,CAACG,CAAD,CAAd,CAA4BkB,GADnE,CAEI,CATO,CAUPC,CAAa,CAAG,EAVT,8BAWsBtB,CAAc,CAACuB,OAAf,EAXtB,MAWb,2BAA6D,iCAAjDZ,CAAiD,MAA5Ca,CAA4C,MAC3D,GAAIb,CAAG,GAAKR,CAAZ,CAAyB,CACvB,GAAMsB,EAAU,CAAGd,CAAG,GAAKX,CAAc,CAACgB,MAAf,CAAwB,CAAnD,CAEA,GADAX,CAAK,EAAImB,CAAa,CAACJ,IAAd,EAAsBK,CAAU,CAAG,CAAH,CAAOD,CAAa,CAACH,GAArD,CACT,CAAIhB,CAAK,CAAGC,CAAR,CAAyBO,CAA7B,CAIE,MAHIV,EAAW,EAAI,CAACmB,CAAG,CAACV,QAAJ,CAAaT,CAAb,CAGpB,EAFEmB,CAAG,CAACI,IAAJ,CAASvB,CAAT,CAEF,CAAOmB,CAAP,CAEFA,CAAG,CAACI,IAAJ,CAASf,CAAT,CACD,CAVD,IAWEW,EAAG,CAACI,IAAJ,CAASvB,CAAT,CAEH,CAzBY,+BA2Bb,MAAOW,MAAK,CAACC,IAAN,CAAmB,CAAEC,MAAM,CAAEhB,CAAc,CAACgB,MAAzB,CAAnB,EAAsDC,GAAtD,CACL,SAACC,CAAD,CAAMC,CAAN,QAAgBA,EAAhB,CADK,CAGR,CAnCM"}

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

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"./TabsFitModeScrollWrapper.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React from"react";import{useResizeObserved}from"../../../hooks/useResizeObserved/useResizeObserved";import{useScrollPosition}from"../../../hooks/useScrollPosition/useScrollPosition";import{cn}from"../../../utils/bem";import{Button}from"../../Button/Button";import{getTabsWidth,getVisibleTabsRange}from"../helpers";var cnTabsFitModeScrollWrapper=cn("TabsFitModeScrollWrapper");export var TabsFitModeScrollWrapper=function(a){var b=a.tabsDimensions,c=a.items,d=a.renderItemsList,e=a.getItemChecked,f=React.useRef(null),g=useResizeObserved(React.useMemo(function(){return[f]},[f]),function(a){var b;return{isScrollable:a&&a.scrollWidth>a.offsetWidth,width:null!==(b=null===a||void 0===a?void 0:a.offsetWidth)&&void 0!==b?b:0,paddingLeft:a?parseInt(getComputedStyle(a).paddingLeft,10):0}}),h=_slicedToArray(g,1),i=h[0],j=i.isScrollable,k=i.width,l=i.paddingLeft,m=useScrollPosition(f.current),n=m.scrollLeft,o=getVisibleTabsRange({tabsDimensions:b,containerWidth:k,containerPaddingLeft:l,scrollLeft:n}),p=_slicedToArray(o,2),q=p[0],r=p[1],s=function(a){if(!(a>=q&&a<=r)){var c,d=getTabsWidth(b.slice(0,a));null===(c=f.current)||void 0===c?void 0:c.scrollTo({left:d,behavior:"smooth"})}},t=function(){s(q-1)},u=function(){s(r+1)},v=c.findIndex(e);return React.useEffect(function(){j&&s(v)},[v,j]),React.createElement("div",{className:cnTabsFitModeScrollWrapper()},j&&React.createElement(React.Fragment,null,["prev","next"].map(function(a){return React.createElement(Button,{key:a,view:"clear",type:"button",size:"xs",onlyIcon:!0,disabled:"prev"===a?0===q:r===c.length-1,iconLeft:"prev"===a?IconArrowLeft:IconArrowRight,className:cnTabsFitModeScrollWrapper("Button",{to:a}),onClick:"prev"===a?t:u})})),React.createElement("div",{className:cnTabsFitModeScrollWrapper("Content"),ref:f},d({getTabClassName:function getTabClassName(a){return cnTabsFitModeScrollWrapper("Tab",{noMargin:a===c.length-1})}})))};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"./TabsFitModeScrollWrapper.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React from"react";import{useResizeObserved}from"../../../hooks/useResizeObserved/useResizeObserved";import{useScrollPosition}from"../../../hooks/useScrollPosition/useScrollPosition";import{cn}from"../../../utils/bem";import{Button}from"../../Button/Button";import{getTabsWidth,getVisibleTabsRange}from"../helpers";var cnTabsFitModeScrollWrapper=cn("TabsFitModeScrollWrapper");export var TabsFitModeScrollWrapper=function(a){var b=a.tabsDimensions,c=a.items,d=a.renderItemsList,e=a.getItemChecked,f=React.useRef(null),g=useResizeObserved(React.useMemo(function(){return[f]},[f]),function(a){var b;return{isScrollable:a&&a.scrollWidth>a.offsetWidth,width:null!==(b=null===a||void 0===a?void 0:a.offsetWidth)&&void 0!==b?b:0,paddingLeft:a?parseInt(getComputedStyle(a).paddingLeft,10):0}}),h=_slicedToArray(g,1),i=h[0],j=i.isScrollable,k=i.width,l=i.paddingLeft,m=useScrollPosition(f.current),n=m.scrollLeft,o=getVisibleTabsRange({tabsDimensions:b,containerWidth:k,containerPaddingLeft:l,scrollLeft:n}),p=_slicedToArray(o,2),q=p[0],r=p[1],s=function(a){if(!(a>=q&&a<=r)){var c,d=getTabsWidth(b.slice(0,a));null===(c=f.current)||void 0===c?void 0:c.scrollTo({left:d,behavior:"smooth"})}},t=function(){s(q-1)},u=function(){s(r+1)},v=c.findIndex(e);return React.useEffect(function(){j&&s(v)},[v,j]),React.createElement("div",{className:cnTabsFitModeScrollWrapper()},j&&React.createElement(React.Fragment,null,["prev","next"].map(function(a){return React.createElement(Button,{key:a,view:"clear",type:"button",size:"xs",onlyIcon:!0,disabled:"prev"===a?0===q:r===c.length-1,iconLeft:"prev"===a?IconArrowLeft:IconArrowRight,className:cnTabsFitModeScrollWrapper("Button",{to:a}),onClick:"prev"===a?t:u})})),React.createElement("div",{className:cnTabsFitModeScrollWrapper("Content"),ref:f},d({visibleIndexes:Array.from(Array(c.length).keys()),getTabClassName:function getTabClassName(a){return cnTabsFitModeScrollWrapper("Tab",{noMargin:a===c.length-1})}})))};
 //# sourceMappingURL=TabsFitModeScrollWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsFitModeScrollWrapper.js","names":["IconArrowLeft","IconArrowRight","React","useResizeObserved","useScrollPosition","cn","Button","getTabsWidth","getVisibleTabsRange","cnTabsFitModeScrollWrapper","TabsFitModeScrollWrapper","tabsDimensions","items","renderItemsList","getItemChecked","scrollContainerRef","useRef","useMemo","el","isScrollable","scrollWidth","offsetWidth","width","paddingLeft","parseInt","getComputedStyle","containerWidth","containerPaddingLeft","current","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","scrollTabIntoView","idx","previousTabsWidth","slice","scrollTo","left","behavior","scrollPrev","scrollNext","checkedTabIdx","findIndex","useEffect","map","buttonTo","length","to","getTabClassName","noMargin"],"sources":["../../../../../../src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.tsx"],"sourcesContent":["import './TabsFitModeScrollWrapper.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React from 'react';\n\nimport { useResizeObserved } from '../../../hooks/useResizeObserved/useResizeObserved';\nimport { useScrollPosition } from '../../../hooks/useScrollPosition/useScrollPosition';\nimport { cn } from '../../../utils/bem';\nimport { Button } from '../../Button/Button';\nimport { getTabsWidth, getVisibleTabsRange } from '../helpers';\nimport { TabsFitModeWrapperProps } from '../types';\n\nconst cnTabsFitModeScrollWrapper = cn('TabsFitModeScrollWrapper');\n\nexport const TabsFitModeScrollWrapper = <ITEM,>({\n  tabsDimensions,\n  items,\n  renderItemsList,\n  getItemChecked,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n  const [\n    { isScrollable, width: containerWidth, paddingLeft: containerPaddingLeft },\n  ] = useResizeObserved(\n    React.useMemo(() => [scrollContainerRef], [scrollContainerRef]),\n    (el) => ({\n      isScrollable: el && el.scrollWidth > el.offsetWidth,\n      width: el?.offsetWidth ?? 0,\n      paddingLeft: el ? parseInt(getComputedStyle(el).paddingLeft, 10) : 0,\n    }),\n  );\n  const { scrollLeft } = useScrollPosition(scrollContainerRef.current);\n\n  const [firstVisibleTabIdx, lastVisibleTabIdx] = getVisibleTabsRange({\n    tabsDimensions,\n    containerWidth,\n    containerPaddingLeft,\n    scrollLeft,\n  });\n\n  const scrollTabIntoView = (idx: number) => {\n    const tabIsVisible = idx >= firstVisibleTabIdx && idx <= lastVisibleTabIdx;\n\n    if (!tabIsVisible) {\n      const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n      scrollContainerRef.current?.scrollTo({\n        left: previousTabsWidth,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const scrollPrev = () => {\n    scrollTabIntoView(firstVisibleTabIdx - 1);\n  };\n\n  const scrollNext = () => {\n    scrollTabIntoView(lastVisibleTabIdx + 1);\n  };\n\n  // Подскролливаем к выбранному табу\n  const checkedTabIdx = items.findIndex(getItemChecked);\n  React.useEffect(() => {\n    if (isScrollable) {\n      scrollTabIntoView(checkedTabIdx);\n    }\n  }, [checkedTabIdx, isScrollable]);\n\n  return (\n    <div className={cnTabsFitModeScrollWrapper()}>\n      {isScrollable && (\n        <>\n          {(['prev', 'next'] as const).map((buttonTo) => (\n            <Button\n              key={buttonTo}\n              view=\"clear\"\n              type=\"button\"\n              size=\"xs\"\n              onlyIcon\n              disabled={\n                buttonTo === 'prev'\n                  ? firstVisibleTabIdx === 0\n                  : lastVisibleTabIdx === items.length - 1\n              }\n              iconLeft={buttonTo === 'prev' ? IconArrowLeft : IconArrowRight}\n              className={cnTabsFitModeScrollWrapper('Button', { to: buttonTo })}\n              onClick={buttonTo === 'prev' ? scrollPrev : scrollNext}\n            />\n          ))}\n        </>\n      )}\n      <div\n        className={cnTabsFitModeScrollWrapper('Content')}\n        ref={scrollContainerRef}\n      >\n        {renderItemsList({\n          getTabClassName: (idx) =>\n            cnTabsFitModeScrollWrapper('Tab', {\n              noMargin: idx === items.length - 1,\n            }),\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TabsFitModeScrollWrapper.js","names":["IconArrowLeft","IconArrowRight","React","useResizeObserved","useScrollPosition","cn","Button","getTabsWidth","getVisibleTabsRange","cnTabsFitModeScrollWrapper","TabsFitModeScrollWrapper","tabsDimensions","items","renderItemsList","getItemChecked","scrollContainerRef","useRef","useMemo","el","isScrollable","scrollWidth","offsetWidth","width","paddingLeft","parseInt","getComputedStyle","containerWidth","containerPaddingLeft","current","scrollLeft","firstVisibleTabIdx","lastVisibleTabIdx","scrollTabIntoView","idx","previousTabsWidth","slice","scrollTo","left","behavior","scrollPrev","scrollNext","checkedTabIdx","findIndex","useEffect","map","buttonTo","length","to","visibleIndexes","Array","from","keys","getTabClassName","noMargin"],"sources":["../../../../../../src/components/Tabs/FitModeScrollWrapper/TabsFitModeScrollWrapper.tsx"],"sourcesContent":["import './TabsFitModeScrollWrapper.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React from 'react';\n\nimport { useResizeObserved } from '../../../hooks/useResizeObserved/useResizeObserved';\nimport { useScrollPosition } from '../../../hooks/useScrollPosition/useScrollPosition';\nimport { cn } from '../../../utils/bem';\nimport { Button } from '../../Button/Button';\nimport { getTabsWidth, getVisibleTabsRange } from '../helpers';\nimport { TabsFitModeWrapperProps } from '../types';\n\nconst cnTabsFitModeScrollWrapper = cn('TabsFitModeScrollWrapper');\n\nexport const TabsFitModeScrollWrapper = <ITEM,>({\n  tabsDimensions,\n  items,\n  renderItemsList,\n  getItemChecked,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n  const [\n    { isScrollable, width: containerWidth, paddingLeft: containerPaddingLeft },\n  ] = useResizeObserved(\n    React.useMemo(() => [scrollContainerRef], [scrollContainerRef]),\n    (el) => ({\n      isScrollable: el && el.scrollWidth > el.offsetWidth,\n      width: el?.offsetWidth ?? 0,\n      paddingLeft: el ? parseInt(getComputedStyle(el).paddingLeft, 10) : 0,\n    }),\n  );\n  const { scrollLeft } = useScrollPosition(scrollContainerRef.current);\n\n  const [firstVisibleTabIdx, lastVisibleTabIdx] = getVisibleTabsRange({\n    tabsDimensions,\n    containerWidth,\n    containerPaddingLeft,\n    scrollLeft,\n  });\n\n  const scrollTabIntoView = (idx: number) => {\n    const tabIsVisible = idx >= firstVisibleTabIdx && idx <= lastVisibleTabIdx;\n\n    if (!tabIsVisible) {\n      const previousTabsWidth = getTabsWidth(tabsDimensions.slice(0, idx));\n      scrollContainerRef.current?.scrollTo({\n        left: previousTabsWidth,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const scrollPrev = () => {\n    scrollTabIntoView(firstVisibleTabIdx - 1);\n  };\n\n  const scrollNext = () => {\n    scrollTabIntoView(lastVisibleTabIdx + 1);\n  };\n\n  // Подскролливаем к выбранному табу\n  const checkedTabIdx = items.findIndex(getItemChecked);\n  React.useEffect(() => {\n    if (isScrollable) {\n      scrollTabIntoView(checkedTabIdx);\n    }\n  }, [checkedTabIdx, isScrollable]);\n\n  return (\n    <div className={cnTabsFitModeScrollWrapper()}>\n      {isScrollable && (\n        <>\n          {(['prev', 'next'] as const).map((buttonTo) => (\n            <Button\n              key={buttonTo}\n              view=\"clear\"\n              type=\"button\"\n              size=\"xs\"\n              onlyIcon\n              disabled={\n                buttonTo === 'prev'\n                  ? firstVisibleTabIdx === 0\n                  : lastVisibleTabIdx === items.length - 1\n              }\n              iconLeft={buttonTo === 'prev' ? IconArrowLeft : IconArrowRight}\n              className={cnTabsFitModeScrollWrapper('Button', { to: buttonTo })}\n              onClick={buttonTo === 'prev' ? scrollPrev : scrollNext}\n            />\n          ))}\n        </>\n      )}\n      <div\n        className={cnTabsFitModeScrollWrapper('Content')}\n        ref={scrollContainerRef}\n      >\n        {renderItemsList({\n          visibleIndexes: Array.from(Array(items.length).keys()),\n          getTabClassName: (idx) =>\n            cnTabsFitModeScrollWrapper('Tab', {\n              noMargin: idx === items.length - 1,\n            }),\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/__internal__/src/components/Tabs/Line/TabsLine.d.ts

@@ -7,5 +7,6 @@ export declare const TabsBorderLine: React.FC<{
 export declare const TabsRunningLine: React.FC<{
     linePosition: TabsPropLinePosition;
     activeTabIdx: number;
+    visibleIndexes?: number[];
     tabsDimensions: TabDimensions[];
 }>;

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

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"./TabsLine.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";var cnTabsLine=cn("TabsLine");export var TabsBorderLine=function(a){var b=a.linePosition;return React.createElement(TabsLine,{type:"border",linePosition:b,size:"100%"})};export var TabsRunningLine=function(a){var b,c,d=a.linePosition,e=a.activeTabIdx,f=a.tabsDimensions,g=f.slice(0,e),h=null!==(b=null===(c=f[e])||void 0===c?void 0:c.size)&&void 0!==b?b:0,i=getTabsWidth(g);return React.createElement(TabsLine,{type:"running",linePosition:d,size:h,offset:i})};var TabsLine=function(a){var b,c=a.type,d=a.linePosition,e=a.size,f=a.offset,g=void 0===f?"0px":f;return React.createElement("div",{className:cnTabsLine({type:c,position:d}),style:(b={},_defineProperty(b,"--line-length",formatCSSValue(e)),_defineProperty(b,"--line-offset",formatCSSValue(g)),b)})},formatCSSValue=function(a){return"number"==typeof a?"".concat(a,"px"):a};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"./TabsLine.css";import React,{useMemo}from"react";import{cn}from"../../../utils/bem";var cnTabsLine=cn("TabsLine");export var TabsBorderLine=function(a){var b=a.linePosition;return React.createElement(TabsLine,{type:"border",linePosition:b,size:"100%"})};export var TabsRunningLine=function(a){var b,c,d=a.linePosition,e=a.activeTabIdx,f=a.tabsDimensions,g=a.visibleIndexes,h=null!==(b=null===(c=f[e])||void 0===c?void 0:c.size)&&void 0!==b?b:0,i=useMemo(function(){return f.reduce(function(b,a,c){return b+(null!==g&&void 0!==g&&g.includes(c)&&c<e?a.size+a.gap:0)},0)},[f,g,e]);return React.createElement(TabsLine,{type:"running",linePosition:d,size:h,offset:i})};var TabsLine=function(a){var b,c=a.type,d=a.linePosition,e=a.size,f=a.offset,g=void 0===f?"0px":f;return React.createElement("div",{className:cnTabsLine({type:c,position:d}),style:(b={},_defineProperty(b,"--line-length",formatCSSValue(e)),_defineProperty(b,"--line-offset",formatCSSValue(g)),b)})},formatCSSValue=function(a){return"number"==typeof a?"".concat(a,"px"):a};
 //# sourceMappingURL=TabsLine.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsLine.js","names":["React","cn","getTabsWidth","cnTabsLine","TabsBorderLine","linePosition","TabsRunningLine","activeTabIdx","tabsDimensions","previousTabsDimensions","slice","size","offset","TabsLine","type","position","formatCSSValue","n"],"sources":["../../../../../../src/components/Tabs/Line/TabsLine.tsx"],"sourcesContent":["import './TabsLine.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabDimensions, TabsPropLinePosition } from '../types';\n\nconst cnTabsLine = cn('TabsLine');\n\nexport const TabsBorderLine: React.FC<{\n  linePosition: TabsPropLinePosition;\n}> = ({ linePosition }) => {\n  return <TabsLine type=\"border\" linePosition={linePosition} size=\"100%\" />;\n};\n\nexport const TabsRunningLine: React.FC<{\n  linePosition: TabsPropLinePosition;\n  activeTabIdx: number;\n  tabsDimensions: TabDimensions[];\n}> = ({ linePosition, activeTabIdx, tabsDimensions }) => {\n  const previousTabsDimensions = tabsDimensions.slice(0, activeTabIdx);\n  const size = tabsDimensions[activeTabIdx]?.size ?? 0;\n  const offset = getTabsWidth(previousTabsDimensions);\n\n  return (\n    <TabsLine\n      type=\"running\"\n      linePosition={linePosition}\n      size={size}\n      offset={offset}\n    />\n  );\n};\n\nconst TabsLine: React.FC<{\n  type: 'border' | 'running';\n  linePosition: TabsPropLinePosition;\n  size: number | string;\n  offset?: number | string;\n}> = ({ type, linePosition, size, offset = '0px' }) => (\n  <div\n    className={cnTabsLine({ type, position: linePosition })}\n    style={{\n      ['--line-length' as string]: formatCSSValue(size),\n      ['--line-offset' as string]: formatCSSValue(offset),\n    }}\n  />\n);\n\nconst formatCSSValue = (n: number | string) =>\n  typeof n === 'number' ? `${n}px` : n;\n"],"mappings":"mEAAA,uBAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBAGA,GAAMC,WAAU,CAAGF,EAAE,CAAC,UAAD,CAArB,CAEA,MAAO,IAAMG,eAEX,CAAG,WAAsB,IAAnBC,EAAmB,GAAnBA,YAAmB,CACzB,MAAO,qBAAC,QAAD,EAAU,IAAI,CAAC,QAAf,CAAwB,YAAY,CAAEA,CAAtC,CAAoD,IAAI,CAAC,MAAzD,EACR,CAJM,CAMP,MAAO,IAAMC,gBAIX,CAAG,WAAoD,SAAjDD,CAAiD,GAAjDA,YAAiD,CAAnCE,CAAmC,GAAnCA,YAAmC,CAArBC,CAAqB,GAArBA,cAAqB,CACjDC,CAAsB,CAAGD,CAAc,CAACE,KAAf,CAAqB,CAArB,CAAwBH,CAAxB,CADwB,CAEjDI,CAAI,qBAAGH,CAAc,CAACD,CAAD,CAAjB,qBAAG,EAA8BI,IAAjC,gBAAyC,CAFI,CAGjDC,CAAM,CAAGV,YAAY,CAACO,CAAD,CAH4B,CAKvD,MACE,qBAAC,QAAD,EACE,IAAI,CAAC,SADP,CAEE,YAAY,CAAEJ,CAFhB,CAGE,IAAI,CAAEM,CAHR,CAIE,MAAM,CAAEC,CAJV,EAOH,CAjBM,C,GAmBDC,SAKJ,CAAG,kBAAGC,CAAH,GAAGA,IAAH,CAAST,CAAT,GAASA,YAAT,CAAuBM,CAAvB,GAAuBA,IAAvB,KAA6BC,MAA7B,CAA6BA,CAA7B,YAAsC,KAAtC,SACH,4BACE,SAAS,CAAET,UAAU,CAAC,CAAEW,IAAI,CAAJA,CAAF,CAAQC,QAAQ,CAAEV,CAAlB,CAAD,CADvB,CAEE,KAAK,yBACF,eADE,CAC0BW,cAAc,CAACL,CAAD,CADxC,oBAEF,eAFE,CAE0BK,cAAc,CAACJ,CAAD,CAFxC,IAFP,EADG,C,CAUCI,cAAc,CAAG,SAACC,CAAD,QACR,QAAb,QAAOA,EAAP,WAA2BA,CAA3B,OAAmCA,CADd,C"}
+{"version":3,"file":"TabsLine.js","names":["React","useMemo","cn","cnTabsLine","TabsBorderLine","linePosition","TabsRunningLine","activeTabIdx","tabsDimensions","visibleIndexes","size","offset","reduce","a","v","index","includes","gap","TabsLine","type","position","formatCSSValue","n"],"sources":["../../../../../../src/components/Tabs/Line/TabsLine.tsx"],"sourcesContent":["import './TabsLine.css';\n\nimport React, { useMemo } from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { TabDimensions, TabsPropLinePosition } from '../types';\n\nconst cnTabsLine = cn('TabsLine');\n\nexport const TabsBorderLine: React.FC<{\n  linePosition: TabsPropLinePosition;\n}> = ({ linePosition }) => {\n  return <TabsLine type=\"border\" linePosition={linePosition} size=\"100%\" />;\n};\n\nexport const TabsRunningLine: React.FC<{\n  linePosition: TabsPropLinePosition;\n  activeTabIdx: number;\n  visibleIndexes?: number[];\n  tabsDimensions: TabDimensions[];\n}> = ({ linePosition, activeTabIdx, tabsDimensions, visibleIndexes }) => {\n  const size = tabsDimensions[activeTabIdx]?.size ?? 0;\n\n  const offset = useMemo(\n    () =>\n      tabsDimensions.reduce(\n        (a, v, index) =>\n          a +\n          (visibleIndexes?.includes(index) && index < activeTabIdx\n            ? v.size + v.gap\n            : 0),\n        0,\n      ),\n    [tabsDimensions, visibleIndexes, activeTabIdx],\n  );\n\n  return (\n    <TabsLine\n      type=\"running\"\n      linePosition={linePosition}\n      size={size}\n      offset={offset}\n    />\n  );\n};\n\nconst TabsLine: React.FC<{\n  type: 'border' | 'running';\n  linePosition: TabsPropLinePosition;\n  size: number | string;\n  offset?: number | string;\n}> = ({ type, linePosition, size, offset = '0px' }) => (\n  <div\n    className={cnTabsLine({ type, position: linePosition })}\n    style={{\n      ['--line-length' as string]: formatCSSValue(size),\n      ['--line-offset' as string]: formatCSSValue(offset),\n    }}\n  />\n);\n\nconst formatCSSValue = (n: number | string) =>\n  typeof n === 'number' ? `${n}px` : n;\n"],"mappings":"mEAAA,uBAEA,MAAOA,MAAP,EAAgBC,OAAhB,KAA+B,OAA/B,CAEA,OAASC,EAAT,0BAGA,GAAMC,WAAU,CAAGD,EAAE,CAAC,UAAD,CAArB,CAEA,MAAO,IAAME,eAEX,CAAG,WAAsB,IAAnBC,EAAmB,GAAnBA,YAAmB,CACzB,MAAO,qBAAC,QAAD,EAAU,IAAI,CAAC,QAAf,CAAwB,YAAY,CAAEA,CAAtC,CAAoD,IAAI,CAAC,MAAzD,EACR,CAJM,CAMP,MAAO,IAAMC,gBAKX,CAAG,WAAoE,SAAjED,CAAiE,GAAjEA,YAAiE,CAAnDE,CAAmD,GAAnDA,YAAmD,CAArCC,CAAqC,GAArCA,cAAqC,CAArBC,CAAqB,GAArBA,cAAqB,CACjEC,CAAI,qBAAGF,CAAc,CAACD,CAAD,CAAjB,qBAAG,EAA8BG,IAAjC,gBAAyC,CADoB,CAGjEC,CAAM,CAAGV,OAAO,CACpB,iBACEO,EAAc,CAACI,MAAf,CACE,SAACC,CAAD,CAAIC,CAAJ,CAAOC,CAAP,QACEF,EAAC,EACA,OAAAJ,CAAc,WAAdA,CAAA,EAAAA,CAAc,CAAEO,QAAhB,CAAyBD,CAAzB,GAAmCA,CAAK,CAAGR,CAA3C,CACGO,CAAC,CAACJ,IAAF,CAASI,CAAC,CAACG,GADd,CAEG,CAHH,CADH,CADF,CAME,CANF,CADF,CADoB,CAUpB,CAACT,CAAD,CAAiBC,CAAjB,CAAiCF,CAAjC,CAVoB,CAHiD,CAgBvE,MACE,qBAAC,QAAD,EACE,IAAI,CAAC,SADP,CAEE,YAAY,CAAEF,CAFhB,CAGE,IAAI,CAAEK,CAHR,CAIE,MAAM,CAAEC,CAJV,EAOH,CA7BM,C,GA+BDO,SAKJ,CAAG,kBAAGC,CAAH,GAAGA,IAAH,CAASd,CAAT,GAASA,YAAT,CAAuBK,CAAvB,GAAuBA,IAAvB,KAA6BC,MAA7B,CAA6BA,CAA7B,YAAsC,KAAtC,SACH,4BACE,SAAS,CAAER,UAAU,CAAC,CAAEgB,IAAI,CAAJA,CAAF,CAAQC,QAAQ,CAAEf,CAAlB,CAAD,CADvB,CAEE,KAAK,yBACF,eADE,CAC0BgB,cAAc,CAACX,CAAD,CADxC,oBAEF,eAFE,CAE0BW,cAAc,CAACV,CAAD,CAFxC,IAFP,EADG,C,CAUCU,cAAc,CAAG,SAACC,CAAD,QACR,QAAb,QAAOA,EAAP,WAA2BA,CAA3B,OAAmCA,CADd,C"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","forwardRef","useRefs","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","attributes","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","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","as","tabRef","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 { 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, attributes = {}, ...otherProps } = props;\n  return <TabsTab {...attributes} {...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    getItemAs,\n    getItemAttributes,\n    getItemRef,\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      as: getItemAs(item) || 'button',\n      tabRef: getItemRef(item),\n      attributes: getItemAttributes(item),\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 * 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","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","attributes","as","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","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","tabRef","Wrapper","direction","renderItemsList","withRunningLine","visibleIndexes","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 { 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, attributes = {}, as, ...otherProps } = props;\n  return <TabsTab {...attributes} {...otherProps} as={as} />;\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    getItemAs,\n    getItemAttributes,\n    getItemRef,\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      as: getItemAs(item) || 'button',\n      tabRef: getItemRef(item),\n      attributes: getItemAttributes(item),\n    });\n\n  const renderItemsList: RenderItemsListProp = ({\n    withRunningLine = true,\n    visibleIndexes,\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          visibleIndexes={visibleIndexes}\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 * from './types';\n"],"mappings":"6aAAA,mBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,OAAT,2BAEA,OAASC,cAAT,iDACA,OAASC,iBAAT,uDACA,OAASC,EAAT,uBACA,OACEC,gBADF,CAEEC,cAFF,CAGEC,kBAHF,iBAKA,OAASC,cAAT,CAAyBC,eAAzB,uBACA,OAASC,OAAT,qBACA,OAKEC,kBALF,CAMEC,uBANF,CAOEC,eAPF,CAQEC,eARF,eAYA,MAAO,IAAMC,OAAM,CAAGX,EAAE,CAAC,MAAD,CAAjB,CAEP,QAASY,kBAAT,CACEC,CADF,CAEsB,CACpB,GAAQC,EAAR,CAAqDD,CAArD,CAAQC,IAAR,GAAqDD,CAArD,CAAcE,UAAd,CAAcA,CAAd,YAA2B,EAA3B,GAA+BC,CAA/B,CAAqDH,CAArD,CAA+BG,EAA/B,CAAsCC,CAAtC,0BAAqDJ,CAArD,YACA,MAAO,qBAAC,OAAD,kBAAaE,CAAb,CAA6BE,CAA7B,EAAyC,EAAE,CAAED,CAA7C,GACR,CAED,GAAME,WAAU,CAAG,SAACL,CAAD,CAAmBM,CAAnB,CAAsD,OAyBnEhB,kBAAkB,CAACU,CAAD,CAzBiD,KAErEO,IAFqE,CAErEA,CAFqE,YAE9DX,eAF8D,GAGrEY,CAHqE,GAGrEA,SAHqE,CAIrEC,CAJqE,GAIrEA,KAJqE,KAKrEC,IALqE,CAKrEA,CALqE,YAK9Db,eAL8D,GAMrEc,CANqE,GAMrEA,KANqE,KAOrEC,YAPqE,CAOrEA,CAPqE,YAOtDjB,uBAPsD,OAQrEkB,OARqE,CAQrEA,CARqE,YAQ3DnB,kBAR2D,GASrEoB,CATqE,GASrEA,QATqE,CAUrEC,CAVqE,GAUrEA,WAVqE,CAWrEC,CAXqE,GAWrEA,SAXqE,CAYrEC,CAZqE,GAYrEA,iBAZqE,CAarEC,CAbqE,GAarEA,UAbqE,CAcrEC,CAdqE,GAcrEA,YAdqE,CAerEC,CAfqE,GAerEA,QAfqE,CAgBrEC,CAhBqE,GAgBrEA,QAhBqE,KAiBrEC,UAjBqE,CAiBzDC,CAjByD,YAiBxCxB,iBAjBwC,GAkBrEyB,CAlBqE,GAkBrEA,eAlBqE,CAmBrEC,CAnBqE,GAmBrEA,eAnBqE,CAoBrEC,CApBqE,GAoBrEA,gBApBqE,CAqBrEC,CArBqE,GAqBrEA,gBArBqE,CAsBrEC,CAtBqE,GAsBrEA,eAtBqE,CAuBrEC,CAvBqE,GAuBrEA,QAvBqE,CAwBlEzB,CAxBkE,0CA2BnCnB,cAAc,CAAC,CACjD0B,KAAK,CAAEA,CAAK,EAAI,IADiC,CAEjDmB,MAAM,CAAEX,CAFyC,CAGjDY,QAAQ,CAAEX,CAHuC,CAIjDY,QAAQ,GAJyC,CAAD,CA3BqB,CA2B/DC,CA3B+D,GA2B/DA,WA3B+D,CA2BlDC,CA3BkD,GA2BlDA,UA3BkD,CAkCjEC,CAAa,CAAG/C,gBAAgB,CAACwB,CAAD,CAlCiC,CAmCjEwB,CAAU,CAAqB,UAAlB,GAAAD,CAnCoD,CAoCjEE,CAAO,CAAGrD,OAAO,CAAiByB,CAAK,CAAC6B,MAAvB,CAA+B,CACpD7B,CADoD,CAEpDI,CAFoD,CAGpDuB,CAHoD,CAA/B,CApCgD,CA0CjEG,CAAc,CAAGrD,iBAAiB,CACtCmD,CADsC,CAEtC,SAACG,CAAD,cAAwB,CACtBjC,IAAI,kBAAEiC,CAAF,WAAEA,CAAF,QAAEA,CAAE,CAAGJ,CAAU,CAAG,cAAH,CAAoB,aAAjC,CAAJ,gBAAuD,CADrC,CAEtBK,GAAG,CAAED,CAAE,CACHE,QAAQ,CACNC,gBAAgB,CAACH,CAAD,CAAhB,CAAqBJ,CAAU,CAAG,cAAH,CAAoB,aAAnD,CADM,CAEN,EAFM,CADL,CAKH,CAPkB,CAAxB,CAFsC,CA1C+B,CAuDjEQ,CAAY,CAAGnC,CAAK,CAACoC,SAAN,CAAgBX,CAAhB,CAvDkD,CAyDjEZ,CAAU,CAAG,SACjBrB,CADiB,CAEjB6C,CAFiB,CAGjBC,CAHiB,QAKjBxB,EAAc,CAAC,CACbtB,IAAI,CAAJA,CADa,CAEbmB,QAAQ,CAAE,UAAa,QACrB0B,CADqB,WACrBA,CADqB,QACrBA,CAAO,EADc,CAErBb,CAAW,CAAChC,CAAD,CAAX,wBACD,CALY,CAMb+C,OAAO,CAAEd,CAAU,CAACjC,CAAD,CANN,CAObgD,KAAK,CAAE9B,CAAY,CAAClB,CAAD,CAAZ,CAAmBiD,QAAnB,EAPM,CAQbC,IAAI,CAAEpC,CAAW,CAACd,CAAD,CARJ,CASbmD,QAAQ,CAAE5B,CAAe,CAACvB,CAAD,CATZ,CAUboD,SAAS,CAAE3B,CAAgB,CAACzB,CAAD,CAVd,CAWbqD,QAAQ,CAAE7B,CAAe,CAACxB,CAAD,CAXZ,CAYbsD,SAAS,CAAE5B,CAAgB,CAAC1B,CAAD,CAZd,CAab4B,QAAQ,CAAEA,CAAQ,EAAID,CAAe,CAAC3B,CAAD,CAbxB,CAcba,QAAQ,CAARA,CAda,CAebP,IAAI,CAAJA,CAfa,CAgBbc,QAAQ,CAARA,CAhBa,CAiBb0B,gBAAgB,CAAhBA,CAjBa,CAkBb5C,EAAE,CAAEa,CAAS,CAACf,CAAD,CAAT,EAAmB,QAlBV,CAmBbuD,MAAM,CAAEtC,CAAU,CAACjB,CAAD,CAnBL,CAoBbC,UAAU,CAAEe,CAAiB,CAAChB,CAAD,CApBhB,CAAD,CALG,CAzDoD,CAiHjEwD,CAAO,CAAGpE,cAAc,CAAC8C,CAAD,CAAgBtB,CAAhB,CAjHyC,CAmHvE,MACE,0CACE,SAAS,CAAEf,MAAM,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQG,IAAI,CAAJA,CAAR,CAAcgD,SAAS,CAAEvB,CAAzB,CAAD,CAA2C,CAAC3B,CAAD,CAA3C,CADnB,CAEE,GAAG,CAAEF,CAFP,EAGMF,CAHN,EAKE,oBAAC,CAAD,EACE,OAAO,CAAEiC,CADX,CAEE,cAAc,CAAEE,CAFlB,CAGE,UAAU,CAAEjB,CAHd,CAIE,eAAe,CAxCwB,QAAvCqC,gBAAuC,YAC3CC,eAD2C,CAE3CC,CAF2C,GAE3CA,cAF2C,CAG3CC,CAH2C,GAG3CA,eAH2C,OAK3C,4BAAK,SAAS,CAAEhE,MAAM,CAAC,MAAD,CAAS,CAAE4D,SAAS,CAAEvB,CAAb,CAA4BvB,YAAY,CAAZA,CAA5B,CAAT,CAAtB,EACGH,CAAK,CAACsD,GAAN,CAAU,SAAC9D,CAAD,CAAO+D,CAAP,QACT,4BACE,GAAG,CAAE3B,CAAO,CAAC2B,CAAD,CADd,CAEE,GAAG,CAAE7C,CAAY,CAAClB,CAAD,CAFnB,CAGE,SAAS,CAAEH,MAAM,CAAC,KAAD,CAAQ,CAAE4D,SAAS,CAAEvB,CAAb,CAAR,CAAsC,QACrD2B,CADqD,WACrDA,CADqD,QACrDA,CAAe,CAAGE,CAAH,CADsC,CAAtC,CAHnB,EAOG1C,CAAU,CAACrB,CAAD,CAPb,CADS,CAAV,CADH,CAYG,oBAAmB,CAAC4B,CAApB,EACC,oBAAC,eAAD,EACE,cAAc,CAAEgC,CADlB,CAEE,YAAY,CAAEjD,CAFhB,CAGE,cAAc,CAAE2B,CAHlB,CAIE,YAAY,CAAEK,CAJhB,EAbJ,CAL2C,CAoCzC,CAKE,YAAY,CAAEzB,CALhB,CAME,cAAc,CAAEe,CANlB,CAOE,KAAK,CAAEzB,CAPT,CAQE,IAAI,CAAEF,CARR,EALF,CAeY,UAAT,GAAAG,CAAI,EAAmB,oBAAC,cAAD,EAAgB,YAAY,CAAEE,CAA9B,EAf1B,CAkBH,CAtID,CAwIA,MAAO,IAAMqD,KAAI,CAAGlF,UAAU,CAACsB,UAAD,CAAvB,CAEP"}

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

@@ -1,5 +1,6 @@
 import { IconComponent, IconPropSize } from '@consta/icons/Icon';
 import React from 'react';
+import { AsAttributes, AsTags } from "../../utils/types/AsTags";
 import { PropsWithAsAttributes } from "../../utils/types/PropsWithAsAttributes";
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 export declare type TabDimensions = {
@@ -13,9 +14,9 @@ export declare type TabsItemDefault = {
     rightSide?: React.ReactNode;
     leftSide?: React.ReactNode;
     disabled?: boolean;
-    as?: keyof JSX.IntrinsicElements;
+    as?: AsTags;
     ref?: React.RefObject<HTMLElement>;
-    attributes?: JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
+    attributes?: AsAttributes;
     /**
      * @deprecated since version 4.11.0 use leftIcon
      */
@@ -37,7 +38,7 @@ 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 TabsPropGetItemAs<ITEM> = (item: ITEM) => keyof JSX.IntrinsicElements | undefined;
+export declare type TabsPropGetItemAs<ITEM> = (item: ITEM) => AsTags | undefined;
 export declare type TabsPropGetItemAttributes<ITEM> = (item: ITEM) => TabsItemDefault['attributes'];
 export declare type TabsPropGetItemRef<ITEM> = (item: ITEM) => React.RefObject<HTMLElement> | undefined;
 export declare type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
@@ -103,7 +104,7 @@ export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesA
     getItemLabel: TabsPropGetItemLabel<ITEM>;
 });
 export declare type TabsComponent = <ITEM>(props: TabsProps<ITEM>) => React.ReactElement | null;
-export declare type TabsTabProps<AS extends keyof JSX.IntrinsicElements = 'button'> = PropsWithAsAttributes<{
+export declare type TabsTabProps<AS extends AsTags = 'button'> = PropsWithAsAttributes<{
     onChange: React.MouseEventHandler;
     checked: boolean;
     size: TabsPropSize;
@@ -114,7 +115,7 @@ export declare type TabsTabProps<AS extends keyof JSX.IntrinsicElements = 'butto
     tabRef?: React.RefObject<HTMLElement>;
     renderInDropdown?: boolean;
 } & Omit<TabsItemDefault, 'label' | 'ref' | 'attributes'>, AS>;
-export declare type TabsTabComponent = <AS extends keyof JSX.IntrinsicElements = 'button'>(props: TabsTabProps<AS>) => React.ReactElement | null;
+export declare type TabsTabComponent = <AS extends AsTags = 'button'>(props: TabsTabProps<AS>) => React.ReactElement | null;
 export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
     items: ITEM[];
     renderItem: (item: ITEM, onClick: () => void, renderInDropdown?: boolean) => React.ReactNode;
@@ -125,6 +126,7 @@ export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAt
 } & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
 export declare type TabsMoreItemsComponent = <ITEM>(props: TabsMoreItemsProps<ITEM>) => React.ReactElement | null;
 export declare type RenderItemsListProp = (props: {
+    visibleIndexes?: number[];
     withRunningLine?: boolean;
     getTabClassName?: (idx: number) => string | undefined;
 }) => React.ReactNode;