@consta/uikit 5.21.0 → 5.23.0

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

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

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

@@ -1,2 +1,2 @@
 import { TabsFitModeWrapperProps } from '../types';
-export declare const TabsListWrapper: <ITEM>({ renderItemsList, items, }: TabsFitModeWrapperProps<ITEM>) => JSX.Element;
+export declare const TabsListWrapper: <ITEM>({ renderItemsList, items, }: TabsFitModeWrapperProps<ITEM>) => import("react/jsx-runtime").JSX.Element;