@alfalab/core-components-tabs 9.1.0 → 9.2.0

package/src/components/primary-tablist/Component.collapsible.tsx

@@ -1,16 +1,16 @@
-import React, { Ref, useEffect, useMemo, useRef } from 'react';
+import React, { type Ref, useEffect, useMemo, useRef } from 'react';
 import cn from 'classnames';
 
 import { Badge } from '@alfalab/core-components-badge';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
 import {
     PickerButtonDesktop,
-    PickerButtonDesktopProps,
+    type PickerButtonDesktopProps,
 } from '@alfalab/core-components-picker-button/desktop';
 
 import { useTablistTitles } from '../../hooks/use-tablist-titles';
 import { createSyntheticMouseEvent } from '../../synthetic-events';
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 import { Title } from '../title';
 
 import styles from './index.module.css';

package/src/components/primary-tablist/Component.desktop.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 
 import { PrimaryTabList } from './Component';
 

package/src/components/primary-tablist/Component.mobile.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 
 import { PrimaryTabList } from './Component';
 

package/src/components/primary-tablist/Component.responsive.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 
 import { PrimaryTabListDesktop } from './Component.desktop';
 import { PrimaryTabListMobile } from './Component.mobile';

package/src/components/primary-tablist/Component.tsx

@@ -6,7 +6,7 @@ import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
 import { fnUtils } from '@alfalab/core-components-shared';
 
 import { useTabs } from '../../hooks/use-tabs';
-import { PlatformProps, Styles, TabListProps } from '../../typings';
+import { type PlatformProps, type Styles, type TabListProps } from '../../typings';
 import { ScrollableContainer } from '../scrollable-container';
 import { Title } from '../title';
 

package/src/components/primary-tablist/index.module.css

@@ -83,7 +83,9 @@
     bottom: var(--gap-0);
     left: var(--gap-0);
     background-color: var(--primary-tablist-line-color);
-    transition: transform 0.2s ease, width 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        width 0.2s ease;
 }
 
 .option {

package/src/components/scroll-controls/Component.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, RefObject, useEffect, useState } from 'react';
+import React, { forwardRef, type RefObject, useEffect, useState } from 'react';
 import cn from 'classnames';
 import _debounce from 'lodash/debounce';
 
@@ -6,7 +6,7 @@ import { IconButton } from '@alfalab/core-components-icon-button';
 import { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 
 import { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';
 

package/src/components/scroll-controls/utils.ts

@@ -1,7 +1,7 @@
 const ADDITIONAL_OFFSET = 15;
 
 function getTabs(container: HTMLDivElement) {
-    return Array.from(container.querySelectorAll('button[role="tab"]')) as HTMLButtonElement[];
+    return Array.from(container.querySelectorAll<HTMLButtonElement>('button[role="tab"]'));
 }
 
 function findLastVisibleTab(container: HTMLDivElement) {
@@ -19,13 +19,16 @@ function findLastVisibleTab(container: HTMLDivElement) {
 function findFirstVisibleTab(container: HTMLDivElement) {
     const tabs = getTabs(container);
 
-    return tabs.reduceRight((res, tab) => {
-        if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {
-            return tab;
-        }
+    return tabs.reduceRight(
+        (res, tab) => {
+            if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {
+                return tab;
+            }
 
-        return res;
-    }, tabs[tabs.length - 1]);
+            return res;
+        },
+        tabs[tabs.length - 1],
+    );
 }
 
 export function scrollIntoLastTab(container: HTMLDivElement | null) {

package/src/components/scrollable-container/Component.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { type ReactNode, useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 import { compute } from 'compute-scroll-into-view';
 
-import { PlatformProps, TabsProps } from '../../typings';
+import { type PlatformProps, type TabsProps } from '../../typings';
 import { ScrollControls } from '../scroll-controls';
 
 import styles from './index.module.css';

package/src/components/secondary-tablist/Component.desktop.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { TagDesktop } from '@alfalab/core-components-tag/desktop';
 
-import { SecondaryTabListProps } from '../../typings';
+import { type SecondaryTabListProps } from '../../typings';
 
 import { SecondaryTabList } from './Component';
 

package/src/components/secondary-tablist/Component.mobile.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { TagMobile } from '@alfalab/core-components-tag/mobile';
 
-import { SecondaryTabListProps } from '../../typings';
+import { type SecondaryTabListProps } from '../../typings';
 
 import { SecondaryTabList } from './Component';
 

package/src/components/secondary-tablist/Component.responsive.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import { SecondaryTabListProps } from '../../typings';
+import { type SecondaryTabListProps } from '../../typings';
 
 import { SecondaryTabListDesktop } from './Component.desktop';
 import { SecondaryTabListMobile } from './Component.mobile';

package/src/components/secondary-tablist/Component.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { Skeleton } from '@alfalab/core-components-skeleton';
 
 import { useTabs } from '../../hooks/use-tabs';
-import { PlatformProps, SecondaryTabListProps, Styles } from '../../typings';
+import { type PlatformProps, type SecondaryTabListProps, type Styles } from '../../typings';
 import { ScrollableContainer } from '../scrollable-container';
 
 function getBorderRadius(

package/src/components/tab/Component.tsx

@@ -1,8 +1,7 @@
-import type { AriaAttributes } from 'react';
-import React from 'react';
+import React, { type AriaAttributes } from 'react';
 import cn from 'classnames';
 
-import { TabProps } from '../../typings';
+import { type TabProps } from '../../typings';
 
 import styles from './index.module.css';
 

package/src/components/tabs/Component.collapsible.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 import { CollapsiblePrimaryTabList } from '../primary-tablist/Component.collapsible';
 
 import { Tabs } from './Component';

package/src/components/tabs/Component.desktop.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop';
 import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop';
 

package/src/components/tabs/Component.mobile.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile';
 import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile';
 

package/src/components/tabs/Component.responsive.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive';
 import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive';
 

package/src/components/tabs/Component.tsx

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 
 export const Tabs = ({
     TabList,
@@ -24,9 +24,11 @@ export const Tabs = ({
     skeletonProps,
     textStyle,
     style,
+    titleProps,
     ...restProps
 }: Omit<TabsProps, 'view'>) => {
     const tabsArray = React.Children.toArray(children) as TabsProps['children'];
+
     const titles = tabsArray.map(
         ({
             props: {
@@ -48,6 +50,7 @@ export const Tabs = ({
             toggleClassName,
             dataTestId: toggleTestId,
             toggleRef,
+            ...titleProps,
         }),
     );
 

package/src/components/title/Component.tsx

@@ -1,10 +1,10 @@
-import React, { ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
+import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Skeleton, SkeletonProps } from '@alfalab/core-components-skeleton';
+import { Skeleton, type SkeletonProps } from '@alfalab/core-components-skeleton';
 
-import { Styles, TabListTitle } from '../../typings';
+import { type Styles, type TabListTitle } from '../../typings';
 
 type Props = TabListTitle &
     Styles &

package/src/hooks/use-collapsible-elements.ts

@@ -1,4 +1,4 @@
-import { DependencyList, useRef, useState } from 'react';
+import { type DependencyList, useRef, useState } from 'react';
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
@@ -24,7 +24,7 @@ export const useCollapsibleElements = <
             const addon = addonRef.current;
             const containerWidth =
                 (inlineSize || container.clientWidth) - (addon?.scrollWidth || 0) * 1.5; // при расчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
-            const elements = Array.from(container.querySelectorAll(selectors)) as HTMLElement[];
+            const elements = Array.from(container.querySelectorAll<HTMLElement>(selectors));
 
             const collapsedIds = elements.reduce<string[]>((acc, element) => {
                 const { offsetLeft, scrollWidth, id } = element;

package/src/hooks/use-tablist-titles.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import { TabListProps } from '../typings';
+import { type TabListProps } from '../typings';
 
 import { useCollapsibleElements } from './use-collapsible-elements';
 import { useTabs } from './use-tabs';

package/src/hooks/{use-tabs.tsx → use-tabs.ts}

@@ -1,8 +1,8 @@
 import {
-    KeyboardEvent,
-    MouseEvent,
-    MutableRefObject,
-    Ref,
+    type KeyboardEvent,
+    type MouseEvent,
+    type MutableRefObject,
+    type Ref,
     useCallback,
     useRef,
     useState,
@@ -11,7 +11,7 @@ import mergeRefs from 'react-merge-refs';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
-import { TabListTitle, UseTabsProps } from '../typings';
+import { type TabListTitle, type UseTabsProps } from '../typings';
 
 export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
     const [selectedTab, setSelectedTab] = useState<HTMLButtonElement | null>(null);

package/src/synthetic-events.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export const createSyntheticEvent = <T extends Element, E extends Event>(
     event: E,

package/src/typings.ts

@@ -1,14 +1,33 @@
-import { AriaAttributes, FC, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
-
-import { SkeletonProps } from '@alfalab/core-components-skeleton';
-import { TagProps } from '@alfalab/core-components-tag';
+import {
+    type AriaAttributes,
+    type FC,
+    type HTMLAttributes,
+    type MouseEvent,
+    type ReactElement,
+    type ReactNode,
+    type Ref,
+} from 'react';
+
+import { type SkeletonProps } from '@alfalab/core-components-skeleton';
+import { type TagProps } from '@alfalab/core-components-tag';
 
 export type SelectedId = string | number;
-
-export interface TabsProps extends Omit<
-    HTMLAttributes<HTMLDivElement>,
-    'onChange' | 'children' | 'className'
->, AriaAttributes {
+export type TitleProps = Omit<
+    HTMLAttributes<HTMLButtonElement>,
+    | 'onClick'
+    | 'onKeyDown'
+    | 'className'
+    | 'disabled'
+    | 'id'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-selected'
+> &
+    AriaAttributes;
+
+export interface TabsProps
+    extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'className'>,
+        AriaAttributes {
     /**
      * Дополнительный класс
      */
@@ -38,25 +57,25 @@ export interface TabsProps extends Omit<
      * Стиль текста. Имеет приоритет над size. Работает только в primary табах.
      */
     textStyle?:
-    | 'paragraph-primary-large'
-    | 'paragraph-primary-medium'
-    | 'paragraph-primary-small'
-    | 'action-primary-large'
-    | 'action-primary-medium'
-    | 'action-primary-small'
-    | 'accent-primary-large'
-    | 'accent-primary-medium'
-    | 'accent-primary-small'
-    | 'headline-system-xlarge'
-    | 'headline-system-large'
-    | 'headline-system-medium'
-    | 'headline-system-small'
-    | 'headline-system-xsmall'
-    | 'headline-xlarge'
-    | 'headline-large'
-    | 'headline-medium'
-    | 'headline-small'
-    | 'headline-xsmall';
+        | 'paragraph-primary-large'
+        | 'paragraph-primary-medium'
+        | 'paragraph-primary-small'
+        | 'action-primary-large'
+        | 'action-primary-medium'
+        | 'action-primary-small'
+        | 'accent-primary-large'
+        | 'accent-primary-medium'
+        | 'accent-primary-small'
+        | 'headline-system-xlarge'
+        | 'headline-system-large'
+        | 'headline-system-medium'
+        | 'headline-system-small'
+        | 'headline-system-xsmall'
+        | 'headline-xlarge'
+        | 'headline-large'
+        | 'headline-medium'
+        | 'headline-small'
+        | 'headline-xsmall';
 
     /**
      * Высота заголовков табов
@@ -144,6 +163,11 @@ export interface TabsProps extends Omit<
      * Доп. пропсы для скелетона
      */
     skeletonProps?: Omit<SkeletonProps, 'visible'>;
+
+    /**
+     * Доп. пропсы для заголовка таба
+     */
+    titleProps?: TitleProps;
 }
 
 export interface TabProps extends AriaAttributes {
@@ -201,9 +225,14 @@ export interface TabProps extends AriaAttributes {
      * Реф для кнопки переключения таба
      */
     toggleRef?: Ref<HTMLDivElement>;
+
+    /**
+     * Доп. пропсы для заголовка таба
+     */
+    titleProps?: TitleProps;
 }
 
-export interface TabListTitle {
+export interface TabListTitle extends AriaAttributes {
     title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
@@ -214,26 +243,28 @@ export interface TabListTitle {
     collapsed?: boolean;
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
+    titleProps?: TitleProps;
 }
 
-export interface TabListProps extends Pick<
-    TabsProps,
-    | 'className'
-    | 'containerClassName'
-    | 'size'
-    | 'defaultMatchMediaValue'
-    | 'selectedId'
-    | 'scrollable'
-    | 'collapsedTabsIds'
-    | 'onChange'
-    | 'dataTestId'
-    | 'fullWidthScroll'
-    | 'tagShape'
-    | 'tagView'
-    | 'textStyle'
-    | 'showSkeleton'
-    | 'skeletonProps'
-> {
+export interface TabListProps
+    extends Pick<
+        TabsProps,
+        | 'className'
+        | 'containerClassName'
+        | 'size'
+        | 'defaultMatchMediaValue'
+        | 'selectedId'
+        | 'scrollable'
+        | 'collapsedTabsIds'
+        | 'onChange'
+        | 'dataTestId'
+        | 'fullWidthScroll'
+        | 'tagShape'
+        | 'tagView'
+        | 'textStyle'
+        | 'showSkeleton'
+        | 'skeletonProps'
+    > {
     /**
      * Заголовки табов
      */

package/synthetic-events.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => React.SyntheticEvent<T, E>;
 export declare const createUIEvent: <T extends Element, E extends Event>(event: E) => React.UIEvent<T, E>;
 export declare const createSyntheticMouseEvent: <T extends Element>(event: MouseEvent) => React.MouseEvent<T, MouseEvent>;

package/synthetic-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"synthetic-events.js","sources":["src/synthetic-events.ts"],"sourcesContent":["import React from 'react';\n\nexport const createSyntheticEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.SyntheticEvent<T, E> => {\n    let isDefaultPrevented = false;\n    let isPropagationStopped = false;\n    const preventDefault = () => {\n        isDefaultPrevented = true;\n        event.preventDefault();\n    };\n    const stopPropagation = () => {\n        isPropagationStopped = true;\n        event.stopPropagation();\n    };\n\n    return {\n        nativeEvent: event,\n        currentTarget: event.currentTarget as EventTarget & T,\n        target: event.target as EventTarget & T,\n        bubbles: event.bubbles,\n        cancelable: event.cancelable,\n        defaultPrevented: event.defaultPrevented,\n        eventPhase: event.eventPhase,\n        isTrusted: event.isTrusted,\n        preventDefault,\n        isDefaultPrevented: () => isDefaultPrevented,\n        stopPropagation,\n        isPropagationStopped: () => isPropagationStopped,\n        persist: () => {},\n        timeStamp: event.timeStamp,\n        type: event.type,\n    };\n};\n\nexport const createUIEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.UIEvent<T, E> => ({\n    ...createSyntheticEvent(event),\n    detail: 0,\n    view: {\n        styleMedia: {\n            type: '',\n            matchMedium: () => false,\n        },\n        document,\n    },\n});\n\nexport const createSyntheticMouseEvent = <T extends Element>(\n    event: MouseEvent,\n): React.MouseEvent<T, MouseEvent> => ({\n    ...createUIEvent<T, MouseEvent>(event),\n    altKey: event.altKey,\n    button: event.button,\n    buttons: event.buttons,\n    clientX: event.clientX,\n    clientY: event.clientY,\n    ctrlKey: event.ctrlKey,\n    getModifierState: event.getModifierState,\n    metaKey: event.metaKey,\n    movementX: event.movementX,\n    movementY: event.movementY,\n    pageX: event.pageX,\n    pageY: event.pageY,\n    relatedTarget: event.relatedTarget,\n    screenX: event.screenX,\n    screenY: event.screenY,\n    shiftKey: event.shiftKey,\n});\n"],"names":["__assign"],"mappings":";;;;;;AAEO,IAAM,oBAAoB,GAAG,UAChC,KAAQ,EAAA;IAER,IAAI,kBAAkB,GAAG,KAAK;IAC9B,IAAI,oBAAoB,GAAG,KAAK;AAChC,IAAA,IAAM,cAAc,GAAG,YAAA;QACnB,kBAAkB,GAAG,IAAI;QACzB,KAAK,CAAC,cAAc,EAAE;AAC1B,KAAC;AACD,IAAA,IAAM,eAAe,GAAG,YAAA;QACpB,oBAAoB,GAAG,IAAI;QAC3B,KAAK,CAAC,eAAe,EAAE;AAC3B,KAAC;IAED,OAAO;AACH,QAAA,WAAW,EAAE,KAAK;QAClB,aAAa,EAAE,KAAK,CAAC,aAAgC;QACrD,MAAM,EAAE,KAAK,CAAC,MAAyB;QACvC,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS,EAAE,KAAK,CAAC,SAAS;AAC1B,QAAA,cAAc,EAAA,cAAA;AACd,QAAA,kBAAkB,EAAE,YAAA,EAAM,OAAA,kBAAkB,GAAA;AAC5C,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,oBAAoB,EAAE,YAAA,EAAM,OAAA,oBAAoB,GAAA;QAChD,OAAO,EAAE,eAAQ;QACjB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,IAAI,EAAE,KAAK,CAAC,IAAI;KACnB;AACL;AAEa,IAAA,aAAa,GAAG,UACzB,KAAQ,IACc,QAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACnB,oBAAoB,CAAC,KAAK,CAAC,CAC9B,EAAA,EAAA,MAAM,EAAE,CAAC,EACT,IAAI,EAAE;AACF,QAAA,UAAU,EAAE;AACR,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,WAAW,EAAE,YAAA,EAAM,OAAA,KAAK,GAAA;AAC3B,SAAA;AACD,QAAA,QAAQ,EAAA,QAAA;KACX,EACH,CAAA,EAAA;AAEW,IAAA,yBAAyB,GAAG,UACrC,KAAiB,EACiB,EAAA,QAC/BA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,aAAa,CAAgB,KAAK,CAAC,CACtC,EAAA,EAAA,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAAA,EAjBU;;;;;;"}
+{"version":3,"file":"synthetic-events.js","sources":["src/synthetic-events.ts"],"sourcesContent":["import type React from 'react';\n\nexport const createSyntheticEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.SyntheticEvent<T, E> => {\n    let isDefaultPrevented = false;\n    let isPropagationStopped = false;\n    const preventDefault = () => {\n        isDefaultPrevented = true;\n        event.preventDefault();\n    };\n    const stopPropagation = () => {\n        isPropagationStopped = true;\n        event.stopPropagation();\n    };\n\n    return {\n        nativeEvent: event,\n        currentTarget: event.currentTarget as EventTarget & T,\n        target: event.target as EventTarget & T,\n        bubbles: event.bubbles,\n        cancelable: event.cancelable,\n        defaultPrevented: event.defaultPrevented,\n        eventPhase: event.eventPhase,\n        isTrusted: event.isTrusted,\n        preventDefault,\n        isDefaultPrevented: () => isDefaultPrevented,\n        stopPropagation,\n        isPropagationStopped: () => isPropagationStopped,\n        persist: () => {},\n        timeStamp: event.timeStamp,\n        type: event.type,\n    };\n};\n\nexport const createUIEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.UIEvent<T, E> => ({\n    ...createSyntheticEvent(event),\n    detail: 0,\n    view: {\n        styleMedia: {\n            type: '',\n            matchMedium: () => false,\n        },\n        document,\n    },\n});\n\nexport const createSyntheticMouseEvent = <T extends Element>(\n    event: MouseEvent,\n): React.MouseEvent<T, MouseEvent> => ({\n    ...createUIEvent<T, MouseEvent>(event),\n    altKey: event.altKey,\n    button: event.button,\n    buttons: event.buttons,\n    clientX: event.clientX,\n    clientY: event.clientY,\n    ctrlKey: event.ctrlKey,\n    getModifierState: event.getModifierState,\n    metaKey: event.metaKey,\n    movementX: event.movementX,\n    movementY: event.movementY,\n    pageX: event.pageX,\n    pageY: event.pageY,\n    relatedTarget: event.relatedTarget,\n    screenX: event.screenX,\n    screenY: event.screenY,\n    shiftKey: event.shiftKey,\n});\n"],"names":["__assign"],"mappings":";;;;;;AAEO,IAAM,oBAAoB,GAAG,UAChC,KAAQ,EAAA;IAER,IAAI,kBAAkB,GAAG,KAAK;IAC9B,IAAI,oBAAoB,GAAG,KAAK;AAChC,IAAA,IAAM,cAAc,GAAG,YAAA;QACnB,kBAAkB,GAAG,IAAI;QACzB,KAAK,CAAC,cAAc,EAAE;AAC1B,KAAC;AACD,IAAA,IAAM,eAAe,GAAG,YAAA;QACpB,oBAAoB,GAAG,IAAI;QAC3B,KAAK,CAAC,eAAe,EAAE;AAC3B,KAAC;IAED,OAAO;AACH,QAAA,WAAW,EAAE,KAAK;QAClB,aAAa,EAAE,KAAK,CAAC,aAAgC;QACrD,MAAM,EAAE,KAAK,CAAC,MAAyB;QACvC,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS,EAAE,KAAK,CAAC,SAAS;AAC1B,QAAA,cAAc,EAAA,cAAA;AACd,QAAA,kBAAkB,EAAE,YAAA,EAAM,OAAA,kBAAkB,GAAA;AAC5C,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,oBAAoB,EAAE,YAAA,EAAM,OAAA,oBAAoB,GAAA;QAChD,OAAO,EAAE,eAAQ;QACjB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,IAAI,EAAE,KAAK,CAAC,IAAI;KACnB;AACL;AAEa,IAAA,aAAa,GAAG,UACzB,KAAQ,IACc,QAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACnB,oBAAoB,CAAC,KAAK,CAAC,CAC9B,EAAA,EAAA,MAAM,EAAE,CAAC,EACT,IAAI,EAAE;AACF,QAAA,UAAU,EAAE;AACR,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,WAAW,EAAE,YAAA,EAAM,OAAA,KAAK,GAAA;AAC3B,SAAA;AACD,QAAA,QAAQ,EAAA,QAAA;KACX,EACH,CAAA,EAAA;AAEW,IAAA,yBAAyB,GAAG,UACrC,KAAiB,EACiB,EAAA,QAC/BA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,aAAa,CAAgB,KAAK,CAAC,CACtC,EAAA,EAAA,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAAA,EAjBU;;;;;;"}

package/typings.d.ts

@@ -1,7 +1,8 @@
-import { AriaAttributes, FC, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
-import { SkeletonProps } from '@alfalab/core-components-skeleton';
-import { TagProps } from '@alfalab/core-components-tag';
+import { type AriaAttributes, type FC, type HTMLAttributes, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type SkeletonProps } from '@alfalab/core-components-skeleton';
+import { type TagProps } from '@alfalab/core-components-tag';
 export declare type SelectedId = string | number;
+export declare type TitleProps = Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'className' | 'disabled' | 'id' | 'role' | 'tabIndex' | 'aria-selected'> & AriaAttributes;
 export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'className'>, AriaAttributes {
     /**
      * Дополнительный класс
@@ -99,6 +100,10 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
      * Доп. пропсы для скелетона
      */
     skeletonProps?: Omit<SkeletonProps, 'visible'>;
+    /**
+     * Доп. пропсы для заголовка таба
+     */
+    titleProps?: TitleProps;
 }
 export interface TabProps extends AriaAttributes {
     /**
@@ -145,8 +150,12 @@ export interface TabProps extends AriaAttributes {
      * Реф для кнопки переключения таба
      */
     toggleRef?: Ref<HTMLDivElement>;
+    /**
+     * Доп. пропсы для заголовка таба
+     */
+    titleProps?: TitleProps;
 }
-export interface TabListTitle {
+export interface TabListTitle extends AriaAttributes {
     title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
@@ -157,6 +166,7 @@ export interface TabListTitle {
     collapsed?: boolean;
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
+    titleProps?: TitleProps;
 }
 export interface TabListProps extends Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> {
     /**