@consta/uikit 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["IconArrowFirst","IconArrowLast","IconArrowLeft","IconArrowRight","defaultGetItemLabel","item","label","defaultGetItemKey","key","defaultGetItemClickable","clickable","defaultGetItemAs","as","defaultGetItemAttributes","attributes","defaultGetItemRef","ref","defaultGetItemOnClick","onClick","withDefaultGetters","props","getItemLabel","getItemKey","getItemClickable","getItemOnClick","getItemAs","getItemAttributes","getItemRef","getMinVisibleCount","showFirstPage","showLastPage","range","start","end","Array","from","length","Math","abs","map","_el","i","floor","generateArr","params","count","page","visibleCountProp","visibleCount","minVisibleCount","min","max","boundaryStart","boundaryEnd","res","siblingsStart","siblingsEnd","push","getPagesArray","totalPages","currentPage","rest","el","toString","active","paginationArrowIconsMap","first","previous","next","last","getListValue"],"sources":["../../../../../src/components/Pagination/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport { IconArrowFirst } from '@consta/icons/IconArrowFirst';\nimport { IconArrowLast } from '@consta/icons/IconArrowLast';\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\n\nimport {\n  PaginationArrowTypes,\n  PaginationBaseItemDefault,\n  PaginationBaseProps,\n  PaginationItem,\n  PaginationPropGetItemAs,\n  PaginationPropGetItemAttributes,\n  PaginationPropGetItemClickable,\n  PaginationPropGetItemKey,\n  PaginationPropGetItemLabel,\n  PaginationPropGetItemOnClick,\n  PaginationPropGetItemRef,\n} from './types';\n\nexport const defaultGetItemLabel: PaginationPropGetItemLabel<\n  PaginationBaseItemDefault\n> = (item) => item.label;\nexport const defaultGetItemKey: PaginationPropGetItemKey<\n  PaginationBaseItemDefault\n> = (item) => item.key;\nexport const defaultGetItemClickable: PaginationPropGetItemClickable<\n  PaginationBaseItemDefault\n> = (item) => item.clickable;\nconst defaultGetItemAs: PaginationPropGetItemAs<PaginationBaseItemDefault> = (\n  item,\n) => item.as;\nconst defaultGetItemAttributes: PaginationPropGetItemAttributes<\n  PaginationBaseItemDefault\n> = (item) => item.attributes;\nconst defaultGetItemRef: PaginationPropGetItemRef<PaginationBaseItemDefault> = (\n  item,\n) => item.ref;\nconst defaultGetItemOnClick: PaginationPropGetItemOnClick<\n  PaginationBaseItemDefault\n> = (item) => item.onClick;\n\nexport const withDefaultGetters = (props: PaginationBaseProps) => ({\n  ...props,\n  getItemLabel: props.getItemLabel ?? defaultGetItemLabel,\n  getItemKey: props.getItemKey ?? defaultGetItemKey,\n  getItemClickable: props.getItemClickable ?? defaultGetItemClickable,\n  getItemOnClick: props.getItemOnClick ?? defaultGetItemOnClick,\n  getItemAs: props.getItemAs ?? defaultGetItemAs,\n  getItemAttributes: props.getItemAttributes ?? defaultGetItemAttributes,\n  getItemRef: props.getItemRef ?? defaultGetItemRef,\n});\n\nconst getMinVisibleCount = (showFirstPage: boolean, showLastPage: boolean) => {\n  if (showFirstPage || showLastPage) {\n    return 5;\n  }\n  if (showFirstPage && showLastPage) {\n    return 7;\n  }\n\n  return 3;\n};\n\nconst range = (start: number, end: number) =>\n  Array.from({ length: Math.abs(end - start + 1) }).map((_el, i) =>\n    Math.floor(start + i),\n  );\n\nconst generateArr = (params: {\n  page: number;\n  count: number;\n  visibleCount: number;\n  showFirstPage?: boolean;\n  showLastPage?: boolean;\n}) => {\n  const {\n    count,\n    page,\n    showFirstPage = false,\n    showLastPage = false,\n    visibleCount: visibleCountProp,\n  } = params;\n\n  let visibleCount = visibleCountProp;\n\n  const minVisibleCount = getMinVisibleCount(showFirstPage, showLastPage);\n\n  if (minVisibleCount >= count) {\n    visibleCount = count;\n  } else {\n    visibleCount = Math.min(count, Math.max(visibleCountProp, minVisibleCount));\n  }\n\n  const boundaryStart = showFirstPage ? 2 : 0;\n  const boundaryEnd = showLastPage ? 2 : 0;\n\n  const res = [];\n\n  const siblingsStart =\n    Math.floor((visibleCount - boundaryEnd - boundaryStart) / 2) || 0;\n  const siblingsEnd =\n    Math.floor((visibleCount - boundaryEnd - boundaryStart - 1) / 2) || 0;\n\n  let start = 1;\n  let end = count;\n\n  if (visibleCount - boundaryEnd >= page + siblingsEnd) {\n    end = visibleCount - (showLastPage ? 2 : 0);\n  } else if (page - siblingsStart > count - visibleCount + boundaryStart) {\n    start = count - visibleCount + (showFirstPage ? 3 : 1);\n  } else {\n    start = page - siblingsStart;\n    end = page + siblingsEnd;\n  }\n\n  if (showFirstPage && start !== 1) {\n    res.push(1, '...');\n  }\n  res.push(...range(Math.floor(start), Math.floor(end)));\n\n  if (showLastPage && end !== count) {\n    res.push('...', count);\n  }\n\n  return res;\n};\n\nexport const getPagesArray = (params: {\n  currentPage: number;\n  totalPages: number;\n  visibleCount: number;\n  showFirstPage?: boolean;\n  showLastPage?: boolean;\n}): PaginationItem[] => {\n  const { totalPages, currentPage, ...rest } = params;\n\n  const count = Math.max(totalPages, 1);\n  const page = Math.min(count, Math.max(1, currentPage));\n\n  return generateArr({ page, count, ...rest }).map((el, i) => {\n    return {\n      key: typeof el === 'string' ? totalPages + i : el,\n      label: el.toString(),\n      page: typeof el === 'string' ? i : el,\n      active: typeof el === 'number' ? el === page : false,\n      clickable: typeof el !== 'number',\n    };\n  });\n};\n\nexport const paginationArrowIconsMap: Record<\n  PaginationArrowTypes,\n  IconComponent\n> = {\n  first: IconArrowFirst,\n  previous: IconArrowLeft,\n  next: IconArrowRight,\n  last: IconArrowLast,\n};\n\nexport const getListValue = (page: number): PaginationItem => ({\n  key: page,\n  page,\n  label: page.toString(),\n});\n"],"mappings":"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"}
+{"version":3,"file":"helpers.js","names":["IconArrowFirst","IconArrowLast","IconArrowLeft","IconArrowRight","range","defaultGetItemLabel","item","label","defaultGetItemKey","key","defaultGetItemClickable","clickable","firstPageSeparator","lastPageSeparator","pageSeparatorLabel","guardCurrentPage","currentPage","totalPages","Math","floor","max","min","getPagesArrayByVisibleCount","visibleCountProp","showFirstPage","showLastPage","visibleCount","page","visibleSegmentStartToCenter","ceil","visibleSegmentEndToCenter","slideStart","map","i","el","toString","getPagesArrayByWidth","currentPageArg","gap","buttonPadding","buttonMinWidth","maxSymbolSize","totalWidth","w","direction","leftIndex","rightIndex","pages","getButtonWidth","withGap","length","add","buttonWidth","push","unshift","moreButtonWidth","firstButtonWidth","lastButtonWidth","isAddFirstPage","isAddlastPage","slicedArray","array","slice","reduce","previous","currentValue","returned","getPagesArray","paginationArrowIconsMap","first","next","last"],"sources":["../../../../../src/components/Pagination/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport { IconArrowFirst } from '@consta/icons/IconArrowFirst';\nimport { IconArrowLast } from '@consta/icons/IconArrowLast';\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\n\nimport { range } from '##/utils/array';\n\nimport {\n  PaginationArrowTypes,\n  PaginationBaseItemDefault,\n  PaginationItem,\n  PaginationPropGetItemClickable,\n  PaginationPropGetItemKey,\n  PaginationPropGetItemLabel,\n} from './types';\n\nexport const defaultGetItemLabel: PaginationPropGetItemLabel<\n  PaginationBaseItemDefault\n> = (item) => item.label;\nexport const defaultGetItemKey: PaginationPropGetItemKey<\n  PaginationBaseItemDefault\n> = (item) => item.key;\nexport const defaultGetItemClickable: PaginationPropGetItemClickable<\n  PaginationBaseItemDefault\n> = (item) => item.clickable ?? true;\n\nexport const firstPageSeparator = '<_';\nexport const lastPageSeparator = '_>';\nexport const pageSeparatorLabel = '...';\nexport const guardCurrentPage = (\n  currentPage: number | undefined,\n  totalPages: number,\n) => Math.floor(Math.max(1, Math.min(currentPage || 0, totalPages)));\n\nexport const getPagesArrayByVisibleCount = (\n  currentPage: number,\n  totalPages: number,\n  visibleCountProp: number,\n  showFirstPage?: boolean,\n  showLastPage?: boolean,\n): PaginationItem[] => {\n  const visibleCount = Math.floor(Math.min(visibleCountProp, totalPages));\n  const page = guardCurrentPage(currentPage, totalPages);\n  const visibleSegmentStartToCenter = Math.ceil(visibleCount / 2);\n  const visibleSegmentEndToCenter = visibleCount - visibleSegmentStartToCenter;\n  const slideStart = Math.max(0, page - visibleSegmentStartToCenter);\n\n  return range(visibleCount).map((i) => {\n    const el =\n      i +\n      slideStart +\n      1 -\n      Math.max(0, page + visibleSegmentEndToCenter - totalPages);\n\n    if (visibleCount >= 5 && visibleCount < totalPages) {\n      if (showFirstPage && i === 0 && page - visibleSegmentStartToCenter > 0) {\n        return {\n          key: 1,\n          label: '1',\n          clickable: true,\n        };\n      }\n      if (showFirstPage && i === 1 && page - visibleSegmentStartToCenter > 0) {\n        return {\n          key: firstPageSeparator,\n          label: pageSeparatorLabel,\n          clickable: false,\n        };\n      }\n      if (\n        showLastPage &&\n        i === visibleCount - 1 &&\n        page + visibleSegmentEndToCenter < totalPages\n      ) {\n        return {\n          key: totalPages,\n          label: totalPages.toString(),\n          clickable: true,\n        };\n      }\n      if (\n        showLastPage &&\n        i === visibleCount - 2 &&\n        page + visibleSegmentEndToCenter < totalPages\n      ) {\n        return {\n          key: lastPageSeparator,\n          label: pageSeparatorLabel,\n          clickable: false,\n        };\n      }\n    }\n\n    return {\n      key: el,\n      label: el.toString(),\n      clickable: true,\n    };\n  });\n};\n\ntype GetPagesArray = (\n  currentPage: number,\n  totalPages: number,\n  visibleCount: number,\n  showFirstPage: boolean,\n  showLastPage: boolean,\n  gap: number,\n  buttonPadding: number,\n  buttonMinWidth: number,\n  maxSymbolSize: number,\n  totalWidth: number,\n) => PaginationItem[];\n\ntype GetPagesArrayByWidth = (\n  currentPage: number,\n  totalPages: number,\n  showFirstPage: boolean,\n  showLastPage: boolean,\n  gap: number,\n  buttonPadding: number,\n  buttonMinWidth: number,\n  maxSymbolSize: number,\n  totalWidth: number,\n) => PaginationItem[];\n\nexport const getPagesArrayByWidth: GetPagesArrayByWidth = (\n  currentPageArg,\n  totalPages,\n  showFirstPage,\n  showLastPage,\n  gap: number,\n  buttonPadding: number,\n  buttonMinWidth: number,\n  maxSymbolSize: number,\n  totalWidth: number,\n) => {\n  const currentPage = guardCurrentPage(currentPageArg, totalPages);\n\n  let w = totalWidth;\n  // направлеине добавления кнопки, true - влево, false - вправо\n  let direction = false;\n  // индекс добавляемой кнопки относительно от выбранной\n  let leftIndex = 0;\n  let rightIndex = 1;\n  let pages: (PaginationItem & { buttonWidth: number })[] = [];\n\n  const getButtonWidth = (label: number, withGap: boolean) => {\n    return (\n      Math.max(\n        label.toString().length * maxSymbolSize + buttonPadding,\n        buttonMinWidth,\n      ) + (withGap ? gap : 0)\n    );\n  };\n\n  while (w > 0 && pages.length < totalPages) {\n    const add = direction ? currentPage + rightIndex : currentPage - leftIndex;\n\n    const buttonWidth: number = getButtonWidth(add, Boolean(pages.length));\n\n    if (w - buttonWidth >= 0 && add <= totalPages && add >= 1) {\n      const el = {\n        key: add,\n        label: add.toString(),\n        clickable: true,\n        buttonWidth,\n      };\n\n      if (direction) {\n        pages.push(el);\n        rightIndex += 1;\n      } else {\n        pages.unshift(el);\n        leftIndex += 1;\n      }\n    }\n    direction = !direction;\n\n    w -= add <= totalPages && add >= 1 ? buttonWidth : 0;\n  }\n\n  if ((showFirstPage || showLastPage) && pages.length >= 5) {\n    const moreButtonWidth = getButtonWidth(1, true);\n    const firstButtonWidth = getButtonWidth(1, true);\n    const lastButtonWidth = getButtonWidth(totalPages, true);\n\n    let isAddFirstPage = false;\n    let isAddlastPage = false;\n\n    if (showFirstPage && pages[0].key !== 1) {\n      let array = [...pages];\n\n      while (array.length > 3) {\n        if (array[0].key === currentPage) {\n          break;\n        }\n\n        const slicedArray = array.slice(1);\n\n        if (\n          slicedArray\n            .map((el) => el.buttonWidth)\n            .reduce((previous, currentValue) => previous + currentValue) +\n            firstButtonWidth +\n            moreButtonWidth <=\n          totalWidth\n        ) {\n          isAddFirstPage = true;\n          pages = [...slicedArray];\n          break;\n        }\n\n        array = slicedArray;\n      }\n    }\n\n    if (showLastPage && pages[pages.length - 1].key !== totalPages) {\n      let array = [...pages];\n\n      while (array.length > 3) {\n        if (array[array.length - 1].key === totalPages) {\n          break;\n        }\n\n        const slicedArray = array.slice(0, -1);\n\n        if (\n          slicedArray\n            .map((el) => el.buttonWidth)\n            .reduce((previous, currentValue) => previous + currentValue) +\n            lastButtonWidth +\n            moreButtonWidth +\n            (isAddFirstPage ? firstButtonWidth + moreButtonWidth : 0) <=\n          totalWidth\n        ) {\n          isAddlastPage = true;\n          pages = [...slicedArray];\n          break;\n        }\n\n        array = slicedArray;\n      }\n    }\n\n    pages = [\n      ...(isAddFirstPage\n        ? [\n            {\n              key: 1,\n              label: '1',\n              clickable: true,\n              buttonWidth: firstButtonWidth,\n            },\n            {\n              key: firstPageSeparator,\n              label: pageSeparatorLabel,\n              buttonWidth: moreButtonWidth,\n              clickable: false,\n            },\n          ]\n        : []),\n      ...pages,\n      ...(isAddlastPage\n        ? [\n            {\n              key: lastPageSeparator,\n              label: pageSeparatorLabel,\n              buttonWidth: moreButtonWidth,\n              clickable: false,\n            },\n            {\n              key: totalPages,\n              label: totalPages.toString(),\n              clickable: true,\n              buttonWidth: firstButtonWidth,\n            },\n          ]\n        : []),\n    ];\n  }\n\n  const returned: PaginationItem[] = pages.map(({ key, label, clickable }) => ({\n    key,\n    label,\n    clickable,\n  }));\n\n  return returned;\n};\n\nexport const getPagesArray: GetPagesArray = (\n  currentPage,\n  totalPages = 1,\n  visibleCount,\n  showFirstPage,\n  showLastPage,\n  gap,\n  buttonPadding,\n  buttonMinWidth,\n  maxSymbolSize,\n  totalWidth,\n) => {\n  return visibleCount\n    ? getPagesArrayByVisibleCount(\n        currentPage,\n        totalPages,\n        visibleCount,\n        showFirstPage,\n        showLastPage,\n      )\n    : getPagesArrayByWidth(\n        currentPage,\n        totalPages,\n        showFirstPage,\n        showLastPage,\n        gap,\n        buttonPadding,\n        buttonMinWidth,\n        maxSymbolSize,\n        totalWidth,\n      );\n};\n\nexport const paginationArrowIconsMap: Record<\n  PaginationArrowTypes,\n  IconComponent\n> = {\n  first: IconArrowFirst,\n  previous: IconArrowLeft,\n  next: IconArrowRight,\n  last: IconArrowLast,\n};\n"],"mappings":"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"}

package/__internal__/src/components/Pagination/index.d.ts

@@ -1,2 +1 @@
 export * from './Pagination';
-export * from './PaginationBase';

package/__internal__/src/components/Pagination/index.js

@@ -1,2 +1,2 @@
-export*from"./Pagination";export*from"./PaginationBase";
+export*from"./Pagination";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Pagination/index.ts"],"sourcesContent":["export * from './Pagination';\nexport * from './PaginationBase';\n"],"mappings":"AAAA,0BACA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Pagination/index.ts"],"sourcesContent":["export * from './Pagination';\n"],"mappings":"AAAA"}

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

@@ -21,7 +21,7 @@ export declare type PaginationPropOnItemClick<ITEM> = (item: ITEM, params: {
     e: React.MouseEvent;
 }) => void;
 export declare type PaginationPropOnChange<ITEM> = (value: ITEM, params: {
-    e: React.MouseEvent | React.KeyboardEvent;
+    e: React.MouseEvent | KeyboardEvent;
 }) => void;
 export declare type PaginationPropArrow = boolean | IconComponent | {
     label?: string;
@@ -42,41 +42,31 @@ declare type PaginationArrowsProps = {
     arrows?: never;
     hotKeys?: never;
 });
-declare type PaginationBaseArrowsProps = {
-    outerMostArrows?: [PaginationBasePropArrow?, PaginationBasePropArrow?];
-} & ({
-    arrows: [PaginationBasePropArrow?, PaginationBasePropArrow?];
-    hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];
-} | {
-    arrows?: never;
-    hotKeys?: never;
-});
-declare type Props<ITEM> = {
-    form?: PaginationPropForm;
-    size?: PaginationPropSize;
-    containerEventListener?: HTMLElement | Window;
-    value?: ITEM;
-    items?: ITEM extends number ? number : ITEM[];
-    onChange?: PaginationPropOnChange<ITEM>;
+export declare type PaginationItem = {
+    key: string | number;
+    label: string;
+    clickable: boolean;
 };
 export declare type PaginationProps<TYPE extends PaginationPropType> = PropsWithHTMLAttributes<{
     type?: TYPE;
     showFirstPage?: boolean;
     showLastPage?: boolean;
     visibleCount?: number;
-} & Props<number>, HTMLDivElement> & PaginationArrowsProps & (TYPE extends 'input' ? {
+    form?: PaginationPropForm;
+    size?: PaginationPropSize;
+    containerEventListener?: HTMLElement | Window;
+    value?: number;
+    items?: number;
+    onChange?: PaginationPropOnChange<number>;
+    getItemAs?: PaginationPropGetItemAs<PaginationItem>;
+    getItemAttributes?: PaginationPropGetItemAttributes<PaginationItem>;
+    getItemRef?: PaginationPropGetItemRef<PaginationItem>;
+}, HTMLDivElement> & PaginationArrowsProps & (TYPE extends 'input' ? {
     getTotalLabel?: (pages: number) => string | number;
 } : {
     getTotalLabel?: never;
 });
 export declare type PaginationComponent = <TYPE extends PaginationPropType>(props: PaginationProps<TYPE>) => React.ReactElement | null;
-export declare type PaginationItem = {
-    key: number;
-    label: string;
-    active?: boolean;
-    clickable?: boolean;
-    page: number;
-};
 export declare type PaginationBaseItemDefault = {
     key: string | number;
     label?: string;
@@ -95,19 +85,13 @@ export declare type PaginationPropGetItemRef<ITEM> = (item: ITEM) => PaginationB
 export declare type PaginationPropGetItemOnClick<ITEM> = (item: ITEM) => PaginationBaseItemDefault['onClick'];
 declare type Mappers<ITEM = PaginationBaseItemDefault> = {
     getItemLabel?: PaginationPropGetItemLabel<ITEM>;
-    getItemKey?: PaginationPropGetItemKey<ITEM>;
+    getItemKey: PaginationPropGetItemKey<ITEM>;
     getItemAs?: PaginationPropGetItemAs<ITEM>;
     getItemAttributes?: PaginationPropGetItemAttributes<ITEM>;
     getItemRef?: PaginationPropGetItemRef<ITEM>;
     getItemClickable?: PaginationPropGetItemClickable<ITEM>;
     getItemOnClick?: PaginationPropGetItemOnClick<ITEM>;
 };
-export declare type PaginationBaseProps<ITEM = PaginationBaseItemDefault> = PropsWithHTMLAttributes<Mappers<ITEM> & Props<ITEM> & PaginationBaseArrowsProps & (ITEM extends {
-    key: PaginationBaseItemDefault['key'];
-} ? {} : {
-    getItemKey: PaginationPropGetItemKey<ITEM>;
-}), HTMLDivElement>;
-export declare type PaginationBaseComponent = <ITEM = PaginationBaseItemDefault>(props: PaginationBaseProps<ITEM>) => React.ReactElement | null;
 export declare type PaginationArrowProps = PropsWithHTMLAttributes<{
     icon?: IconComponent;
     form?: PaginationPropForm;
@@ -139,10 +123,6 @@ export declare type PaginationListProps<ITEM> = PropsWithHTMLAttributesAndRef<{
     items: ITEM[];
     value?: ITEM;
     onItemClick?: PaginationPropOnItemClick<ITEM>;
-}, HTMLDivElement> & Mappers<ITEM> & (ITEM extends {
-    label: string;
-} ? {} : {
-    getItemKey: PaginationPropGetItemKey<ITEM>;
-});
+}, HTMLDivElement> & Mappers<ITEM>;
 export declare type PaginationListComponent = <ITEM extends PaginationBaseItemDefault>(props: PaginationListProps<ITEM>) => React.ReactElement | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["paginationPropForm","paginationPropFormDefault","paginationPropSize","paginationPropSizeDefault","paginationPropType","paginationPropTypeDefault"],"sources":["../../../../../src/components/Pagination/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\nimport {\n  PropsWithHTMLAttributes,\n  PropsWithHTMLAttributesAndRef,\n} from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const paginationPropForm = ['default', 'brick', 'round'] as const;\nexport type PaginationPropForm = typeof paginationPropForm[number];\nexport const paginationPropFormDefault: PaginationPropForm =\n  paginationPropForm[0];\n\nexport const paginationPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type PaginationPropSize = typeof paginationPropSize[number];\nexport const paginationPropSizeDefault: PaginationPropSize =\n  paginationPropSize[0];\n\nexport const paginationPropType = ['default', 'input'] as const;\nexport type PaginationPropType = typeof paginationPropType[number];\nexport const paginationPropTypeDefault: PaginationPropType =\n  paginationPropType[0];\n\nexport type PaginationArrowTypes = 'first' | 'previous' | 'next' | 'last';\n\nexport type PaginationPropHotKey = { label: string; keys: string[] };\n\nexport type PaginationPropOnItemClick<ITEM> = (\n  item: ITEM,\n  params: { e: React.MouseEvent },\n) => void;\n\nexport type PaginationPropOnChange<ITEM> = (\n  value: ITEM,\n  params: { e: React.MouseEvent | React.KeyboardEvent },\n) => void;\n\n// ARROWS\n\nexport type PaginationPropArrow =\n  | boolean\n  | IconComponent\n  | {\n      label?: string;\n      icon?: IconComponent;\n    };\n\nexport type PaginationBasePropArrow =\n  | false\n  | {\n      label?: string;\n      disabled?: boolean;\n      icon?: IconComponent;\n      onClick?: React.MouseEventHandler;\n    };\n\ntype PaginationArrowsProps = {\n  outerMostArrows?: [PaginationPropArrow?, PaginationPropArrow?];\n} & (\n  | {\n      arrows: [PaginationPropArrow?, PaginationPropArrow?];\n      hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n    }\n  | {\n      arrows?: never;\n      hotKeys?: never;\n    }\n);\n\ntype PaginationBaseArrowsProps = {\n  outerMostArrows?: [PaginationBasePropArrow?, PaginationBasePropArrow?];\n} & (\n  | {\n      arrows: [PaginationBasePropArrow?, PaginationBasePropArrow?];\n      hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n    }\n  | {\n      arrows?: never;\n      hotKeys?: never;\n    }\n);\n\ntype Props<ITEM> = {\n  form?: PaginationPropForm;\n  size?: PaginationPropSize;\n  containerEventListener?: HTMLElement | Window;\n  value?: ITEM;\n  items?: ITEM extends number ? number : ITEM[];\n  onChange?: PaginationPropOnChange<ITEM>;\n};\n\nexport type PaginationProps<TYPE extends PaginationPropType> =\n  PropsWithHTMLAttributes<\n    {\n      type?: TYPE;\n      showFirstPage?: boolean;\n      showLastPage?: boolean;\n      visibleCount?: number;\n    } & Props<number>,\n    HTMLDivElement\n  > &\n    PaginationArrowsProps &\n    (TYPE extends 'input'\n      ? { getTotalLabel?: (pages: number) => string | number }\n      : {\n          getTotalLabel?: never;\n        });\n\nexport type PaginationComponent = <TYPE extends PaginationPropType>(\n  props: PaginationProps<TYPE>,\n) => React.ReactElement | null;\n\nexport type PaginationItem = {\n  key: number;\n  label: string;\n  active?: boolean;\n  clickable?: boolean;\n  page: number;\n};\n\nexport type PaginationBaseItemDefault = {\n  key: string | number;\n  label?: string;\n  as?: AsTags;\n  ref?: React.RefObject<HTMLElement>;\n  clickable?: boolean;\n  attributes?: AsAttributes;\n  onClick?: React.MouseEventHandler;\n};\n\nexport type PaginationPropGetItemKey<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['key'];\nexport type PaginationPropGetItemLabel<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['label'];\nexport type PaginationPropGetItemClickable<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['clickable'];\nexport type PaginationPropGetItemAs<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['as'];\nexport type PaginationPropGetItemAttributes<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['attributes'];\nexport type PaginationPropGetItemRef<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['ref'];\nexport type PaginationPropGetItemOnClick<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['onClick'];\n\ntype Mappers<ITEM = PaginationBaseItemDefault> = {\n  getItemLabel?: PaginationPropGetItemLabel<ITEM>;\n  getItemKey?: PaginationPropGetItemKey<ITEM>;\n  getItemAs?: PaginationPropGetItemAs<ITEM>;\n  getItemAttributes?: PaginationPropGetItemAttributes<ITEM>;\n  getItemRef?: PaginationPropGetItemRef<ITEM>;\n  getItemClickable?: PaginationPropGetItemClickable<ITEM>;\n  getItemOnClick?: PaginationPropGetItemOnClick<ITEM>;\n};\n\nexport type PaginationBaseProps<ITEM = PaginationBaseItemDefault> =\n  PropsWithHTMLAttributes<\n    Mappers<ITEM> &\n      Props<ITEM> &\n      PaginationBaseArrowsProps &\n      (ITEM extends { key: PaginationBaseItemDefault['key'] }\n        ? {}\n        : {\n            getItemKey: PaginationPropGetItemKey<ITEM>;\n          }),\n    HTMLDivElement\n  >;\n\nexport type PaginationBaseComponent = <ITEM = PaginationBaseItemDefault>(\n  props: PaginationBaseProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type PaginationArrowProps = PropsWithHTMLAttributes<\n  {\n    icon?: IconComponent;\n    form?: PaginationPropForm;\n    size?: PaginationPropSize;\n    disabled?: boolean;\n    orientation?: 'start' | 'end';\n    label?: string;\n    caption?: string;\n  },\n  HTMLButtonElement\n>;\n\nexport type PaginationItemProps<AS extends AsTags = 'button'> =\n  PropsWithAsAttributes<\n    {\n      form?: PaginationPropForm;\n      size?: PaginationPropSize;\n      label?: string;\n      active?: boolean;\n      clickable?: boolean;\n    },\n    AS\n  >;\n\nexport type PaginationItemComponent = <AS extends AsTags = 'button'>(\n  props: PaginationItemProps<AS>,\n) => React.ReactElement | null;\n\nexport type PaginationNumberInputProps = PropsWithHTMLAttributes<\n  {\n    value?: number;\n    onChange?: PaginationPropOnChange<number>;\n    form?: PaginationPropForm;\n    size?: PaginationPropSize;\n    total: number;\n    getTotalLabel?: (pages: number) => string | number;\n  },\n  HTMLDivElement\n>;\n\nexport type PaginationListProps<ITEM> = PropsWithHTMLAttributesAndRef<\n  {\n    form?: PaginationPropForm;\n    size?: PaginationPropSize;\n    items: ITEM[];\n    value?: ITEM;\n    onItemClick?: PaginationPropOnItemClick<ITEM>;\n  },\n  HTMLDivElement\n> &\n  Mappers<ITEM> &\n  (ITEM extends { label: string }\n    ? {}\n    : {\n        getItemKey: PaginationPropGetItemKey<ITEM>;\n      });\n\nexport type PaginationListComponent = <ITEM extends PaginationBaseItemDefault>(\n  props: PaginationListProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAUA,MAAO,IAAMA,mBAAkB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAqB,OAArB,CAA3B,CAEP,MAAO,IAAMC,0BAA6C,CACxDD,kBAAkB,CAAC,CAAD,CADb,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAA3B,CAEP,MAAO,IAAMC,0BAA6C,CACxDD,kBAAkB,CAAC,CAAD,CADb,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAA3B,CAEP,MAAO,IAAMC,0BAA6C,CACxDD,kBAAkB,CAAC,CAAD,CADb"}
+{"version":3,"file":"types.js","names":["paginationPropForm","paginationPropFormDefault","paginationPropSize","paginationPropSizeDefault","paginationPropType","paginationPropTypeDefault"],"sources":["../../../../../src/components/Pagination/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\nimport {\n  PropsWithHTMLAttributes,\n  PropsWithHTMLAttributesAndRef,\n} from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const paginationPropForm = ['default', 'brick', 'round'] as const;\nexport type PaginationPropForm = typeof paginationPropForm[number];\nexport const paginationPropFormDefault: PaginationPropForm =\n  paginationPropForm[0];\n\nexport const paginationPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type PaginationPropSize = typeof paginationPropSize[number];\nexport const paginationPropSizeDefault: PaginationPropSize =\n  paginationPropSize[0];\n\nexport const paginationPropType = ['default', 'input'] as const;\nexport type PaginationPropType = typeof paginationPropType[number];\nexport const paginationPropTypeDefault: PaginationPropType =\n  paginationPropType[0];\n\nexport type PaginationArrowTypes = 'first' | 'previous' | 'next' | 'last';\n\nexport type PaginationPropHotKey = { label: string; keys: string[] };\n\nexport type PaginationPropOnItemClick<ITEM> = (\n  item: ITEM,\n  params: { e: React.MouseEvent },\n) => void;\n\nexport type PaginationPropOnChange<ITEM> = (\n  value: ITEM,\n  params: { e: React.MouseEvent | KeyboardEvent },\n) => void;\n\n// ARROWS\n\nexport type PaginationPropArrow =\n  | boolean\n  | IconComponent\n  | {\n      label?: string;\n      icon?: IconComponent;\n    };\n\nexport type PaginationBasePropArrow =\n  | false\n  | {\n      label?: string;\n      disabled?: boolean;\n      icon?: IconComponent;\n      onClick?: React.MouseEventHandler;\n    };\n\ntype PaginationArrowsProps = {\n  outerMostArrows?: [PaginationPropArrow?, PaginationPropArrow?];\n} & (\n  | {\n      arrows: [PaginationPropArrow?, PaginationPropArrow?];\n      hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n    }\n  | {\n      arrows?: never;\n      hotKeys?: never;\n    }\n);\n\nexport type PaginationItem = {\n  key: string | number;\n  label: string;\n  clickable: boolean;\n};\n\nexport type PaginationProps<TYPE extends PaginationPropType> =\n  PropsWithHTMLAttributes<\n    {\n      type?: TYPE;\n      showFirstPage?: boolean;\n      showLastPage?: boolean;\n      visibleCount?: number;\n      form?: PaginationPropForm;\n      size?: PaginationPropSize;\n      containerEventListener?: HTMLElement | Window;\n      value?: number;\n      items?: number;\n      onChange?: PaginationPropOnChange<number>;\n      getItemAs?: PaginationPropGetItemAs<PaginationItem>;\n      getItemAttributes?: PaginationPropGetItemAttributes<PaginationItem>;\n      getItemRef?: PaginationPropGetItemRef<PaginationItem>;\n    },\n    HTMLDivElement\n  > &\n    PaginationArrowsProps &\n    (TYPE extends 'input'\n      ? { getTotalLabel?: (pages: number) => string | number }\n      : {\n          getTotalLabel?: never;\n        });\n\nexport type PaginationComponent = <TYPE extends PaginationPropType>(\n  props: PaginationProps<TYPE>,\n) => React.ReactElement | null;\n\nexport type PaginationBaseItemDefault = {\n  key: string | number;\n  label?: string;\n  as?: AsTags;\n  ref?: React.RefObject<HTMLElement>;\n  clickable?: boolean;\n  attributes?: AsAttributes;\n  onClick?: React.MouseEventHandler;\n};\n\nexport type PaginationPropGetItemKey<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['key'];\nexport type PaginationPropGetItemLabel<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['label'];\nexport type PaginationPropGetItemClickable<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['clickable'];\nexport type PaginationPropGetItemAs<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['as'];\nexport type PaginationPropGetItemAttributes<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['attributes'];\nexport type PaginationPropGetItemRef<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['ref'];\nexport type PaginationPropGetItemOnClick<ITEM> = (\n  item: ITEM,\n) => PaginationBaseItemDefault['onClick'];\n\ntype Mappers<ITEM = PaginationBaseItemDefault> = {\n  getItemLabel?: PaginationPropGetItemLabel<ITEM>;\n  getItemKey: PaginationPropGetItemKey<ITEM>;\n  getItemAs?: PaginationPropGetItemAs<ITEM>;\n  getItemAttributes?: PaginationPropGetItemAttributes<ITEM>;\n  getItemRef?: PaginationPropGetItemRef<ITEM>;\n  getItemClickable?: PaginationPropGetItemClickable<ITEM>;\n  getItemOnClick?: PaginationPropGetItemOnClick<ITEM>;\n};\n\nexport type PaginationArrowProps = PropsWithHTMLAttributes<\n  {\n    icon?: IconComponent;\n    form?: PaginationPropForm;\n    size?: PaginationPropSize;\n    disabled?: boolean;\n    orientation?: 'start' | 'end';\n    label?: string;\n    caption?: string;\n  },\n  HTMLButtonElement\n>;\n\nexport type PaginationItemProps<AS extends AsTags = 'button'> =\n  PropsWithAsAttributes<\n    {\n      form?: PaginationPropForm;\n      size?: PaginationPropSize;\n      label?: string;\n      active?: boolean;\n      clickable?: boolean;\n    },\n    AS\n  >;\n\nexport type PaginationItemComponent = <AS extends AsTags = 'button'>(\n  props: PaginationItemProps<AS>,\n) => React.ReactElement | null;\n\nexport type PaginationNumberInputProps = PropsWithHTMLAttributes<\n  {\n    value?: number;\n    onChange?: PaginationPropOnChange<number>;\n    form?: PaginationPropForm;\n    size?: PaginationPropSize;\n    total: number;\n    getTotalLabel?: (pages: number) => string | number;\n  },\n  HTMLDivElement\n>;\n\nexport type PaginationListProps<ITEM> = PropsWithHTMLAttributesAndRef<\n  {\n    form?: PaginationPropForm;\n    size?: PaginationPropSize;\n    items: ITEM[];\n    value?: ITEM;\n    onItemClick?: PaginationPropOnItemClick<ITEM>;\n  },\n  HTMLDivElement\n> &\n  Mappers<ITEM>;\n\nexport type PaginationListComponent = <ITEM extends PaginationBaseItemDefault>(\n  props: PaginationListProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAUA,MAAO,IAAMA,mBAAkB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAqB,OAArB,CAA3B,CAEP,MAAO,IAAMC,0BAA6C,CACxDD,kBAAkB,CAAC,CAAD,CADb,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAA3B,CAEP,MAAO,IAAMC,0BAA6C,CACxDD,kBAAkB,CAAC,CAAD,CADb,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAA3B,CAEP,MAAO,IAAMC,0BAA6C,CACxDD,kBAAkB,CAAC,CAAD,CADb"}

package/__internal__/src/components/Pagination/usePaginationItems.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaginationItem, PaginationPropHotKey, PaginationPropSize } from './types';
+import { PaginationPropArrow, PaginationPropHotKey, PaginationPropSize, PaginationPropType } from './types';
 declare type UsePaginationItemsProps = {
     visibleCount?: number;
     value: number;
@@ -9,11 +9,12 @@ declare type UsePaginationItemsProps = {
     containerEventListener?: HTMLElement | Window;
     size: PaginationPropSize;
     hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];
+    arrows?: [PaginationPropArrow?, PaginationPropArrow?];
+    outerMostArrows?: [PaginationPropArrow?, PaginationPropArrow?];
+    type?: PaginationPropType;
+    handleNext: (e: React.MouseEvent | KeyboardEvent) => void;
+    handlePrevious: (e: React.MouseEvent | KeyboardEvent) => void;
 };
 export declare const itemSizeMap: Record<PaginationPropSize, number>;
-export declare const usePaginationItems: (props: UsePaginationItemsProps) => {
-    buttonRefs: import("react").RefObject<HTMLButtonElement>[];
-    wrapperRef: import("react").RefObject<HTMLDivElement>;
-    pages: PaginationItem[];
-};
+export declare const usePaginationItems: (props: UsePaginationItemsProps) => readonly [import("./types").PaginationItem[], import("react").RefObject<HTMLDivElement>[], number];
 export {};

package/__internal__/src/components/Pagination/usePaginationItems.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useRef,useState}from"react";import{useComponentSize}from"../../hooks/useComponentSize";import{useRefs}from"../../hooks/useRefs";import{useResizeObserved}from"../../hooks/useResizeObserved";import{getPagesArray}from"./helpers";import{usePaginationKeys}from"./usePaginationKeys";export var itemSizeMap={l:48,m:40,s:32,xs:24};var getElementSize=function(a){var b;return null!==(b=null===a||void 0===a?void 0:a.offsetWidth)&&void 0!==b?b:0};export var usePaginationItems=function(a){var b=a.visibleCount,c=a.value,d=a.items,e=a.showFirstPage,f=a.showLastPage,g=a.containerEventListener,h=a.size,i=a.hotKeys,j=useState([]),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useState(7),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(null),s=useRefs(4),t=useResizeObserved(s,getElementSize),u=_slicedToArray(t,4),v=u[0],w=u[1],x=u[2],y=u[3];usePaginationKeys({containerEventListener:g,hotKeys:i,prevButtonRef:s[1],nextButtonRef:s[2]});var z=useComponentSize(r),A=z.width;return useEffect(function(){q(Math.max(Math.floor((A-v-w-x-y)/(itemSizeMap[h]+2)),3+(e?2:0)+(f?2:0)))},[l,v,w,x,y,A,h]),useEffect(function(){m(getPagesArray({currentPage:c,totalPages:d,visibleCount:null!==b&&void 0!==b?b:p,showFirstPage:e,showLastPage:f}))},[b,e,f,c,d,p]),{buttonRefs:s,wrapperRef:r,pages:l}};
+import{useMemo}from"react";import{useRefs}from"../../hooks/useRefs";import{useResizeObserved}from"../../hooks/useResizeObserved";import{getPagesArray}from"./helpers";import{usePaginationKeys}from"./usePaginationKeys";export var itemSizeMap={l:48,m:40,s:32,xs:24};var getElementWidth=function(a){var b;return null!==(b=null===a||void 0===a?void 0:a.getBoundingClientRect().width)&&void 0!==b?b:0},hashArrows=function(a){return(null===a||void 0===a?void 0:a.map(Boolean).join("-"))||"false-false"};export var usePaginationItems=function(a){var b=a.visibleCount,c=a.value,d=a.items,e=a.showFirstPage,f=a.showLastPage,g=a.containerEventListener,h=a.hotKeys,i=a.outerMostArrows,j=a.type,k=a.arrows,l=a.handleNext,m=a.handlePrevious,n=useRefs(20,[d,j,hashArrows(i),hashArrows(k)]),o=useResizeObserved(n,getElementWidth),p=o[7]-o[5]-o[6],q=o[18]-o[19],r=o[5],s=Math.max(o[8],o[9],o[10],o[11],o[12],o[13],o[14],o[15],o[16],o[17]),t=o[4]-(o[0]?o[0]+p:0)-(o[1]?o[1]+p:0)-(o[2]?o[2]+p:0)-(o[3]?o[3]+p:0),u=useMemo(function(){return"default"===j&&r?getPagesArray(c,d,b||0,e||!1,f||!1,p,q,r,s,t):[]},[j,c,d,b,e,f,p,q,r,s,t]);return usePaginationKeys({containerEventListener:g,hotKeys:h,handleNext:l,handlePrevious:m}),[u,n,s]};
 //# sourceMappingURL=usePaginationItems.js.map

package/__internal__/src/components/Pagination/usePaginationItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationItems.js","names":["useEffect","useRef","useState","useComponentSize","useRefs","useResizeObserved","getPagesArray","usePaginationKeys","itemSizeMap","l","m","s","xs","getElementSize","el","offsetWidth","usePaginationItems","props","visibleCount","value","items","showFirstPage","showLastPage","containerEventListener","size","hotKeys","pages","setPages","maxVisiblePages","setMaxVisiblePages","wrapperRef","refs","firstWidth","prevWidth","nextWidth","lastWidth","prevButtonRef","nextButtonRef","width","Math","max","floor","currentPage","totalPages","buttonRefs"],"sources":["../../../../../src/components/Pagination/usePaginationItems.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useRefs } from '##/hooks/useRefs';\nimport { useResizeObserved } from '##/hooks/useResizeObserved';\n\nimport { getPagesArray } from './helpers';\nimport {\n  PaginationItem,\n  PaginationPropHotKey,\n  PaginationPropSize,\n} from './types';\nimport { usePaginationKeys } from './usePaginationKeys';\n\ntype UsePaginationItemsProps = {\n  visibleCount?: number;\n  value: number;\n  items: number;\n  showFirstPage?: boolean;\n  showLastPage?: boolean;\n  containerEventListener?: HTMLElement | Window;\n  size: PaginationPropSize;\n  hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n};\n\nexport const itemSizeMap: Record<PaginationPropSize, number> = {\n  l: 48,\n  m: 40,\n  s: 32,\n  xs: 24,\n};\n\nconst getElementSize = (el: HTMLElement | null) => el?.offsetWidth ?? 0;\n\nexport const usePaginationItems = (props: UsePaginationItemsProps) => {\n  const {\n    visibleCount,\n    value,\n    items,\n    showFirstPage,\n    showLastPage,\n    containerEventListener,\n    size,\n    hotKeys,\n  } = props;\n  const [pages, setPages] = useState<PaginationItem[]>([]);\n  const [maxVisiblePages, setMaxVisiblePages] = useState(7);\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const refs = useRefs<HTMLButtonElement>(4);\n\n  const [firstWidth, prevWidth, nextWidth, lastWidth] = useResizeObserved(\n    refs,\n    getElementSize,\n  );\n\n  usePaginationKeys({\n    containerEventListener,\n    hotKeys,\n    prevButtonRef: refs[1],\n    nextButtonRef: refs[2],\n  });\n\n  const { width } = useComponentSize(wrapperRef);\n\n  useEffect(() => {\n    setMaxVisiblePages(\n      Math.max(\n        Math.floor(\n          (width - firstWidth - prevWidth - nextWidth - lastWidth) /\n            (itemSizeMap[size] + 2),\n        ),\n        3 + (showFirstPage ? 2 : 0) + (showLastPage ? 2 : 0),\n      ),\n    );\n  }, [pages, firstWidth, prevWidth, nextWidth, lastWidth, width, size]);\n\n  useEffect(() => {\n    setPages(\n      getPagesArray({\n        currentPage: value,\n        totalPages: items,\n        visibleCount: visibleCount ?? maxVisiblePages,\n        showFirstPage,\n        showLastPage,\n      }),\n    );\n  }, [\n    visibleCount,\n    showFirstPage,\n    showLastPage,\n    value,\n    items,\n    maxVisiblePages,\n  ]);\n\n  return {\n    buttonRefs: refs,\n    wrapperRef,\n    pages,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"usePaginationItems.js","names":["useMemo","useRefs","useResizeObserved","getPagesArray","usePaginationKeys","itemSizeMap","l","m","s","xs","getElementWidth","el","getBoundingClientRect","width","hashArrows","arrows","map","Boolean","join","usePaginationItems","props","visibleCount","value","items","showFirstPage","showLastPage","containerEventListener","hotKeys","outerMostArrows","type","handleNext","handlePrevious","refs","gap","buttonPadding","buttonMinWidth","maxSymbolSize","Math","max","totalWidth","pages"],"sources":["../../../../../src/components/Pagination/usePaginationItems.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useRefs } from '##/hooks/useRefs';\nimport { useResizeObserved } from '##/hooks/useResizeObserved';\n\nimport { getPagesArray } from './helpers';\nimport {\n  PaginationPropArrow,\n  PaginationPropHotKey,\n  PaginationPropSize,\n  PaginationPropType,\n} from './types';\nimport { usePaginationKeys } from './usePaginationKeys';\n\ntype UsePaginationItemsProps = {\n  visibleCount?: number;\n  value: number;\n  items: number;\n  showFirstPage?: boolean;\n  showLastPage?: boolean;\n  containerEventListener?: HTMLElement | Window;\n  size: PaginationPropSize;\n  hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n  arrows?: [PaginationPropArrow?, PaginationPropArrow?];\n  outerMostArrows?: [PaginationPropArrow?, PaginationPropArrow?];\n  type?: PaginationPropType;\n  handleNext: (e: React.MouseEvent | KeyboardEvent) => void;\n  handlePrevious: (e: React.MouseEvent | KeyboardEvent) => void;\n};\n\nexport const itemSizeMap: Record<PaginationPropSize, number> = {\n  l: 48,\n  m: 40,\n  s: 32,\n  xs: 24,\n};\n\nconst getElementWidth = (el: HTMLElement | null) =>\n  el?.getBoundingClientRect().width ?? 0;\n\nconst hashArrows = (\n  arrows: [PaginationPropArrow?, PaginationPropArrow?] | undefined,\n) => arrows?.map(Boolean).join('-') || 'false-false';\n\nexport const usePaginationItems = (props: UsePaginationItemsProps) => {\n  const {\n    visibleCount,\n    value,\n    items,\n    showFirstPage,\n    showLastPage,\n    containerEventListener,\n    hotKeys,\n    outerMostArrows,\n    type,\n    arrows,\n    handleNext,\n    handlePrevious,\n  } = props;\n\n  const refs = useRefs<HTMLDivElement>(20, [\n    items,\n    type,\n    hashArrows(outerMostArrows),\n    hashArrows(arrows),\n  ]);\n\n  const width = useResizeObserved(refs, getElementWidth);\n\n  // расстояние между кнопками\n  const gap = width[7] - width[5] - width[6];\n  // внутренний отступ кнопки\n  const buttonPadding = width[18] - width[19];\n  // минимальная ширина кнопки\n  const buttonMinWidth = width[5];\n  // Максималяная ширина символа\n  const maxSymbolSize = Math.max(\n    width[8],\n    width[9],\n    width[10],\n    width[11],\n    width[12],\n    width[13],\n    width[14],\n    width[15],\n    width[16],\n    width[17],\n  );\n  // разрешенная ширина\n  const totalWidth =\n    width[4] -\n    (width[0] ? width[0] + gap : 0) -\n    (width[1] ? width[1] + gap : 0) -\n    (width[2] ? width[2] + gap : 0) -\n    (width[3] ? width[3] + gap : 0);\n\n  const pages = useMemo(\n    () =>\n      type === 'default' && buttonMinWidth\n        ? getPagesArray(\n            value,\n            items,\n            visibleCount || 0,\n            showFirstPage || false,\n            showLastPage || false,\n            gap,\n            buttonPadding,\n            buttonMinWidth,\n            maxSymbolSize,\n            totalWidth,\n          )\n        : [],\n    [\n      type,\n      value,\n      items,\n      visibleCount,\n      showFirstPage,\n      showLastPage,\n      gap,\n      buttonPadding,\n      buttonMinWidth,\n      maxSymbolSize,\n      totalWidth,\n    ],\n  );\n\n  usePaginationKeys({\n    containerEventListener,\n    hotKeys,\n    handleNext,\n    handlePrevious,\n  });\n\n  return [pages, refs, maxSymbolSize] as const;\n};\n"],"mappings":"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"}

package/__internal__/src/components/Pagination/usePaginationKeys.d.ts

@@ -3,8 +3,8 @@ import { PaginationPropHotKey } from './types';
 declare type UsePaginationKeysParams = {
     containerEventListener?: HTMLElement | Window;
     hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];
-    nextButtonRef?: React.RefObject<HTMLElement>;
-    prevButtonRef?: React.RefObject<HTMLElement>;
+    handleNext: (e: React.MouseEvent | KeyboardEvent) => void;
+    handlePrevious: (e: React.MouseEvent | KeyboardEvent) => void;
 };
 export declare const usePaginationKeys: (params: UsePaginationKeysParams) => void;
 export {};

package/__internal__/src/components/Pagination/usePaginationKeys.js

@@ -1,2 +1,2 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useEffect,useLayoutEffect,useRef}from"react";export var usePaginationKeys=function(a){var b=a.containerEventListener,c=void 0===b?window:b,d=a.hotKeys,e=a.nextButtonRef,f=a.prevButtonRef,g=useRef([]),h=useRef(null!==d&&void 0!==d?d:[]),i=function(a){var b=a.key;g.current=g.current.filter(function(a){return a!==b})},j=useCallback(function(a){var b=a.key,c=_slicedToArray(h.current,2),d=c[0],i=c[1];if(null!==d&&void 0!==d&&d.keys.includes(b)||null!==i&&void 0!==i&&i.keys.includes(b)){var l=[].concat(_toConsumableArray(g.current),[b]);if(null!==i&&void 0!==i&&i.keys.every(function(a){return l.includes(a)})){var j;null===e||void 0===e||null===(j=e.current)||void 0===j?void 0:j.click()}else if(null!==d&&void 0!==d&&d.keys.every(function(a){return l.includes(a)})){var k;null===f||void 0===f||null===(k=f.current)||void 0===k?void 0:k.click()}g.current=l}},[d]);useLayoutEffect(function(){return c.addEventListener("keydown",j),c.addEventListener("keyup",i),function(){c.removeEventListener("keydown",j),c.removeEventListener("keyup",i)}},[e,f,c]),useEffect(function(){d&&(h.current=d)},[d])};
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useCallback,useLayoutEffect,useRef}from"react";import{useMutableRef}from"../../hooks/useMutableRef";export var usePaginationKeys=function(a){var b=a.containerEventListener,c=void 0===b?window:b,d=a.hotKeys,e=a.handleNext,f=a.handlePrevious,g=useRef([]),h=useMutableRef([d||[],e,f]),i=useCallback(function(a){var b=a.key;g.current=g.current.filter(function(a){return a!==b})},[]),j=useCallback(function(a){var b=a.key,c=_slicedToArray(h.current[0],2),d=c[0],e=c[1];if(null!==d&&void 0!==d&&d.keys.includes(b)||null!==e&&void 0!==e&&e.keys.includes(b)){var f=[].concat(_toConsumableArray(g.current),[b]);null!==e&&void 0!==e&&e.keys.every(function(a){return f.includes(a)})?h.current[1](a):null!==d&&void 0!==d&&d.keys.every(function(a){return f.includes(a)})&&h.current[2](a),g.current=f}},[]);useLayoutEffect(function(){return c.addEventListener("keydown",j),c.addEventListener("keyup",i),function(){c.removeEventListener("keydown",j),c.removeEventListener("keyup",i)}},[c])};
 //# sourceMappingURL=usePaginationKeys.js.map

package/__internal__/src/components/Pagination/usePaginationKeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationKeys.js","names":["useCallback","useEffect","useLayoutEffect","useRef","usePaginationKeys","params","containerEventListener","window","hotKeys","nextButtonRef","prevButtonRef","keys","hotKeysRef","keyUpListener","event","key","current","filter","hotKey","keyDownListener","start","end","includes","newKeys","every","click","addEventListener","removeEventListener"],"sources":["../../../../../src/components/Pagination/usePaginationKeys.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { PaginationPropHotKey } from './types';\n\ntype UsePaginationKeysParams = {\n  containerEventListener?: HTMLElement | Window;\n  hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n  nextButtonRef?: React.RefObject<HTMLElement>;\n  prevButtonRef?: React.RefObject<HTMLElement>;\n};\n\nexport const usePaginationKeys = (params: UsePaginationKeysParams) => {\n  const {\n    containerEventListener = window,\n    hotKeys,\n    nextButtonRef,\n    prevButtonRef,\n  } = params;\n  const keys: React.MutableRefObject<string[]> = useRef([]);\n  const hotKeysRef = useRef(hotKeys ?? []);\n\n  const keyUpListener: EventListener = (event) => {\n    const { key } = event as KeyboardEvent;\n    keys.current = keys.current.filter((hotKey) => hotKey !== key);\n  };\n\n  const keyDownListener: EventListener = useCallback(\n    (event) => {\n      const { key } = event as KeyboardEvent;\n\n      const [start, end] = hotKeysRef.current;\n\n      if (start?.keys.includes(key) || end?.keys.includes(key)) {\n        const newKeys = [...keys.current, key];\n        if (end?.keys.every((hotKey) => newKeys.includes(hotKey))) {\n          nextButtonRef?.current?.click();\n        } else if (start?.keys.every((hotKey) => newKeys.includes(hotKey))) {\n          prevButtonRef?.current?.click();\n        }\n        keys.current = newKeys;\n      }\n    },\n    [hotKeys],\n  );\n\n  useLayoutEffect(() => {\n    containerEventListener.addEventListener('keydown', keyDownListener);\n    containerEventListener.addEventListener('keyup', keyUpListener);\n    return () => {\n      containerEventListener.removeEventListener('keydown', keyDownListener);\n      containerEventListener.removeEventListener('keyup', keyUpListener);\n    };\n  }, [nextButtonRef, prevButtonRef, containerEventListener]);\n\n  useEffect(() => {\n    if (hotKeys) {\n      hotKeysRef.current = hotKeys;\n    }\n  }, [hotKeys]);\n};\n"],"mappings":"0IAAA,OAASA,WAAT,CAAsBC,SAAtB,CAAiCC,eAAjC,CAAkDC,MAAlD,KAAgE,OAAhE,CAWA,MAAO,IAAMC,kBAAiB,CAAG,SAACC,CAAD,CAAqC,OAMhEA,CANgE,CAElEC,sBAFkE,CAElEA,CAFkE,YAEzCC,MAFyC,GAGlEC,CAHkE,CAMhEH,CANgE,CAGlEG,OAHkE,CAIlEC,CAJkE,CAMhEJ,CANgE,CAIlEI,aAJkE,CAKlEC,CALkE,CAMhEL,CANgE,CAKlEK,aALkE,CAO9DC,CAAsC,CAAGR,MAAM,CAAC,EAAD,CAPe,CAQ9DS,CAAU,CAAGT,MAAM,QAACK,CAAD,WAACA,CAAD,CAACA,CAAD,CAAY,EAAZ,CAR2C,CAU9DK,CAA4B,CAAG,SAACC,CAAD,CAAW,CAC9C,GAAQC,EAAR,CAAgBD,CAAhB,CAAQC,GAAR,CACAJ,CAAI,CAACK,OAAL,CAAeL,CAAI,CAACK,OAAL,CAAaC,MAAb,CAAoB,SAACC,CAAD,QAAYA,EAAM,GAAKH,CAAvB,CAApB,CAChB,CAbmE,CAe9DI,CAA8B,CAAGnB,WAAW,CAChD,SAACc,CAAD,CAAW,IACDC,EADC,CACOD,CADP,CACDC,GADC,kBAGYH,CAAU,CAACI,OAHvB,IAGFI,CAHE,MAGKC,CAHL,MAKT,GAAI,OAAAD,CAAK,WAALA,CAAA,EAAAA,CAAK,CAAET,IAAP,CAAYW,QAAZ,CAAqBP,CAArB,UAA6BM,CAA7B,WAA6BA,CAA7B,EAA6BA,CAAG,CAAEV,IAAL,CAAUW,QAAV,CAAmBP,CAAnB,CAAjC,CAA0D,CACxD,GAAMQ,EAAO,8BAAOZ,CAAI,CAACK,OAAZ,GAAqBD,CAArB,EAAb,CACA,UAAIM,CAAJ,WAAIA,CAAJ,EAAIA,CAAG,CAAEV,IAAL,CAAUa,KAAV,CAAgB,SAACN,CAAD,QAAYK,EAAO,CAACD,QAAR,CAAiBJ,CAAjB,CAAZ,CAAhB,CAAJ,CAA2D,cACzDT,CADyD,WACzDA,CADyD,YACzDA,CAAa,CAAEO,OAD0C,qBACzD,EAAwBS,KAAxB,EACD,CAFD,IAEO,WAAIL,CAAJ,WAAIA,CAAJ,EAAIA,CAAK,CAAET,IAAP,CAAYa,KAAZ,CAAkB,SAACN,CAAD,QAAYK,EAAO,CAACD,QAAR,CAAiBJ,CAAjB,CAAZ,CAAlB,CAAJ,CAA6D,cAClER,CADkE,WAClEA,CADkE,YAClEA,CAAa,CAAEM,OADmD,qBAClE,EAAwBS,KAAxB,EACD,CACDd,CAAI,CAACK,OAAL,CAAeO,CAChB,CACF,CAf+C,CAgBhD,CAACf,CAAD,CAhBgD,CAfkB,CAkCpEN,eAAe,CAAC,UAAM,CAGpB,MAFAI,EAAsB,CAACoB,gBAAvB,CAAwC,SAAxC,CAAmDP,CAAnD,CAEA,CADAb,CAAsB,CAACoB,gBAAvB,CAAwC,OAAxC,CAAiDb,CAAjD,CACA,CAAO,UAAM,CACXP,CAAsB,CAACqB,mBAAvB,CAA2C,SAA3C,CAAsDR,CAAtD,CADW,CAEXb,CAAsB,CAACqB,mBAAvB,CAA2C,OAA3C,CAAoDd,CAApD,CACD,CACF,CAPc,CAOZ,CAACJ,CAAD,CAAgBC,CAAhB,CAA+BJ,CAA/B,CAPY,CAlCqD,CA2CpEL,SAAS,CAAC,UAAM,CACVO,CADU,GAEZI,CAAU,CAACI,OAAX,CAAqBR,CAFT,CAIf,CAJQ,CAIN,CAACA,CAAD,CAJM,CAKV,CAhDM"}
+{"version":3,"file":"usePaginationKeys.js","names":["useCallback","useLayoutEffect","useRef","useMutableRef","usePaginationKeys","params","containerEventListener","window","hotKeys","handleNext","handlePrevious","keys","mutableRefs","keyUpListener","event","key","current","filter","hotKey","keyDownListener","start","end","includes","newKeys","every","addEventListener","removeEventListener"],"sources":["../../../../../src/components/Pagination/usePaginationKeys.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { useMutableRef } from '##/hooks/useMutableRef';\n\nimport { PaginationPropHotKey } from './types';\n\ntype UsePaginationKeysParams = {\n  containerEventListener?: HTMLElement | Window;\n  hotKeys?: [PaginationPropHotKey?, PaginationPropHotKey?];\n  handleNext: (e: React.MouseEvent | KeyboardEvent) => void;\n  handlePrevious: (e: React.MouseEvent | KeyboardEvent) => void;\n};\n\nexport const usePaginationKeys = (params: UsePaginationKeysParams) => {\n  const {\n    containerEventListener = window,\n    hotKeys,\n    handleNext,\n    handlePrevious,\n  } = params;\n  const keys: React.MutableRefObject<string[]> = useRef([]);\n  const mutableRefs = useMutableRef([\n    hotKeys || [],\n    handleNext,\n    handlePrevious,\n  ] as const);\n\n  const keyUpListener: EventListener = useCallback((event) => {\n    const { key } = event as KeyboardEvent;\n    keys.current = keys.current.filter((hotKey) => hotKey !== key);\n  }, []);\n\n  const keyDownListener = useCallback((event: KeyboardEvent) => {\n    const { key } = event;\n    const [start, end] = mutableRefs.current[0];\n\n    if (start?.keys.includes(key) || end?.keys.includes(key)) {\n      const newKeys = [...keys.current, key];\n      if (end?.keys.every((hotKey) => newKeys.includes(hotKey))) {\n        mutableRefs.current[1](event);\n      } else if (start?.keys.every((hotKey) => newKeys.includes(hotKey))) {\n        mutableRefs.current[2](event);\n      }\n      keys.current = newKeys;\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    containerEventListener.addEventListener(\n      'keydown',\n      keyDownListener as EventListener,\n    );\n    containerEventListener.addEventListener('keyup', keyUpListener);\n    return () => {\n      containerEventListener.removeEventListener(\n        'keydown',\n        keyDownListener as EventListener,\n      );\n      containerEventListener.removeEventListener('keyup', keyUpListener);\n    };\n  }, [containerEventListener]);\n};\n"],"mappings":"0IAAA,OAASA,WAAT,CAAsBC,eAAtB,CAAuCC,MAAvC,KAAqD,OAArD,CAEA,OAASC,aAAT,iCAWA,MAAO,IAAMC,kBAAiB,CAAG,SAACC,CAAD,CAAqC,OAMhEA,CANgE,CAElEC,sBAFkE,CAElEA,CAFkE,YAEzCC,MAFyC,GAGlEC,CAHkE,CAMhEH,CANgE,CAGlEG,OAHkE,CAIlEC,CAJkE,CAMhEJ,CANgE,CAIlEI,UAJkE,CAKlEC,CALkE,CAMhEL,CANgE,CAKlEK,cALkE,CAO9DC,CAAsC,CAAGT,MAAM,CAAC,EAAD,CAPe,CAQ9DU,CAAW,CAAGT,aAAa,CAAC,CAChCK,CAAO,EAAI,EADqB,CAEhCC,CAFgC,CAGhCC,CAHgC,CAAD,CARmC,CAc9DG,CAA4B,CAAGb,WAAW,CAAC,SAACc,CAAD,CAAW,CAC1D,GAAQC,EAAR,CAAgBD,CAAhB,CAAQC,GAAR,CACAJ,CAAI,CAACK,OAAL,CAAeL,CAAI,CAACK,OAAL,CAAaC,MAAb,CAAoB,SAACC,CAAD,QAAYA,EAAM,GAAKH,CAAvB,CAApB,CAChB,CAH+C,CAG7C,EAH6C,CAdoB,CAmB9DI,CAAe,CAAGnB,WAAW,CAAC,SAACc,CAAD,CAA0B,IACpDC,EADoD,CAC5CD,CAD4C,CACpDC,GADoD,kBAEvCH,CAAW,CAACI,OAAZ,CAAoB,CAApB,CAFuC,IAErDI,CAFqD,MAE9CC,CAF8C,MAI5D,GAAI,OAAAD,CAAK,WAALA,CAAA,EAAAA,CAAK,CAAET,IAAP,CAAYW,QAAZ,CAAqBP,CAArB,UAA6BM,CAA7B,WAA6BA,CAA7B,EAA6BA,CAAG,CAAEV,IAAL,CAAUW,QAAV,CAAmBP,CAAnB,CAAjC,CAA0D,CACxD,GAAMQ,EAAO,8BAAOZ,CAAI,CAACK,OAAZ,GAAqBD,CAArB,EAAb,CADwD,OAEpDM,CAFoD,WAEpDA,CAFoD,EAEpDA,CAAG,CAAEV,IAAL,CAAUa,KAAV,CAAgB,SAACN,CAAD,QAAYK,EAAO,CAACD,QAAR,CAAiBJ,CAAjB,CAAZ,CAAhB,CAFoD,CAGtDN,CAAW,CAACI,OAAZ,CAAoB,CAApB,EAAuBF,CAAvB,CAHsD,QAI7CM,CAJ6C,WAI7CA,CAJ6C,EAI7CA,CAAK,CAAET,IAAP,CAAYa,KAAZ,CAAkB,SAACN,CAAD,QAAYK,EAAO,CAACD,QAAR,CAAiBJ,CAAjB,CAAZ,CAAlB,CAJ6C,EAKtDN,CAAW,CAACI,OAAZ,CAAoB,CAApB,EAAuBF,CAAvB,CALsD,CAOxDH,CAAI,CAACK,OAAL,CAAeO,CAChB,CACF,CAbkC,CAahC,EAbgC,CAnBiC,CAkCpEtB,eAAe,CAAC,UAAM,CAMpB,MALAK,EAAsB,CAACmB,gBAAvB,CACE,SADF,CAEEN,CAFF,CAKA,CADAb,CAAsB,CAACmB,gBAAvB,CAAwC,OAAxC,CAAiDZ,CAAjD,CACA,CAAO,UAAM,CACXP,CAAsB,CAACoB,mBAAvB,CACE,SADF,CAEEP,CAFF,CADW,CAKXb,CAAsB,CAACoB,mBAAvB,CAA2C,OAA3C,CAAoDb,CAApD,CACD,CACF,CAbc,CAaZ,CAACP,CAAD,CAbY,CAchB,CAhDM"}

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

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

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

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

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

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

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

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

package/__internal__/src/components/Tabs/TabsFitModeScrollWrapper/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,c]),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})}})))};
+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{cnMixScrollBar}from"../../../mixs/MixScrollBar";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=a.withScrollButtons,g=React.useRef(null),h=useResizeObserved(React.useMemo(function(){return[g]},[g,c]),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}}),i=_slicedToArray(h,1),j=i[0],k=j.isScrollable,l=j.width,m=j.paddingLeft,n=useScrollPosition(g.current),o=n.scrollLeft,p=getVisibleTabsRange({tabsDimensions:b,containerWidth:l,containerPaddingLeft:m,scrollLeft:o}),q=_slicedToArray(p,2),r=q[0],s=q[1],t=function(a){if(!(a>=r&&a<=s)){var c,d=getTabsWidth(b.slice(0,a));null===(c=g.current)||void 0===c?void 0:c.scrollTo({left:d,behavior:"smooth"})}},u=function(){t(r-1)},v=function(){t(s+1)},w=c.findIndex(e);return React.useEffect(function(){k&&t(w)},[w,k]),React.createElement("div",{className:cnTabsFitModeScrollWrapper()},k&&f&&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===r:s===c.length-1,iconLeft:"prev"===a?IconArrowLeft:IconArrowRight,className:cnTabsFitModeScrollWrapper("Button",{to:a}),onClick:"prev"===a?u:v})})),React.createElement("div",{className:cnTabsFitModeScrollWrapper("Content",cnMixScrollBar({invisible:!0})),ref:g},d({visibleIndexes:Array.from(Array(c.length).keys()),getTabClassName:function getTabClassName(a){return cnTabsFitModeScrollWrapper("Tab",{noMargin:a===c.length-1})}})))};
 //# sourceMappingURL=TabsFitModeScrollWrapper.js.map