UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

489 lines • 22.7 kB
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