@alfalab/core-components-tabs 10.0.7 → 10.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/components/primary-tablist/Component.collapsible.js.map +1 -1
  2. package/components/primary-tablist/Component.js.map +1 -1
  3. package/components/primary-tablist/Component.mobile.d.ts +1 -1
  4. package/components/primary-tablist/index.css +132 -132
  5. package/components/primary-tablist/index.module.css.js +1 -1
  6. package/components/primary-tablist/index.module.css.js.map +1 -1
  7. package/components/primary-tablist/mobile.css +221 -221
  8. package/components/primary-tablist/mobile.module.css.js +1 -1
  9. package/components/primary-tablist/mobile.module.css.js.map +1 -1
  10. package/components/scroll-controls/Component.d.ts +1 -1
  11. package/components/scroll-controls/Component.js.map +1 -1
  12. package/components/scroll-controls/index.css +11 -11
  13. package/components/scroll-controls/index.module.css.js +1 -1
  14. package/components/scroll-controls/index.module.css.js.map +1 -1
  15. package/components/scroll-controls/utils.js.map +1 -1
  16. package/components/scrollable-container/Component.d.ts +2 -2
  17. package/components/scrollable-container/Component.js.map +1 -1
  18. package/components/scrollable-container/index.css +5 -5
  19. package/components/scrollable-container/index.module.css.js +1 -1
  20. package/components/scrollable-container/index.module.css.js.map +1 -1
  21. package/components/secondary-tablist/Component.desktop.d.ts +1 -1
  22. package/components/secondary-tablist/Component.js.map +1 -1
  23. package/components/secondary-tablist/Component.mobile.d.ts +1 -1
  24. package/components/secondary-tablist/index.css +18 -18
  25. package/components/secondary-tablist/index.module.css.js +1 -1
  26. package/components/secondary-tablist/index.module.css.js.map +1 -1
  27. package/components/secondary-tablist/mobile.css +22 -22
  28. package/components/secondary-tablist/mobile.module.css.js +1 -1
  29. package/components/tab/Component.d.ts +2 -2
  30. package/components/tab/Component.js.map +1 -1
  31. package/components/tab/index.css +2 -2
  32. package/components/tab/index.module.css.js +1 -1
  33. package/components/tabs/Component.collapsible.d.ts +1 -1
  34. package/components/tabs/Component.d.ts +1 -1
  35. package/components/tabs/Component.desktop.d.ts +1 -1
  36. package/components/tabs/Component.mobile.d.ts +1 -1
  37. package/components/tabs/Component.responsive.d.ts +1 -1
  38. package/components/title/Component.d.ts +5 -5
  39. package/components/title/Component.js.map +1 -1
  40. package/cssm/components/primary-tablist/Component.collapsible.js.map +1 -1
  41. package/cssm/components/primary-tablist/Component.js.map +1 -1
  42. package/cssm/components/primary-tablist/Component.mobile.d.ts +1 -1
  43. package/cssm/components/scroll-controls/Component.d.ts +1 -1
  44. package/cssm/components/scroll-controls/Component.js.map +1 -1
  45. package/cssm/components/scroll-controls/utils.js.map +1 -1
  46. package/cssm/components/scrollable-container/Component.d.ts +2 -2
  47. package/cssm/components/scrollable-container/Component.js.map +1 -1
  48. package/cssm/components/secondary-tablist/Component.desktop.d.ts +1 -1
  49. package/cssm/components/secondary-tablist/Component.js.map +1 -1
  50. package/cssm/components/secondary-tablist/Component.mobile.d.ts +1 -1
  51. package/cssm/components/tab/Component.d.ts +2 -2
  52. package/cssm/components/tab/Component.js.map +1 -1
  53. package/cssm/components/tabs/Component.collapsible.d.ts +1 -1
  54. package/cssm/components/tabs/Component.d.ts +1 -1
  55. package/cssm/components/tabs/Component.desktop.d.ts +1 -1
  56. package/cssm/components/tabs/Component.mobile.d.ts +1 -1
  57. package/cssm/components/tabs/Component.responsive.d.ts +1 -1
  58. package/cssm/components/title/Component.d.ts +5 -5
  59. package/cssm/components/title/Component.js.map +1 -1
  60. package/cssm/hooks/use-collapsible-elements.js.map +1 -1
  61. package/cssm/hooks/use-tablist-titles.d.ts +16 -17
  62. package/cssm/hooks/use-tablist-titles.js.map +1 -1
  63. package/cssm/hooks/use-tabs.d.ts +1 -1
  64. package/cssm/hooks/use-tabs.js.map +1 -1
  65. package/cssm/typings.d.ts +5 -5
  66. package/esm/components/primary-tablist/Component.collapsible.js.map +1 -1
  67. package/esm/components/primary-tablist/Component.js.map +1 -1
  68. package/esm/components/primary-tablist/Component.mobile.d.ts +1 -1
  69. package/esm/components/primary-tablist/index.css +132 -132
  70. package/esm/components/primary-tablist/index.module.css.js +1 -1
  71. package/esm/components/primary-tablist/index.module.css.js.map +1 -1
  72. package/esm/components/primary-tablist/mobile.css +221 -221
  73. package/esm/components/primary-tablist/mobile.module.css.js +1 -1
  74. package/esm/components/primary-tablist/mobile.module.css.js.map +1 -1
  75. package/esm/components/scroll-controls/Component.d.ts +1 -1
  76. package/esm/components/scroll-controls/Component.js.map +1 -1
  77. package/esm/components/scroll-controls/index.css +11 -11
  78. package/esm/components/scroll-controls/index.module.css.js +1 -1
  79. package/esm/components/scroll-controls/index.module.css.js.map +1 -1
  80. package/esm/components/scroll-controls/utils.js.map +1 -1
  81. package/esm/components/scrollable-container/Component.d.ts +2 -2
  82. package/esm/components/scrollable-container/Component.js.map +1 -1
  83. package/esm/components/scrollable-container/index.css +5 -5
  84. package/esm/components/scrollable-container/index.module.css.js +1 -1
  85. package/esm/components/scrollable-container/index.module.css.js.map +1 -1
  86. package/esm/components/secondary-tablist/Component.desktop.d.ts +1 -1
  87. package/esm/components/secondary-tablist/Component.js.map +1 -1
  88. package/esm/components/secondary-tablist/Component.mobile.d.ts +1 -1
  89. package/esm/components/secondary-tablist/index.css +18 -18
  90. package/esm/components/secondary-tablist/index.module.css.js +1 -1
  91. package/esm/components/secondary-tablist/index.module.css.js.map +1 -1
  92. package/esm/components/secondary-tablist/mobile.css +22 -22
  93. package/esm/components/secondary-tablist/mobile.module.css.js +1 -1
  94. package/esm/components/tab/Component.d.ts +2 -2
  95. package/esm/components/tab/Component.js.map +1 -1
  96. package/esm/components/tab/index.css +2 -2
  97. package/esm/components/tab/index.module.css.js +1 -1
  98. package/esm/components/tabs/Component.collapsible.d.ts +1 -1
  99. package/esm/components/tabs/Component.d.ts +1 -1
  100. package/esm/components/tabs/Component.desktop.d.ts +1 -1
  101. package/esm/components/tabs/Component.mobile.d.ts +1 -1
  102. package/esm/components/tabs/Component.responsive.d.ts +1 -1
  103. package/esm/components/title/Component.d.ts +5 -5
  104. package/esm/components/title/Component.js.map +1 -1
  105. package/esm/hooks/use-collapsible-elements.js.map +1 -1
  106. package/esm/hooks/use-tablist-titles.d.ts +16 -17
  107. package/esm/hooks/use-tablist-titles.js.map +1 -1
  108. package/esm/hooks/use-tabs.d.ts +1 -1
  109. package/esm/hooks/use-tabs.js.map +1 -1
  110. package/esm/typings.d.ts +5 -5
  111. package/hooks/use-collapsible-elements.js.map +1 -1
  112. package/hooks/use-tablist-titles.d.ts +16 -16
  113. package/hooks/use-tablist-titles.js.map +1 -1
  114. package/hooks/use-tabs.d.ts +1 -1
  115. package/hooks/use-tabs.js.map +1 -1
  116. package/modern/components/primary-tablist/Component.collapsible.js.map +1 -1
  117. package/modern/components/primary-tablist/Component.js.map +1 -1
  118. package/modern/components/primary-tablist/Component.mobile.d.ts +1 -1
  119. package/modern/components/primary-tablist/index.css +132 -132
  120. package/modern/components/primary-tablist/index.module.css.js +1 -1
  121. package/modern/components/primary-tablist/index.module.css.js.map +1 -1
  122. package/modern/components/primary-tablist/mobile.css +221 -221
  123. package/modern/components/primary-tablist/mobile.module.css.js +1 -1
  124. package/modern/components/primary-tablist/mobile.module.css.js.map +1 -1
  125. package/modern/components/scroll-controls/Component.d.ts +1 -1
  126. package/modern/components/scroll-controls/Component.js.map +1 -1
  127. package/modern/components/scroll-controls/index.css +11 -11
  128. package/modern/components/scroll-controls/index.module.css.js +1 -1
  129. package/modern/components/scroll-controls/index.module.css.js.map +1 -1
  130. package/modern/components/scroll-controls/utils.js.map +1 -1
  131. package/modern/components/scrollable-container/Component.d.ts +2 -2
  132. package/modern/components/scrollable-container/Component.js.map +1 -1
  133. package/modern/components/scrollable-container/index.css +5 -5
  134. package/modern/components/scrollable-container/index.module.css.js +1 -1
  135. package/modern/components/scrollable-container/index.module.css.js.map +1 -1
  136. package/modern/components/secondary-tablist/Component.desktop.d.ts +1 -1
  137. package/modern/components/secondary-tablist/Component.js.map +1 -1
  138. package/modern/components/secondary-tablist/Component.mobile.d.ts +1 -1
  139. package/modern/components/secondary-tablist/index.css +18 -18
  140. package/modern/components/secondary-tablist/index.module.css.js +1 -1
  141. package/modern/components/secondary-tablist/index.module.css.js.map +1 -1
  142. package/modern/components/secondary-tablist/mobile.css +22 -22
  143. package/modern/components/secondary-tablist/mobile.module.css.js +1 -1
  144. package/modern/components/tab/Component.d.ts +2 -2
  145. package/modern/components/tab/Component.js.map +1 -1
  146. package/modern/components/tab/index.css +2 -2
  147. package/modern/components/tab/index.module.css.js +1 -1
  148. package/modern/components/tabs/Component.collapsible.d.ts +1 -1
  149. package/modern/components/tabs/Component.d.ts +1 -1
  150. package/modern/components/tabs/Component.desktop.d.ts +1 -1
  151. package/modern/components/tabs/Component.mobile.d.ts +1 -1
  152. package/modern/components/tabs/Component.responsive.d.ts +1 -1
  153. package/modern/components/title/Component.d.ts +5 -5
  154. package/modern/components/title/Component.js.map +1 -1
  155. package/modern/hooks/use-collapsible-elements.js.map +1 -1
  156. package/modern/hooks/use-tablist-titles.d.ts +16 -17
  157. package/modern/hooks/use-tablist-titles.js.map +1 -1
  158. package/modern/hooks/use-tabs.d.ts +1 -1
  159. package/modern/hooks/use-tabs.js.map +1 -1
  160. package/modern/typings.d.ts +5 -5
  161. package/moderncssm/components/primary-tablist/Component.collapsible.js.map +1 -1
  162. package/moderncssm/components/primary-tablist/Component.js.map +1 -1
  163. package/moderncssm/components/primary-tablist/Component.mobile.d.ts +1 -1
  164. package/moderncssm/components/scroll-controls/Component.d.ts +1 -1
  165. package/moderncssm/components/scroll-controls/Component.js.map +1 -1
  166. package/moderncssm/components/scroll-controls/utils.js.map +1 -1
  167. package/moderncssm/components/scrollable-container/Component.d.ts +2 -2
  168. package/moderncssm/components/scrollable-container/Component.js.map +1 -1
  169. package/moderncssm/components/secondary-tablist/Component.desktop.d.ts +1 -1
  170. package/moderncssm/components/secondary-tablist/Component.js.map +1 -1
  171. package/moderncssm/components/secondary-tablist/Component.mobile.d.ts +1 -1
  172. package/moderncssm/components/tab/Component.d.ts +2 -2
  173. package/moderncssm/components/tab/Component.js.map +1 -1
  174. package/moderncssm/components/tabs/Component.collapsible.d.ts +1 -1
  175. package/moderncssm/components/tabs/Component.d.ts +1 -1
  176. package/moderncssm/components/tabs/Component.desktop.d.ts +1 -1
  177. package/moderncssm/components/tabs/Component.mobile.d.ts +1 -1
  178. package/moderncssm/components/tabs/Component.responsive.d.ts +1 -1
  179. package/moderncssm/components/title/Component.d.ts +5 -5
  180. package/moderncssm/components/title/Component.js.map +1 -1
  181. package/moderncssm/hooks/use-collapsible-elements.js.map +1 -1
  182. package/moderncssm/hooks/use-tablist-titles.d.ts +16 -17
  183. package/moderncssm/hooks/use-tablist-titles.js.map +1 -1
  184. package/moderncssm/hooks/use-tabs.d.ts +1 -1
  185. package/moderncssm/hooks/use-tabs.js.map +1 -1
  186. package/moderncssm/typings.d.ts +5 -5
  187. package/package.json +9 -9
  188. package/src/components/primary-tablist/index.module.css +1 -1
  189. package/src/components/primary-tablist/mobile.module.css +1 -1
  190. package/src/components/primary-tablist/text-styles.module.css +1 -1
  191. package/src/components/scroll-controls/index.module.css +1 -1
  192. package/src/components/scrollable-container/index.module.css +1 -1
  193. package/src/components/secondary-tablist/index.module.css +1 -1
  194. package/src/components/tab/Component.tsx +3 -3
  195. package/src/vars.css +1 -1
  196. package/typings.d.ts +5 -5
@@ -1 +1 @@
1
- {"version":3,"file":"Component.collapsible.js","sources":["../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { type Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n PickerButtonDesktop,\n type PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { type TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n size = 'm',\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n collapsedTabsIds,\n fullWidthScroll,\n onChange,\n dataTestId,\n breakpoint,\n client,\n defaultMatchMediaValue,\n textStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n useTablistTitles({\n titles,\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n });\n\n useEffect(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab, tablistTitles]);\n\n const collapsedOptions = useMemo(\n () =>\n tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n (options, { toggleRef, ...title }) => {\n if (title.collapsed) {\n options.push({\n key: String(title.id),\n value: title.id,\n content: (\n <Title\n {...title}\n ref={toggleRef as Ref<HTMLButtonElement>}\n styles={styles}\n isOption={true}\n className={styles.noTextStyle}\n />\n ),\n });\n }\n\n return options;\n },\n [],\n ),\n [tablistTitles],\n );\n\n const collapsedAddonsLength = tablistTitles.filter(\n (title) => title.collapsed && title.rightAddons,\n ).length;\n\n const handleOptionsChange = (\n payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n ) => {\n if (payload.selected?.value && onChange) {\n const nativeMouseEvent = new MouseEvent('change');\n const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n }\n };\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n {collapsedOptions.length ? (\n <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n <PickerButtonDesktop\n fieldClassName={styles.title}\n optionClassName={cn(size && styles[size])}\n options={collapsedOptions}\n onChange={handleOptionsChange}\n rightAddons={\n collapsedAddonsLength ? (\n <Badge view='count' content={collapsedAddonsLength} />\n ) : null\n }\n size={56}\n view='text'\n label='Ещё'\n popoverPosition='bottom-end'\n disabled={showSkeleton}\n />\n </span>\n ) : null}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n return (\n <div\n ref={containerRef}\n className={cn(\n styles.container,\n textStyle && styles[textStyle],\n styles.desktop,\n containerClassName,\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["useRef","useTablistTitles","useEffect","useMemo","__rest","React","Title","__assign","styles","createSyntheticMouseEvent","cn","KeyboardFocusable","PickerButtonDesktop","Badge"],"mappings":"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"}
1
+ {"version":3,"file":"Component.collapsible.js","sources":["../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { type Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n PickerButtonDesktop,\n type PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { type TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n size = 'm',\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n collapsedTabsIds,\n fullWidthScroll,\n onChange,\n dataTestId,\n breakpoint,\n client,\n defaultMatchMediaValue,\n textStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n useTablistTitles({\n titles,\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n });\n\n useEffect(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab, tablistTitles]);\n\n const collapsedOptions = useMemo(\n () =>\n tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n (options, { toggleRef, ...title }) => {\n if (title.collapsed) {\n options.push({\n key: String(title.id),\n value: title.id,\n content: (\n <Title\n {...title}\n ref={toggleRef as Ref<HTMLButtonElement>}\n styles={styles}\n isOption={true}\n className={styles.noTextStyle}\n />\n ),\n });\n }\n\n return options;\n },\n [],\n ),\n [tablistTitles],\n );\n\n const collapsedAddonsLength = tablistTitles.filter(\n (title) => title.collapsed && title.rightAddons,\n ).length;\n\n const handleOptionsChange = (\n payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n ) => {\n if (payload.selected?.value && onChange) {\n const nativeMouseEvent = new MouseEvent('change');\n const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n }\n };\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n {collapsedOptions.length ? (\n <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n <PickerButtonDesktop\n fieldClassName={styles.title}\n optionClassName={cn(size && styles[size])}\n options={collapsedOptions}\n onChange={handleOptionsChange}\n rightAddons={\n collapsedAddonsLength ? (\n <Badge view='count' content={collapsedAddonsLength} />\n ) : null\n }\n size={56}\n view='text'\n label='Ещё'\n popoverPosition='bottom-end'\n disabled={showSkeleton}\n />\n </span>\n ) : null}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n return (\n <div\n ref={containerRef}\n className={cn(\n styles.container,\n textStyle && styles[textStyle],\n styles.desktop,\n containerClassName,\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["useRef","useTablistTitles","useEffect","useMemo","__rest","React","Title","__assign","styles","createSyntheticMouseEvent","cn","KeyboardFocusable","PickerButtonDesktop","Badge"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../src/components/primary-tablist/Component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport cn from 'classnames';\n\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport { fnUtils } from '@alfalab/core-components-shared';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type Styles, type TabListProps } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\nimport { Title } from '../title';\n\nexport const PrimaryTabList = ({\n size,\n styles = {},\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n scrollable = true,\n fullWidthScroll,\n onChange,\n dataTestId,\n platform,\n textStyle,\n inlineStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps & Styles & PlatformProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles,\n selectedId,\n onChange,\n });\n\n // расчет размера и положения нижней полосы\n useEffect(() => {\n if (selectedTab) {\n const updateLineWidth = () => {\n if (lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n };\n\n const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n const observer = new ResizeObserver(updateLineWidth);\n\n observer.observe(selectedTab);\n\n return () => observer.disconnect();\n }\n\n return fnUtils.noop;\n }, [selectedTab, titles]);\n\n const handleTitleResize = useCallback(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab]);\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n onResize={handleTitleResize}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);\n\n return scrollable ? (\n <ScrollableContainer\n containerWrapperClassName={wrapperClassName}\n activeChild={focusedTab || selectedTab}\n containerClassName={containerClassName}\n scrollControlsClassName={cn(textStyle && styles.scrollControls)}\n fullWidthScroll={fullWidthScroll}\n view='primary'\n size={textStyle ? undefined : size}\n platform={platform}\n inlineStyle={inlineStyle}\n showSkeleton={showSkeleton}\n >\n {renderContent()}\n </ScrollableContainer>\n ) : (\n <div\n className={cn(styles.container, wrapperClassName, containerClassName)}\n style={inlineStyle}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["useRef","useTabs","useEffect","ResizeObserverPolyfill","fnUtils","useCallback","React","cn","__rest","KeyboardFocusable","Title","__assign","ScrollableContainer"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../src/components/primary-tablist/Component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport cn from 'classnames';\n\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport { fnUtils } from '@alfalab/core-components-shared';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type Styles, type TabListProps } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\nimport { Title } from '../title';\n\nexport const PrimaryTabList = ({\n size,\n styles = {},\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n scrollable = true,\n fullWidthScroll,\n onChange,\n dataTestId,\n platform,\n textStyle,\n inlineStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps & Styles & PlatformProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles,\n selectedId,\n onChange,\n });\n\n // расчет размера и положения нижней полосы\n useEffect(() => {\n if (selectedTab) {\n const updateLineWidth = () => {\n if (lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n };\n\n const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n const observer = new ResizeObserver(updateLineWidth);\n\n observer.observe(selectedTab);\n\n return () => observer.disconnect();\n }\n\n return fnUtils.noop;\n }, [selectedTab, titles]);\n\n const handleTitleResize = useCallback(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab]);\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n onResize={handleTitleResize}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);\n\n return scrollable ? (\n <ScrollableContainer\n containerWrapperClassName={wrapperClassName}\n activeChild={focusedTab || selectedTab}\n containerClassName={containerClassName}\n scrollControlsClassName={cn(textStyle && styles.scrollControls)}\n fullWidthScroll={fullWidthScroll}\n view='primary'\n size={textStyle ? undefined : size}\n platform={platform}\n inlineStyle={inlineStyle}\n showSkeleton={showSkeleton}\n >\n {renderContent()}\n </ScrollableContainer>\n ) : (\n <div\n className={cn(styles.container, wrapperClassName, containerClassName)}\n style={inlineStyle}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["useRef","useTabs","useEffect","ResizeObserverPolyfill","fnUtils","useCallback","React","cn","__rest","KeyboardFocusable","Title","__assign","ScrollableContainer"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { type TabListProps } from '../../typings';
3
- export declare type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
3
+ export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
4
4
  export declare const PrimaryTabListMobile: (props: PrimaryTabListMobileProps) => React.JSX.Element;