@workday/canvas-kit-preview-react/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts

Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.

import * as React from 'react';
import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
import { CanvasSystemIcon } from '@workday/design-assets-types';
export interface ItemProps extends ButtonContainerProps {
    /**
     * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
     * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. This index will ensure keyboard navigation works even if items are
     * inserted out of order.
     */
    index?: number;
    /**
     * The contents of the item. This is text used as the accessible name of the button for screen readers.
     */
    children?: React.ReactNode;
    /**
     * The identifier of the item. This identifier will be used in change events and for `initialTab`.
     * If this property is not provided, it will default to a string representation
     * of the the zero-based index of the item when it was initialized.
     */
    'data-id'?: string;
    /**
     * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
     * index at the end. Only set this for advanced cases.
     */
    id?: string;
    /**
     * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
     * should either be `true` or `false`. This is automatically set by the
     * component and should only be used in advanced cases.
     */
    'aria-pressed'?: boolean;
    /**
     * The icon of the button.
     */
    icon?: CanvasSystemIcon;
    /**
     * Tooltip Props
     */
    tooltipProps?: Omit<TooltipProps, 'children'>;
}
export declare const SegmentedControlItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", ItemProps, {
    state: {
        disabled: boolean;
        size: "medium" | "small" | "large";
        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[]; /**
             * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
             * index at the end. Only set this for advanced cases.
             */
            totalSize: number;
            scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("@workday/canvas-kit-react/collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void; /**
             * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
             * should either be `true` or `false`. This is automatically set by the
             * component and should only be used in advanced cases.
             */
        };
        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: {
            item: any;
            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;
}>;
//# sourceMappingURL=SegmentedControlItem.d.ts.map