@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
251 lines • 10.4 kB
TypeScript
import * as React from 'react';
import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
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 segmentedControlItemStencil: import("@workday/canvas-kit-styling").Stencil<{
size: {
large: {
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
};
medium: {
height: "var(--cnvs-base-size-350, 1.75rem)";
fontWeight: "var(--cnvs-sys-font-weight-semibold, 600)";
};
small: {
fontFamily: "--cnvs-sys-font-family-default";
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
fontWeight: "--cnvs-sys-font-weight-medium";
height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
gap: "var(--cnvs-base-size-25, 0.125rem)";
};
};
variant: {
iconOnly: {};
textOnly: {};
iconWithText: {};
};
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
size: {
large: {
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
height: "var(--cnvs-sys-size-lg, 3rem)";
paddingInline: "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))";
minWidth: "var(--cnvs-base-size-1300, 6.5rem)";
};
medium: {
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
gap: "var(--cnvs-base-size-75, 0.375rem)";
minWidth: "var(--cnvs-base-size-1100, 5.5rem)";
};
small: {
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
minWidth: "var(--cnvs-base-size-900, 4.5rem)";
};
extraSmall: {
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
paddingInline: "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))";
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
minWidth: string;
};
};
grow: {
true: {
width: string;
maxWidth: string;
};
};
iconPosition: {
only: {
padding: number;
};
start: {};
end: {};
};
}, {}, {
background: string;
border: string;
boxShadowInner: string;
boxShadowOuter: string;
label: string;
opacity: string;
borderRadius: string;
}, never, never>, never>;
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 | 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("../..").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("../..").SelectionManager;
navigation: import("../..").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("../..").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("../..").SelectionManager;
navigation: import("../..").NavigationManager;
getId: (item: any) => string;
getTextValue: (item: any) => string;
} | undefined;
}>;
//# sourceMappingURL=SegmentedControlItem.d.ts.map