npm - @alfalab/core-components-tabs - Versions diffs - 10.0.7 → 10.0.8-alfasans - Mend

@alfalab/core-components-tabs 10.0.7 → 10.0.8-alfasans

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 (200) hide show

package/components/title/Component.d.ts CHANGED Viewed

@@ -2,9 +2,9 @@ import React from 'react';
 import { type SkeletonProps } from '@alfalab/core-components-skeleton';
 import { type Styles, type TabListTitle } from '../../typings';
 export declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "title"> & {
-    focused?: boolean | undefined;
-    isOption?: boolean | undefined;
-    showSkeleton?: boolean | undefined;
-    skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
-    onResize?: (() => void) | undefined;
+    focused?: boolean;
+    isOption?: boolean;
+    showSkeleton?: boolean;
+    skeletonProps?: Omit<SkeletonProps, "visible">;
+    onResize?: () => void;
 } & React.RefAttributes<HTMLButtonElement>>;

package/components/title/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../src/components/title/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Skeleton, type SkeletonProps } from '@alfalab/core-components-skeleton';\n\nimport { type Styles, type TabListTitle } from '../../typings';\n\ntype Props = TabListTitle &\n Styles &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'title'> & {\n focused?: boolean;\n isOption?: boolean;\n showSkeleton?: boolean;\n skeletonProps?: Omit<SkeletonProps, 'visible'>;\n onResize?: () => void;\n };\n\nexport const Title = forwardRef<HTMLButtonElement, Props>(\n (\n {\n id,\n toggleClassName,\n title,\n styles = {},\n rightAddons = null,\n hidden = false,\n selected = false,\n disabled = false,\n collapsed = false,\n focused = false,\n isOption = false,\n showSkeleton = false,\n skeletonProps,\n onResize,\n dataTestId,\n className,\n ...restProps\n },\n ref,\n ) => {\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n\n const titleClassName = cn(styles.content, {\n [styles.focused]: focused,\n });\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (onResize) {\n onResize();\n }\n });\n\n const button = buttonRef.current;\n\n if (button) {\n resizeObserver.observe(button);\n }\n\n return () => {\n if (button) {\n resizeObserver.unobserve(button);\n }\n };\n }, [onResize]);\n\n return hidden ? null : (\n <button\n {...restProps}\n data-test-id={dataTestId}\n ref={mergeRefs([ref, buttonRef])}\n disabled={disabled \|\| showSkeleton}\n type='button'\n id={String(id)}\n className={cn(\n styles.title,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.collapsed]: collapsed && !isOption,\n [styles.option]: isOption,\n },\n toggleClassName,\n className,\n )}\n >\n {showSkeleton ? (\n <Skeleton\n {...skeletonProps}\n className={cn(titleClassName, skeletonProps?.className)}\n visible={true}\n >\n {title}\n </Skeleton>\n ) : (\n <span className={titleClassName}>{title}</span>\n )}\n\n {rightAddons && (\n <span\n className={cn(styles.rightAddons, {\n [styles.rightAddonsMarginZero]: !title,\n })}\n >\n {rightAddons}\n </span>\n )}\n </button>\n );\n },\n);\n"],"names":["forwardRef","__rest","useRef","cn","useEffect","React","__assign","mergeRefs","Skeleton"],"mappings":";;;;;;;;;;;;;;;;IAkBa,KAAK,GAAGA,gBAAU,CAC3B,UACI,EAkBC,EACD,GAAG,EAAA;;AAlBC,IAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAW,GAAA,EAAA,CAAA,MAAA,EAAX,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACX,EAAA,GAAA,EAAA,CAAA,WAAkB,EAAlB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAClB,EAAc,GAAA,EAAA,CAAA,MAAA,EAAd,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,KAAA,EACd,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,GAAA,EAAA,EAChB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,eAAe,EAAf,OAAO,mBAAG,KAAK,GAAA,EAAA,EACf,EAAgB,GAAA,EAAA,CAAA,QAAA,EAAhB,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,KAAA,EAChB,EAAA,GAAA,EAAA,CAAA,YAAoB,EAApB,YAAY,mBAAG,KAAK,GAAA,EAAA,EACpB,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAjBhB,yMAkBC,CADe;AAIhB,IAAA,IAAM,SAAS,GAAGC,YAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,IAAM,cAAc,GAAGC,mBAAE,CAAC,MAAM,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;AACpC,QAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;YAC3B;AAEF,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,cAAc,GAAG,IAAI,cAAc,CAAC,YAAA;~~AACtC~~,~~YAAA,~~IAAI,QAAQ,EAAE;AACV,gBAAA,QAAQ,EAAE~~;AACb;AACL~~,SAAC,CAAC;AAEF,QAAA,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO;~~AAEhC~~,~~QAAA,~~IAAI,MAAM,EAAE;AACR,YAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC~~;AACjC;QAED~~,OAAO,YAAA;~~AACH~~,~~YAAA,~~IAAI,MAAM,EAAE;AACR,gBAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC~~;AACnC;AACL~~,SAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,OAAO,MAAM,GAAG,IAAI,IAChBC,sBACQ,CAAA,aAAA,CAAA,QAAA,EAAAC,cAAA,CAAA,EAAA,EAAA,SAAS,oBACC,UAAU,EACxB,GAAG,EAAEC,0BAAS,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,YAAY,EAClC,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,EACd,SAAS,EAAEJ,mBAAE,CACT,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AAER,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,SAAS,IAAG,SAAS,IAAI,CAAC,QAAQ;AAC1C,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;iBAE7B,eAAe,EACf,SAAS,CACZ,EAAA,CAAA;AAEA,QAAA,YAAY,IACTE,sBAAC,CAAA,aAAA,CAAAG,+BAAQ,qBACD,aAAa,EAAA,EACjB,SAAS,EAAEL,mBAAE,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,EACvD,OAAO,EAAE,IAAI,EAEZ,CAAA,EAAA,KAAK,CACC,KAEXE,+CAAM,SAAS,EAAE,cAAc,EAAG,EAAA,KAAK,CAAQ,CAClD;QAEA,WAAW,KACRA,sBACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,mBAAE,CAAC,MAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAAC,MAAM,CAAC,qBAAqB,CAAA,GAAG,CAAC,KAAK;AACxC,gBAAA,EAAA,EAAA,EAAA,EAED,WAAW,CACT,CACV,CACI,CACZ;AACL,CAAC;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../src/components/title/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Skeleton, type SkeletonProps } from '@alfalab/core-components-skeleton';\n\nimport { type Styles, type TabListTitle } from '../../typings';\n\ntype Props = TabListTitle &\n Styles &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'title'> & {\n focused?: boolean;\n isOption?: boolean;\n showSkeleton?: boolean;\n skeletonProps?: Omit<SkeletonProps, 'visible'>;\n onResize?: () => void;\n };\n\nexport const Title = forwardRef<HTMLButtonElement, Props>(\n (\n {\n id,\n toggleClassName,\n title,\n styles = {},\n rightAddons = null,\n hidden = false,\n selected = false,\n disabled = false,\n collapsed = false,\n focused = false,\n isOption = false,\n showSkeleton = false,\n skeletonProps,\n onResize,\n dataTestId,\n className,\n ...restProps\n },\n ref,\n ) => {\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n\n const titleClassName = cn(styles.content, {\n [styles.focused]: focused,\n });\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (onResize) {\n onResize();\n }\n });\n\n const button = buttonRef.current;\n\n if (button) {\n resizeObserver.observe(button);\n }\n\n return () => {\n if (button) {\n resizeObserver.unobserve(button);\n }\n };\n }, [onResize]);\n\n return hidden ? null : (\n <button\n {...restProps}\n data-test-id={dataTestId}\n ref={mergeRefs([ref, buttonRef])}\n disabled={disabled \|\| showSkeleton}\n type='button'\n id={String(id)}\n className={cn(\n styles.title,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.collapsed]: collapsed && !isOption,\n [styles.option]: isOption,\n },\n toggleClassName,\n className,\n )}\n >\n {showSkeleton ? (\n <Skeleton\n {...skeletonProps}\n className={cn(titleClassName, skeletonProps?.className)}\n visible={true}\n >\n {title}\n </Skeleton>\n ) : (\n <span className={titleClassName}>{title}</span>\n )}\n\n {rightAddons && (\n <span\n className={cn(styles.rightAddons, {\n [styles.rightAddonsMarginZero]: !title,\n })}\n >\n {rightAddons}\n </span>\n )}\n </button>\n );\n },\n);\n"],"names":["forwardRef","__rest","useRef","cn","useEffect","React","__assign","mergeRefs","Skeleton"],"mappings":"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"}

package/cssm/components/primary-tablist/Component.collapsible.js.map CHANGED Viewed

	@@ -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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"}

package/cssm/components/primary-tablist/Component.js.map CHANGED Viewed

	@@ -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":";;;;;;;;;;;;;;;;;;;AAYO,IAAM,cAAc,GAAG,UAAC,EAgBS,EAAA;AAfpC,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,EAAW,GAAA,EAAA,CAAA,MAAA,EAAX,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EACX,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,EAAW,GAAA,EAAA,CAAA,MAAA,EAAX,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACX,EAAA,GAAA,EAAA,CAAA,UAAqD,EAArD,UAAU,GAAA,EAAA,KAAA,MAAA,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,KAAA,EACrD,EAAA,GAAA,EAAA,CAAA,UAAiB,EAAjB,UAAU,mBAAG,IAAI,GAAA,EAAA,EACjB,eAAe,qBAAA,EACf,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,WAAW,iBAAA,EACX,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,aAAa,GAAA,EAAA,CAAA,aAAA;AAEb,IAAA,IAAM,OAAO,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAEtC,IAAA,EAAA,GAAmDC,eAAO,CAAC;AAC7D,QAAA,MAAM,EAAA,MAAA;AACN,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,QAAQ,EAAA,QAAA;KACX,CAAC,EAJM,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,mBAIlD;;AAGF,IAAAC,eAAS,CAAC,YAAA;~~AACN~~,~~QAAA,~~IAAI,WAAW,EAAE;AACb,YAAA,IAAM,eAAe,GAAG,YAAA;~~gBACpB~~,IAAI,OAAO,CAAC,OAAO,EAAE;AACjB,oBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAA,CAAA,MAAA,CAAG,WAAW,CAAC,WAAW,EAAA,IAAA,CAAI;AAC5D,oBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,aAAA,CAAA,MAAA,CAAc,WAAW,CAAC,UAAU,EAAA,KAAA,CAAK~~;AAC9E;AACL~~,aAAC;AAED,YAAA,IAAM,gBAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,6BAAsB;AACtE,YAAA,IAAM,UAAQ,GAAG,IAAI,gBAAc,CAAC,eAAe,CAAC;AAEpD,YAAA,UAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;YAE7B,OAAO,YAAA,EAAM,OAAA,UAAQ,CAAC,UAAU,EAAE,CAAA,EAAA~~;AACrC;QAED~~,OAAOC,YAAO,CAAC,IAAI;AACvB,KAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAEzB,IAAM,iBAAiB,GAAGC,iBAAW,CAAC,YAAA;AAClC,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAA,CAAA,MAAA,CAAG,WAAW,CAAC,WAAW,EAAA,IAAA,CAAI;AAC5D,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,aAAA,CAAA,MAAA,CAAc,WAAW,CAAC,UAAU,EAAA,KAAA,CAAK~~;AAC9E;AACL~~,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,IAAM,aAAa,GAAG,YAAA;;QAAM,QACxBC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EACA,cAAA,EAAA,UAAU,EACxB,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,GAAA,EAAA,GAAA,EAAA;AACzE,gBAAA,EAAA,CAAC,MAAM,CAAC,eAAe,CAAA,GAAG,eAAe;AAC3C,gBAAA,EAAA,EAAA,EAAA;AAED,YAAA,MAAM,CAAC,GAAG,CAAC,UAAC,EAAmD,EAAE,KAAK,EAAA;6BAA3C,CAAa,aAAE,CAAK,KAAA,cAAc,GAAjDC,YAAA,CAAA,EAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAmD;AAAY,gBAAA,QACxEF,sBAAA,CAAA,aAAA,CAACG,wBAAiB,EAAA,EAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAA,EACpC,UAAC,GAAG,EAAE,OAAO,EAAA;;oBAAK,QACfH,qCAACI,iBAAK,EAAAC,cAAA,CAAA,EAAA,EACE,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,EAC/B,cAAc,EAAA,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAEJ,mBAAE,EAAG,EAAA,GAAA,EAAA,EAAA,EAAA,CAAC,MAAM,CAAC,WAAW,IAAG,CAAC,SAAS,EAAG,EAAA,EAAA,EAAA,CAAA,CACrD;iBACL,CACe;aACvB,CAAC;YAEFD,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAI,CAAA,CAC3C;AA1BkB,KA2B3B;AAED,IAAA,IAAM,gBAAgB,GAAGC,mBAAE,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE7E,OAAO,UAAU,IACbD,sBAAC,CAAA,aAAA,CAAAM,6BAAmB,IAChB,yBAAyB,EAAE,gBAAgB,EAC3C,WAAW,EAAE,UAAU,IAAI,WAAW,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAEL,mBAAE,CAAC,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EAC/D,eAAe,EAAE,eAAe,EAChC,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,EAClC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAAA,EAEzB,aAAa,EAAE,CACE,KAEtBD,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,SAAS,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EACrE,KAAK,EAAE,WAAW,IAEjB,aAAa,EAAE,CACd,CACT;AACL;;;;"}
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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"}

package/cssm/components/primary-tablist/Component.mobile.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TabListProps } from '../../typings';
-export declare type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
+export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 export declare const PrimaryTabListMobile: (props: PrimaryTabListMobileProps) => React.JSX.Element;

package/cssm/components/primary-tablist/index.module.css CHANGED Viewed

@@ -28,11 +28,9 @@
     --gap-4-neg: var(--gap-2xs-neg);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
-    --font-family-styrene:
-        'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --focus-color: var(--color-light-status-info);
@@ -72,55 +70,64 @@
         font-size: 18px;
         line-height: 24px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.36px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.paragraph-primary-medium .title {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.24px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.paragraph-primary-small .title {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.08px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.action-primary-large .title {
         font-size: 18px;
         line-height: 24px;
         font-weight: 500;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.17px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.action-primary-medium .title {
         font-size: 16px;
         line-height: 24px;
         font-weight: 500;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.05px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.action-primary-small .title {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.07px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.accent-primary-large .title {
         font-size: 18px;
         line-height: 24px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.38px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.accent-primary-medium .title {
         font-size: 16px;
         line-height: 24px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.43px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.accent-primary-small .title {
         font-size: 14px;
         line-height: 20px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.47px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.paragraph-primary-large .title, .desktop.paragraph-primary-medium .title, .desktop.accent-primary-large .title, .desktop.accent-primary-medium .title, .desktop.action-primary-large .title, .desktop.action-primary-medium .title {
         padding-bottom: calc(24px / 2);
@@ -178,66 +185,71 @@
         font-size: 48px;
         line-height: 52px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-system-large .title {
         font-size: 40px;
         line-height: 48px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-system-medium .title {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-system-small .title {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.2px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-system-xsmall .title {
         font-size: 18px;
         line-height: 22px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.38px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-xlarge .title {
         font-size: 48px;
         line-height: 64px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        font-weight: 700;
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-large .title {
         font-size: 40px;
         line-height: 48px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        font-weight: 700;
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-medium .title {
         font-size: 32px;
         line-height: 40px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        font-weight: 700;
+        letter-spacing: 0.3px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-small .title {
         font-size: 24px;
         line-height: 32px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        font-weight: 700;
+        letter-spacing: 0.39px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-xsmall .title {
         font-size: 20px;
         line-height: 24px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        font-weight: 700;
+        letter-spacing: 0.33px;
+        font-family: var(--font-family-alfasans);
     }
 .desktop.headline-system-xlarge .title {
         padding-bottom: calc(52px / 2);
@@ -532,5 +544,6 @@
     font-size: 18px;
     line-height: 24px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.36px;
+    font-family: var(--font-family-alfasans);
 }

package/cssm/components/primary-tablist/mobile.module.css CHANGED Viewed

@@ -6,11 +6,9 @@
     --gap-24: var(--gap-xl);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
-    --font-family-styrene:
-        'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --primary-tablist-mobile-gaps: var(--gap-24);
@@ -29,55 +27,64 @@
         font-size: 18px;
         line-height: 24px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.36px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.paragraph-primary-medium .title {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.24px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.paragraph-primary-small .title {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.08px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.action-primary-large .title {
         font-size: 18px;
         line-height: 24px;
         font-weight: 500;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.17px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.action-primary-medium .title {
         font-size: 16px;
         line-height: 24px;
         font-weight: 500;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.05px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.action-primary-small .title {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.07px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.accent-primary-large .title {
         font-size: 18px;
         line-height: 24px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.38px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.accent-primary-medium .title {
         font-size: 16px;
         line-height: 24px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.43px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.accent-primary-small .title {
         font-size: 14px;
         line-height: 20px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.47px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.paragraph-primary-large .title, .mobile.paragraph-primary-medium .title, .mobile.accent-primary-large .title, .mobile.accent-primary-medium .title, .mobile.action-primary-large .title, .mobile.action-primary-medium .title {
         padding-bottom: calc(24px / 2);
@@ -134,67 +141,72 @@
 .mobile.headline-system-xlarge .title {
         font-size: 34px;
         line-height: 40px;
-        font-weight: 600;
-        font-family: var(--font-family-system);
+        font-weight: 500;
+        letter-spacing: -0.32px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-system-large .title {
         font-size: 30px;
         line-height: 36px;
-        font-weight: 600;
-        font-family: var(--font-family-system);
+        font-weight: 500;
+        letter-spacing: -0.25px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-system-medium .title {
         font-size: 26px;
         line-height: 32px;
-        font-weight: 600;
-        font-family: var(--font-family-system);
+        font-weight: 500;
+        letter-spacing: -0.25px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-system-small .title {
         font-size: 20px;
         line-height: 28px;
-        font-weight: 600;
-        font-family: var(--font-family-system);
+        font-weight: 500;
+        letter-spacing: -0.15px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-system-xsmall .title {
         font-size: 16px;
         line-height: 20px;
-        font-weight: 600;
-        font-family: var(--font-family-system);
+        font-weight: 500;
+        letter-spacing: 0.17px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-xlarge .title {
         font-size: 34px;
         line-height: 40px;
         font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        letter-spacing: -0.32px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-large .title {
         font-size: 30px;
         line-height: 36px;
         font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        letter-spacing: -0.25px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-medium .title {
         font-size: 26px;
         line-height: 32px;
         font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        letter-spacing: -0.25px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-small .title {
         font-size: 20px;
         line-height: 28px;
         font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        letter-spacing: -0.15px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-xsmall .title {
         font-size: 16px;
         line-height: 20px;
         font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
+        letter-spacing: 0.17px;
+        font-family: var(--font-family-alfasans);
     }
 .mobile.headline-system-xlarge .title, .mobile.headline-xlarge .title {
         padding-bottom: calc(40px / 2);
@@ -305,5 +317,6 @@
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 }

package/cssm/components/scroll-controls/Component.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { type RefObject } from 'react';
 import { type TabsProps } from '../../typings';
-declare type ScrollControlsProps = {
+type ScrollControlsProps = {
     className?: string;
     view: Exclude<TabsProps['view'], undefined>;
     size: TabsProps['size'];

package/cssm/components/scroll-controls/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/scroll-controls/Component.tsx"],"sourcesContent":["import React, { forwardRef, type RefObject, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport _debounce from 'lodash/debounce';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';\nimport { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';\n\nimport { type TabsProps } from '../../typings';\n\nimport { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';\n\nimport styles from './index.module.css';\n\ntype ScrollControlsProps = {\n className?: string;\n view: Exclude<TabsProps['view'], undefined>;\n size: TabsProps['size'];\n containerRef: RefObject<HTMLDivElement>;\n showSkeleton?: boolean;\n};\n\nexport const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(\n ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {\n const container = containerRef.current;\n const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));\n\n useEffect(() => {\n const handleScroll = _debounce(\n () => updateDisabledState(getDisabledState(container)),\n 100,\n { leading: true, maxWait: 100, trailing: true },\n );\n\n container?.addEventListener('scroll', handleScroll);\n\n return () => container?.removeEventListener('scroll', handleScroll);\n }, [container]);\n\n const getSize = () => {\n if (view === 'primary') {\n return sizeProp === 'xl' ? 32 : 24;\n }\n\n return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 48 : 32;\n };\n\n const handleScrollLeft = () => scrollIntoFirstTab(container);\n\n const handleScrollRight = () => scrollIntoLastTab(container);\n\n const commonButtonProps = {\n className: styles.button,\n size: getSize(),\n view: 'secondary',\n } as const;\n\n return (\n <div\n ref={ref}\n className={cn(\n styles.component,\n styles[view],\n sizeProp && styles[sizeProp],\n className,\n {\n [styles.borderVisible]: !disabledState.toRight,\n },\n )}\n >\n <IconButton\n {...commonButtonProps}\n icon={ChevronLeftCompactSIcon}\n disabled={disabledState.toLeft \|\| showSkeleton}\n onClick={handleScrollLeft}\n />\n <IconButton\n {...commonButtonProps}\n icon={ChevronRightCompactSIcon}\n disabled={disabledState.toRight \|\| showSkeleton}\n onClick={handleScrollRight}\n />\n </div>\n );\n },\n);\n\nScrollControls.displayName = 'ScrollControls';\n"],"names":["forwardRef","useState","getDisabledState","useEffect","_debounce","scrollIntoFirstTab","scrollIntoLastTab","styles","React","cn","IconButton","__assign","ChevronLeftCompactSIcon","ChevronRightCompactSIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;IAsBa,cAAc,GAAGA,gBAAU,CACpC,UAAC,EAA+D,EAAE,GAAG,EAAA;;AAAlE,IAAA,IAAA,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAQ,QAAQ,GAAA,EAAA,CAAA,IAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA;AAC1D,IAAA,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AAChC,IAAA,IAAA,KAAuCC,cAAQ,CAAC,cAAM,OAAAC,sBAAgB,CAAC,SAAS,CAAC,CAA3B,EAA2B,CAAC,EAAjF,aAAa,QAAA,EAAE,mBAAmB,QAA+C;AAExF,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,YAAY,GAAGC,0BAAS,CAC1B,cAAM,OAAA,mBAAmB,CAACF,sBAAgB,CAAC,SAAS,CAAC,CAAC,GAAA,EACtD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClD;QAED,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;AAEnD,QAAA,OAAO,cAAM,OAAA,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA,EAAA;AACvE,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,IAAM,OAAO,GAAG,YAAA;~~QACZ~~,IAAI,IAAI,KAAK,SAAS,EAAE;YACpB,OAAO,QAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE~~;AACrC;QAED~~,OAAO,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE;AACzE,KAAC;IAED,IAAM,gBAAgB,GAAG,YAAA,EAAM,OAAAG,wBAAkB,CAAC,SAAS,CAAC,CAA7B,EAA6B;IAE5D,IAAM,iBAAiB,GAAG,YAAA,EAAM,OAAAC,uBAAiB,CAAC,SAAS,CAAC,CAA5B,EAA4B;AAE5D,IAAA,IAAM,iBAAiB,GAAG;QACtB,SAAS,EAAEC,uBAAM,CAAC,MAAM;QACxB,IAAI,EAAE,OAAO,EAAE;AACf,QAAA,IAAI,EAAE,WAAW;KACX;IAEV,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CACTF,uBAAM,CAAC,SAAS,EAChBA,uBAAM,CAAC,IAAI,CAAC,EACZ,QAAQ,IAAIA,uBAAM,CAAC,QAAQ,CAAC,EAC5B,SAAS,GAAA,EAAA,GAAA,EAAA;AAEL,YAAA,EAAA,CAACA,uBAAM,CAAC,aAAa,IAAG,CAAC,aAAa,CAAC,OAAO;AAErD,YAAA,EAAA,EAAA,EAAA;AAED,QAAAC,sBAAA,CAAA,aAAA,CAACE,eAAU,EACHC,cAAA,CAAA,EAAA,EAAA,iBAAiB,IACrB,IAAI,EAAEC,+CAAuB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,IAAI,YAAY,EAC9C,OAAO,EAAE,gBAAgB,EAC3B,CAAA,CAAA;QACFJ,sBAAC,CAAA,aAAA,CAAAE,eAAU,qBACH,iBAAiB,EAAA,EACrB,IAAI,EAAEG,iDAAwB,EAC9B,QAAQ,EAAE,aAAa,CAAC,OAAO,IAAI,YAAY,EAC/C,OAAO,EAAE,iBAAiB,EAAA,CAAA,CAC5B,CACA;AAEd,CAAC;AAGL,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/scroll-controls/Component.tsx"],"sourcesContent":["import React, { forwardRef, type RefObject, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport _debounce from 'lodash/debounce';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';\nimport { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';\n\nimport { type TabsProps } from '../../typings';\n\nimport { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';\n\nimport styles from './index.module.css';\n\ntype ScrollControlsProps = {\n className?: string;\n view: Exclude<TabsProps['view'], undefined>;\n size: TabsProps['size'];\n containerRef: RefObject<HTMLDivElement>;\n showSkeleton?: boolean;\n};\n\nexport const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(\n ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {\n const container = containerRef.current;\n const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));\n\n useEffect(() => {\n const handleScroll = _debounce(\n () => updateDisabledState(getDisabledState(container)),\n 100,\n { leading: true, maxWait: 100, trailing: true },\n );\n\n container?.addEventListener('scroll', handleScroll);\n\n return () => container?.removeEventListener('scroll', handleScroll);\n }, [container]);\n\n const getSize = () => {\n if (view === 'primary') {\n return sizeProp === 'xl' ? 32 : 24;\n }\n\n return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 48 : 32;\n };\n\n const handleScrollLeft = () => scrollIntoFirstTab(container);\n\n const handleScrollRight = () => scrollIntoLastTab(container);\n\n const commonButtonProps = {\n className: styles.button,\n size: getSize(),\n view: 'secondary',\n } as const;\n\n return (\n <div\n ref={ref}\n className={cn(\n styles.component,\n styles[view],\n sizeProp && styles[sizeProp],\n className,\n {\n [styles.borderVisible]: !disabledState.toRight,\n },\n )}\n >\n <IconButton\n {...commonButtonProps}\n icon={ChevronLeftCompactSIcon}\n disabled={disabledState.toLeft \|\| showSkeleton}\n onClick={handleScrollLeft}\n />\n <IconButton\n {...commonButtonProps}\n icon={ChevronRightCompactSIcon}\n disabled={disabledState.toRight \|\| showSkeleton}\n onClick={handleScrollRight}\n />\n </div>\n );\n },\n);\n\nScrollControls.displayName = 'ScrollControls';\n"],"names":["forwardRef","useState","getDisabledState","useEffect","_debounce","scrollIntoFirstTab","scrollIntoLastTab","styles","React","cn","IconButton","__assign","ChevronLeftCompactSIcon","ChevronRightCompactSIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;IAsBa,cAAc,GAAGA,gBAAU,CACpC,UAAC,EAA+D,EAAE,GAAG,EAAA;;AAAlE,IAAA,IAAA,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAQ,QAAQ,GAAA,EAAA,CAAA,IAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA;AAC1D,IAAA,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AAChC,IAAA,IAAA,KAAuCC,cAAQ,CAAC,cAAM,OAAAC,sBAAgB,CAAC,SAAS,CAAC,CAA3B,EAA2B,CAAC,EAAjF,aAAa,QAAA,EAAE,mBAAmB,QAA+C;AAExF,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,YAAY,GAAGC,0BAAS,CAC1B,cAAM,OAAA,mBAAmB,CAACF,sBAAgB,CAAC,SAAS,CAAC,CAAC,GAAA,EACtD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClD;QAED,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;AAEnD,QAAA,OAAO,cAAM,OAAA,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA,EAAA;AACvE,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,IAAM,OAAO,GAAG,YAAA;AACZ,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;YACpB,OAAO,QAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;;QAGtC,OAAO,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE;AACzE,KAAC;IAED,IAAM,gBAAgB,GAAG,YAAA,EAAM,OAAAG,wBAAkB,CAAC,SAAS,CAAC,CAA7B,EAA6B;IAE5D,IAAM,iBAAiB,GAAG,YAAA,EAAM,OAAAC,uBAAiB,CAAC,SAAS,CAAC,CAA5B,EAA4B;AAE5D,IAAA,IAAM,iBAAiB,GAAG;QACtB,SAAS,EAAEC,uBAAM,CAAC,MAAM;QACxB,IAAI,EAAE,OAAO,EAAE;AACf,QAAA,IAAI,EAAE,WAAW;KACX;IAEV,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CACTF,uBAAM,CAAC,SAAS,EAChBA,uBAAM,CAAC,IAAI,CAAC,EACZ,QAAQ,IAAIA,uBAAM,CAAC,QAAQ,CAAC,EAC5B,SAAS,GAAA,EAAA,GAAA,EAAA;AAEL,YAAA,EAAA,CAACA,uBAAM,CAAC,aAAa,IAAG,CAAC,aAAa,CAAC,OAAO;AAErD,YAAA,EAAA,EAAA,EAAA;AAED,QAAAC,sBAAA,CAAA,aAAA,CAACE,eAAU,EACHC,cAAA,CAAA,EAAA,EAAA,iBAAiB,IACrB,IAAI,EAAEC,+CAAuB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,IAAI,YAAY,EAC9C,OAAO,EAAE,gBAAgB,EAC3B,CAAA,CAAA;QACFJ,sBAAC,CAAA,aAAA,CAAAE,eAAU,qBACH,iBAAiB,EAAA,EACrB,IAAI,EAAEG,iDAAwB,EAC9B,QAAQ,EAAE,aAAa,CAAC,OAAO,IAAI,YAAY,EAC/C,OAAO,EAAE,iBAAiB,EAAA,CAAA,CAC5B,CACA;AAEd,CAAC;AAGL,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/cssm/components/scroll-controls/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../src/components/scroll-controls/utils.ts"],"sourcesContent":["const ADDITIONAL_OFFSET = 15;\n\nfunction getTabs(container: HTMLDivElement) {\n return Array.from(container.querySelectorAll<HTMLButtonElement>('button[role=\"tab\"]'));\n}\n\nfunction findLastVisibleTab(container: HTMLDivElement) {\n const tabs = getTabs(container);\n\n return tabs.reduce((res, tab) => {\n if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {\n return tab;\n }\n\n return res;\n }, tabs[0]);\n}\n\nfunction findFirstVisibleTab(container: HTMLDivElement) {\n const tabs = getTabs(container);\n\n return tabs.reduceRight(\n (res, tab) => {\n if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {\n return tab;\n }\n\n return res;\n },\n tabs[tabs.length - 1],\n );\n}\n\nexport function scrollIntoLastTab(container: HTMLDivElement \| null) {\n if (!container) return;\n\n findLastVisibleTab(container).scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'start',\n });\n}\n\nexport function scrollIntoFirstTab(container: HTMLDivElement \| null) {\n if (!container) return;\n\n findFirstVisibleTab(container).scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'end',\n });\n}\n\nexport function getDisabledState(container: HTMLDivElement \| null) {\n if (!container) return { toLeft: false, toRight: false };\n const scrollOffset = 2;\n\n const toLeft = container.scrollLeft <= scrollOffset;\n const toRight =\n container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;\n\n return { toLeft, toRight };\n}\n"],"names":[],"mappings":";;;;AAAA,IAAM,iBAAiB,GAAG,EAAE;AAE5B,SAAS,OAAO,CAAC,SAAyB,EAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAoB,oBAAoB,CAAC,CAAC;AAC1F;AAEA,SAAS,kBAAkB,CAAC,SAAyB,EAAA;AACjD,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;AAE/B,IAAA,OAAO,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,GAAG,EAAA;AACxB,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;AACnF,YAAA,OAAO,GAAG~~;AACb;AAED~~,QAAA,OAAO,GAAG;AACd,KAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACf;AAEA,SAAS,mBAAmB,CAAC,SAAyB,EAAA;AAClD,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;AAE/B,IAAA,OAAO,IAAI,CAAC,WAAW,CACnB,UAAC,GAAG,EAAE,GAAG,EAAA;AACL,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,GAAG,iBAAiB,EAAE;AAC7E,YAAA,OAAO,GAAG~~;AACb;AAED~~,QAAA,OAAO,GAAG;KACb,EACD,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CACxB;AACL;AAEM,SAAU,iBAAiB,CAAC,SAAgC,EAAA;AAC9D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,kBAAkB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AACzC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,OAAO;AAClB,KAAA,CAAC;AACN;AAEM,SAAU,kBAAkB,CAAC,SAAgC,EAAA;AAC/D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AAC1C,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC;AACN;AAEM,SAAU,gBAAgB,CAAC,SAAgC,EAAA;AAC7D,IAAA,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;IACxD,IAAM,YAAY,GAAG,CAAC;AAEtB,IAAA,IAAM,MAAM,GAAG,SAAS,CAAC,UAAU,IAAI,YAAY;AACnD,IAAA,IAAM,OAAO,GACT,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,GAAG,YAAY;AAExF,IAAA,OAAO,EAAE,MAAM,EAAA,MAAA,EAAE,OAAO,EAAA,OAAA,EAAE;AAC9B;;;;;;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../src/components/scroll-controls/utils.ts"],"sourcesContent":["const ADDITIONAL_OFFSET = 15;\n\nfunction getTabs(container: HTMLDivElement) {\n return Array.from(container.querySelectorAll<HTMLButtonElement>('button[role=\"tab\"]'));\n}\n\nfunction findLastVisibleTab(container: HTMLDivElement) {\n const tabs = getTabs(container);\n\n return tabs.reduce((res, tab) => {\n if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {\n return tab;\n }\n\n return res;\n }, tabs[0]);\n}\n\nfunction findFirstVisibleTab(container: HTMLDivElement) {\n const tabs = getTabs(container);\n\n return tabs.reduceRight(\n (res, tab) => {\n if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {\n return tab;\n }\n\n return res;\n },\n tabs[tabs.length - 1],\n );\n}\n\nexport function scrollIntoLastTab(container: HTMLDivElement \| null) {\n if (!container) return;\n\n findLastVisibleTab(container).scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'start',\n });\n}\n\nexport function scrollIntoFirstTab(container: HTMLDivElement \| null) {\n if (!container) return;\n\n findFirstVisibleTab(container).scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'end',\n });\n}\n\nexport function getDisabledState(container: HTMLDivElement \| null) {\n if (!container) return { toLeft: false, toRight: false };\n const scrollOffset = 2;\n\n const toLeft = container.scrollLeft <= scrollOffset;\n const toRight =\n container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;\n\n return { toLeft, toRight };\n}\n"],"names":[],"mappings":";;;;AAAA,IAAM,iBAAiB,GAAG,EAAE;AAE5B,SAAS,OAAO,CAAC,SAAyB,EAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAoB,oBAAoB,CAAC,CAAC;AAC1F;AAEA,SAAS,kBAAkB,CAAC,SAAyB,EAAA;AACjD,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;AAE/B,IAAA,OAAO,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,GAAG,EAAA;AACxB,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;AACnF,YAAA,OAAO,GAAG;;AAGd,QAAA,OAAO,GAAG;AACd,KAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACf;AAEA,SAAS,mBAAmB,CAAC,SAAyB,EAAA;AAClD,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;AAE/B,IAAA,OAAO,IAAI,CAAC,WAAW,CACnB,UAAC,GAAG,EAAE,GAAG,EAAA;AACL,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,GAAG,iBAAiB,EAAE;AAC7E,YAAA,OAAO,GAAG;;AAGd,QAAA,OAAO,GAAG;KACb,EACD,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CACxB;AACL;AAEM,SAAU,iBAAiB,CAAC,SAAgC,EAAA;AAC9D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,kBAAkB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AACzC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,OAAO;AAClB,KAAA,CAAC;AACN;AAEM,SAAU,kBAAkB,CAAC,SAAgC,EAAA;AAC/D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AAC1C,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC;AACN;AAEM,SAAU,gBAAgB,CAAC,SAAgC,EAAA;AAC7D,IAAA,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;IACxD,IAAM,YAAY,GAAG,CAAC;AAEtB,IAAA,IAAM,MAAM,GAAG,SAAS,CAAC,UAAU,IAAI,YAAY;AACnD,IAAA,IAAM,OAAO,GACT,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,GAAG,YAAY;AAExF,IAAA,OAAO,EAAE,MAAM,EAAA,MAAA,EAAE,OAAO,EAAA,OAAA,EAAE;AAC9B;;;;;;"}

package/cssm/components/scrollable-container/Component.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type PlatformProps, type TabsProps } from '../../typings';
-export declare type ScrollableContainerProps = {
+export type ScrollableContainerProps = {
     /**
      * Дополнительный класс враппера контейнера
      */
@@ -38,4 +38,4 @@ export declare type ScrollableContainerProps = {
      */
     showSkeleton?: boolean;
 };
-export declare const ScrollableContainer: ({ containerWrapperClassName, containerClassName, scrollControlsClassName, children, activeChild, fullWidthScroll, view, size, platform, inlineStyle, showSkeleton, }: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => React.JSX.Element;
+export declare const ScrollableContainer: ({ containerWrapperClassName, containerClassName, scrollControlsClassName, children, activeChild, fullWidthScroll, view, size, platform, inlineStyle, showSkeleton, }: ScrollableContainerProps & Pick<TabsProps, "fullWidthScroll"> & PlatformProps) => React.JSX.Element;