@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
489 lines • 22.7 kB
TypeScript
import * as React from 'react';
import { StyledType, 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("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "color" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "height" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "resize" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "width" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "fill" | "stroke" | "cs" | "as" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
ref?: React.Ref<HTMLButtonElement> | undefined;
} & {
theme?: import("@emotion/react").Theme | undefined;
} & StyledType & Pick<TabsItemProps, "gap">, {}, {}>;
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;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("@workday/canvas-kit-react/collection").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
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;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("@workday/canvas-kit-react/collection").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
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;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (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: "" | undefined;
}, import("@workday/canvas-kit-react/common").MergeProps<{
readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
readonly onClick: () => void;
readonly 'data-focus-id': `${string}-${string}` | `${string}-undefined`;
readonly tabIndex: 0 | -1;
}, import("@workday/canvas-kit-react/common").MergeProps<{
readonly ref: (instance: HTMLElement | null) => void;
readonly 'data-id': string;
readonly disabled: true | undefined;
readonly item: null;
readonly virtual: null;
readonly 'aria-setsize': number | undefined;
readonly 'aria-posinset': 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;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("@workday/canvas-kit-react/collection").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
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;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("@workday/canvas-kit-react/collection").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
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;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (item: any) => string;
};
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
getId: (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