@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
708 lines • 28 kB
TypeScript
import * as React from 'react';
import { ExtractProps } from '@workday/canvas-kit-react/common';
import { Box, FlexProps } from '@workday/canvas-kit-react/layout';
export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<Pick<FlexProps, 'gap'>> {
/**
* Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
* via a `Array::map` function. This index will ensure keyboard navigation works even if items are
* inserted out of order.
*/
index?: number;
/**
* The contents of the tab item. This will be the accessible name of the tab for screen readers.
* Often, this is text. Icons are also supported. Using `Tabs.Icon` will render an icon that is
* not visible to screen readers and therefore the icon should not be necessary to understand the
* tab. In most circumstances, `aria-label` should not be used.
*
* ```tsx
* <Tabs.Item>First Tab</Tabs.Item>
* <Tabs.Item>
* <Tabs.Icon icon={canvasIcon} />
* <Tabs.Text>Second Tab</Tabs.Text>
* </Tabs.Item>
* ```
*/
children: React.ReactNode;
/**
* The identifier of the tab. This identifier will be used in change events and for `initialTab`.
* Must match the `data-id` of the associated tab panel. If this property is not provided, it will
* default to a string representation of the the zero-based index of the Tab when it was
* initialized.
*/
'data-id'?: string;
/**
* Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
* index at the end. Only set this for advanced cases.
*/
id?: string;
/**
* Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
* `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
* This is automatically set by the component and should only be used in advanced cases.
*/
'aria-controls'?: string;
/**
* Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
* should either be `true` or `undefined` and never `false`. This is automatically set by the
* component and should only be used in advanced cases.
*/
'aria-selected'?: boolean;
/**
* Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex`
* set while all inactive tabs should have a `tabIndex={-1}`
*/
tabIndex?: number;
}
export declare const StyledTabItem: import("@workday/canvas-kit-react/common").ElementComponent<"button", TabsItemProps>;
export declare const useTabsItem: import("@workday/canvas-kit-react/common").BehaviorHook<{
state: {
getId: (item: any) => string;
orientation: import("@workday/canvas-kit-react/collection").Orientation;
panels: import("@workday/canvas-kit-react/collection").Item<any>[];
panelIndexRef: React.MutableRefObject<number>;
hiddenIds: string[];
itemSizeCache: Record<string, number>;
itemWidthCache: Record<string, number>;
containerSize: number;
containerWidth: number;
containerGap: number;
overflowTargetWidth: number;
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
};
events: {
registerPanel: (data: {
id: string;
textValue: string;
}) => void;
unregisterPanel: (data: {
id: string;
}) => void;
select(data: {
id: string;
}): void;
setContainerSize(data: {
width?: number | undefined;
height?: number | undefined;
}): void;
setContainerWidth(data: {
width?: number | undefined;
}): void;
setContainerGap(data: {
size: number;
}): void;
setOverflowTargetSize(data: {
width: number;
height: number;
}): void;
setOverflowTargetWidth(data: {
width: number;
}): void;
addItemWidth(data: {
id: string;
width: number;
}): void;
addItemSize(data: {
id: string;
width: number;
height: number;
}): void;
removeItemSize(data: {
id: string;
}): void;
removeItemWidth(data: {
id: string;
}): void;
addHiddenKey(data: {
id: string;
}): void;
removeHiddenKey(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
menu: {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
mode: "multiple" | "single";
};
events: {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
UNSTABLE_parentModel: {
state: {
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
};
events: {
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
UNSTABLE_parentModel: {
state: {
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
};
events: {
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
} | undefined;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
}, import("@workday/canvas-kit-react/common").RemoveNulls<import("@workday/canvas-kit-react/common").MergeProps<{
readonly type: "button";
readonly role: "tab";
readonly 'aria-selected': boolean;
readonly 'aria-controls': string;
}, import("@workday/canvas-kit-react/common").MergeProps<{
readonly onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}, import("@workday/canvas-kit-react/common").MergeProps<{
readonly ref: (instance: HTMLElement | null) => void;
readonly 'aria-hidden': true | undefined;
readonly style: {};
readonly inert: boolean | "" | undefined;
}, import("@workday/canvas-kit-react/common").MergeProps<{
readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
readonly onClick: () => void;
readonly 'data-focus-id': string;
readonly tabIndex: 0 | -1;
}, import("@workday/canvas-kit-react/common").MergeProps<{
readonly ref: (instance: Element | null | undefined) => void;
readonly 'data-id': string;
readonly disabled: true | undefined;
readonly 'aria-setsize': number | undefined;
readonly 'aria-posinset': number | undefined;
readonly 'data-index': number | undefined;
readonly style: React.CSSProperties;
readonly id: string;
}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
export declare const TabsItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", TabsItemProps, {
state: {
getId: (item: any) => string;
orientation: import("@workday/canvas-kit-react/collection").Orientation;
panels: import("@workday/canvas-kit-react/collection").Item<any>[];
panelIndexRef: React.MutableRefObject<number>;
hiddenIds: string[];
itemSizeCache: Record<string, number>;
itemWidthCache: Record<string, number>;
containerSize: number;
containerWidth: number;
containerGap: number;
overflowTargetWidth: number;
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
};
events: {
registerPanel: (data: {
id: string;
textValue: string;
}) => void;
unregisterPanel: (data: {
id: string;
}) => void;
select(data: {
id: string;
}): void;
setContainerSize(data: {
width?: number | undefined;
height?: number | undefined;
}): void;
setContainerWidth(data: {
width?: number | undefined;
}): void;
setContainerGap(data: {
size: number;
}): void;
setOverflowTargetSize(data: {
width: number;
height: number;
}): void;
setOverflowTargetWidth(data: {
width: number;
}): void;
addItemWidth(data: {
id: string;
width: number;
}): void;
addItemSize(data: {
id: string;
width: number;
height: number;
}): void;
removeItemSize(data: {
id: string;
}): void;
removeItemWidth(data: {
id: string;
}): void;
addHiddenKey(data: {
id: string;
}): void;
removeHiddenKey(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
menu: {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
mode: "multiple" | "single";
};
events: {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
UNSTABLE_parentModel: {
state: {
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
};
events: {
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
UNSTABLE_parentModel: {
state: {
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string | string[];
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
id: string;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("@workday/canvas-kit-react/collection").Item<any>[];
};
events: {
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
} | undefined;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
}> & {
Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("@workday/canvas-kit-react/icon").SystemIconProps>;
Text: import("@workday/canvas-kit-react/common").ElementComponent<"span", unknown>;
};
//# sourceMappingURL=TabsItem.d.ts.map