| 1 | import * as React from 'react';
|
| 2 | import { UseButtonRootSlotProps } from '../useButton';
|
| 3 | export interface UseTabParameters {
|
| 4 | /**
|
| 5 | * The value of the tab.
|
| 6 | * It's used to associate the tab with a tab panel(s) with the same value.
|
| 7 | * If the value is not provided, it falls back to the position index.
|
| 8 | */
|
| 9 | value?: number | string;
|
| 10 | /**
|
| 11 | * If `true`, the tab will be disabled.
|
| 12 | */
|
| 13 | onChange?: (event: React.SyntheticEvent, value: number | string) => void;
|
| 14 | /**
|
| 15 | * Callback fired when the tab is clicked.
|
| 16 | */
|
| 17 | onClick?: React.MouseEventHandler;
|
| 18 | /**
|
| 19 | * If `true`, the tab will be disabled.
|
| 20 | */
|
| 21 | disabled?: boolean;
|
| 22 | /**
|
| 23 | * The id of the tab.
|
| 24 | * If not provided, it will be automatically generated.
|
| 25 | */
|
| 26 | id?: string;
|
| 27 | /**
|
| 28 | * Ref to the root slot's DOM element.
|
| 29 | */
|
| 30 | rootRef?: React.Ref<Element>;
|
| 31 | }
|
| 32 | export type UseTabRootSlotProps<TOther = {}> = UseButtonRootSlotProps<TOther> & {
|
| 33 | 'aria-controls': React.AriaAttributes['aria-controls'];
|
| 34 | 'aria-selected': React.AriaAttributes['aria-selected'];
|
| 35 | id: string | undefined;
|
| 36 | ref: React.RefCallback<Element> | null;
|
| 37 | role: React.AriaRole;
|
| 38 | };
|
| 39 | export interface UseTabReturnValue {
|
| 40 | /**
|
| 41 | * Resolver for the root slot's props.
|
| 42 | * @param externalProps props for the root slot
|
| 43 | * @returns props that should be spread on the root slot
|
| 44 | */
|
| 45 | getRootProps: <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabRootSlotProps<TOther>;
|
| 46 | /**
|
| 47 | * If `true`, the tab is active (as in `:active` pseudo-class; in other words, pressed).
|
| 48 | */
|
| 49 | active: boolean;
|
| 50 | /**
|
| 51 | * If `true`, the tab has visible focus.
|
| 52 | * This is a workaround for browsers that do not support this feature natively.
|
| 53 | */
|
| 54 | focusVisible: boolean;
|
| 55 | /**
|
| 56 | * If `true`, the tab is highlighted.
|
| 57 | */
|
| 58 | highlighted: boolean;
|
| 59 | /**
|
| 60 | * 0-based index of the tab in the list of tabs.
|
| 61 | */
|
| 62 | index: number;
|
| 63 | /**
|
| 64 | * Ref to the root slot's DOM element.
|
| 65 | */
|
| 66 | rootRef: React.RefCallback<Element> | null;
|
| 67 | /**
|
| 68 | * If `true`, the tab is selected.
|
| 69 | */
|
| 70 | selected: boolean;
|
| 71 | /**
|
| 72 | * Sets the focus-visible state of the tab.
|
| 73 | * This is a workaround for browsers that do not support this feature natively.
|
| 74 | */
|
| 75 | setFocusVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
| 76 | /**
|
| 77 | * Total number of tabs in the nearest parent TabsList.
|
| 78 | * This can be used to determine if the tab is the last one to style it accordingly.
|
| 79 | */
|
| 80 | totalTabsCount: number;
|
| 81 | }
|