@workday/canvas-kit-preview-react
Version:
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.
165 lines • 7.86 kB
TypeScript
import React from 'react';
import { GrowthBehavior, ErrorType, StyledType, Themeable } from '@workday/canvas-kit-react/common';
import { MenuPlacement, MenuVisibility } from './types';
interface OptionData {
[key: string]: any;
}
/**
* @deprecated ⚠️ `Option` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface Option {
data?: OptionData;
disabled?: boolean;
id?: string;
label?: string;
value: string;
}
/**
* @deprecated ⚠️ `NormalizedOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface NormalizedOption extends Option {
data: OptionData;
disabled: boolean;
id: string;
label: string;
}
/**
* @deprecated ⚠️ `RenderSelectedFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface RenderSelectedFunction {
(option: NormalizedOption): React.ReactNode;
}
/**
* @deprecated ⚠️ `RenderableOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface RenderableOption extends NormalizedOption {
focused: boolean;
selected: boolean;
}
/**
* @deprecated ⚠️ `RenderOptionFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface RenderOptionFunction {
(option: RenderableOption): React.ReactNode;
}
/**
* @deprecated ⚠️ `CoreSelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface CoreSelectBaseProps extends Themeable, GrowthBehavior, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>, Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'required'>, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
/**
* The type of error associated with the Select (if applicable).
*/
error?: ErrorType;
/**
* The function called to render the content of each option.
*
* The `option` argument passed to the function is an object which contains the following:
*
* * `data: object` (data object carried over from the corresponding option originally passed into the component)
* * `disabled: boolean`
* * `focused: boolean` (set to `true` if the option has keyboard focus)
* * `id: string`
* * `label: string`
* * `selected: boolean` (set to `true` if the option is selected)
* * `value: string`
*
* If you omit the `renderOption` prop, each option will be rendered using a `defaultRenderOption` function provided by the component.
*
* @default defaultRenderOption
*/
renderOption?: RenderOptionFunction;
/**
* The function called to render the selected option.
*
* The `option` argument passed to the function is an object which contains the following:
*
* * `data: object` (data object carried over from the corresponding option originally passed into the component)
* * `disabled: boolean`
* * `id: string`
* * `label: string`
* * `value: string`
*
* If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
*
* @default defaultRenderSelected
*/
renderSelected?: RenderSelectedFunction;
/**
* The value of the Select.
*/
value?: string;
}
/**
* @deprecated ⚠️ `SelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
/**
* The ref to be forwarded to the underlying button element. Use this to imperatively manipulate the button.
*/
forwardedButtonRef?: React.Ref<HTMLButtonElement>;
/**
* The local ref to the underlying button element. Can be used in situations where RefObject is required (such as the Popper Menu).
*/
localButtonRef?: React.RefObject<HTMLButtonElement>;
/**
* The index of the focused option in the SelectBase.
* @default 0
*/
focusedOptionIndex?: number;
/**
* The ref to the underlying (hidden) text input element. Use this to imperatively manipulate the input.
*/
inputRef?: React.Ref<HTMLInputElement>;
/**
* The placement of the SelectBase menu relative to its corresponding SelectButton.
* @default 'bottom'
*/
menuPlacement?: MenuPlacement;
/**
* The ref to the underlying menu element. Use this to imperatively manipulate the menu.
*/
menuRef?: React.RefObject<HTMLUListElement>;
/**
* The visibility state of the SelectBase menu.
* @default 'closed'
*/
menuVisibility?: MenuVisibility;
/**
* The function called when a key is pressed down while the SelectBase button or menu has focus.
*/
onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
/**
* The function called when the menu is closed.
*/
onClose?: () => void;
/**
* The function called when an option in the SelectBase is selected via a click or a keyboard shortcut. The `index` passed to the callback function represents the index of the option which was selected.
*/
onOptionSelection?: (index: number) => void;
/**
* The options of the SelectBase. `options` is an array of objects, each object adhering to the `NormalizedOption` interface:
*
* * `value: string` (required, analagous to the `value` attribute of an `<option>`)
* * `disabled: boolean` (required)
* * `id: string` (required)
* * `label: string` (required, analagous to the text content of an `<option>`)
*/
options: NormalizedOption[];
/**
* If true, automatically flip the SelectBase menu to keep it visible if necessary (e.g., if the the menu would otherwise display below the visible area of the viewport).
* @default true
*/
shouldMenuAutoFlip?: boolean;
/**
* If true, focus the SelectBase menu when it's shown. Set to false if you don't want to focus the menu automatically (for visual testing purposes, for example).
* @default true
*/
shouldMenuAutoFocus?: boolean;
}
export declare const buttonBorderWidth = 1;
/**
* @deprecated ⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
*/
export declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onBlur, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => React.JSX.Element;
export {};
//# sourceMappingURL=SelectBase.d.ts.map