@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
450 lines • 18.4 kB
TypeScript
import * as React from 'react';
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
import { SearchTheme, SearchThemeAttributes } from './themes';
import { CSProps } from '@workday/canvas-kit-styling';
/**
* @deprecated ⚠️ `SearchFormProps` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage).
*/
export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement>, CSProps {
/**
* The function called when the SearchForm form is submitted. The current input value is passed to the callback function.
*/
onSubmit: React.FormEventHandler<HTMLFormElement>;
/**
* If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.
* @default false
*/
isCollapsed?: boolean;
/**
* The function called when the SearchForm text input changes.
*/
onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
/**
* The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
*/
autocompleteItems?: React.ReactElement<any>[];
/**
* The theme of the header the search input is being rendered in.
*/
searchTheme?: SearchTheme | SearchThemeAttributes;
/**
* The placeholder text of the SearchForm text input.
* @default Search
*/
placeholder?: string;
/**
* The initial value of the SearchForm text input.
*/
initialValue?: string;
/**
* If true, right-align the SearchForm. If false, the text input should grow to left-align the SearchForm.
* @default false
*/
rightAlign?: boolean;
/**
* The screenreader label text for the SearchForm text input.
* @default Search
*/
inputLabel?: string;
/**
* The screenreader label text for the SearchForm submit button.
* @default Search
*/
submitAriaLabel?: string;
/**
* The screenreader label text for the SearchForm clear button.
* @default Reset Search Form
*/
clearButtonAriaLabel?: string;
/**
* The screenreader label text for the button to open the collapsed SearchForm.
* @default Open Search
*/
openButtonAriaLabel?: string;
/**
* The screenreader label text for the button to close the open SearchForm.
* @default Cancel
*/
closeButtonAriaLabel?: string;
/**
* If true, render the SearchForm with a button to clear the text input.
* @default true
*/
showClearButton?: boolean;
/**
* Height of the Search Form in pixels
* @default 40
*/
height?: number;
/**
* If true, allow onSubmit being called when input value is empty.
* @default false
*/
allowEmptyStringSearch?: boolean;
/**
* Sets the `id` for the label
* @default unique identifier
*/
labelId?: string;
}
/**
* @deprecated ⚠️ `SearchFormState` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage).
*/
export interface SearchFormState {
showForm: boolean;
searchQuery: string;
isFocused: boolean;
}
/**
* @deprecated ⚠️ `searchFormStencil` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage).
*/
export declare const searchFormStencil: import("@workday/canvas-kit-styling").Stencil<{
isHiddenSubmitSearchIcon: {
true: ({ submitSearchIconPart }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
"[data-part=\"search-form-submit-search-icon\"]": {
display: string;
};
};
};
isHiddenOpenSeachIcon: {
true: ({ openSearchIconPart }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
"[data-part=\"search-form-open-search-icon\"]": {
display: string;
};
};
};
isCollapsed: {
true: ({ searchFieldPart, submitSearchIconPart, openSearchIconPart, searchInputPart, height, }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
[x: string]: string | number | {
display: string;
maxWidth: string;
margin?: undefined;
fontSize?: undefined;
paddingInlineStart?: undefined;
paddingInlineEnd?: undefined;
minWidth?: undefined;
backgroundColor?: undefined;
height?: undefined;
} | {
margin: string;
display?: undefined;
maxWidth?: undefined;
fontSize?: undefined;
paddingInlineStart?: undefined;
paddingInlineEnd?: undefined;
minWidth?: undefined;
backgroundColor?: undefined;
height?: undefined;
} | {
fontSize: string;
paddingInlineStart: string;
paddingInlineEnd: string;
maxWidth: string;
minWidth: number;
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
height: `var(--${string}, var(--cnvs-sys-space-x10))`;
display?: undefined;
margin?: undefined;
};
top: number;
right: number;
left: number;
bottom: number;
margin: number;
position: string;
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
transition: string;
maxWidth: string;
minWidth: string;
overflow: string;
zIndex: number;
"[data-part=\"search-form-field\"]": {
display: string;
maxWidth: string;
};
"[data-part=\"search-form-input\"]": {
fontSize: string;
paddingInlineStart: string;
paddingInlineEnd: string;
maxWidth: string;
minWidth: number;
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
height: `var(--${string}, var(--cnvs-sys-space-x10))`;
};
};
false: ({ searchFieldPart }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
"[data-part=\"search-form-field\"]": {
display: string;
};
};
};
rightAlign: {
true: {
textAlign: string;
};
};
showForm: {
true: {};
false: {};
};
grow: {
true: {
maxWidth: string;
"[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]": {
maxWidth: string;
};
};
};
searchTheme: {
light: ({ searchInputPart }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
"[data-part=\"search-form-input\"]": {
background: "--cnvs-sys-color-bg-alt-soft";
color: "--cnvs-sys-color-text-default";
'::placeholder': {
color: "--cnvs-sys-color-text-hint";
};
'&:hover': {
background: "--cnvs-sys-color-bg-alt-default";
};
'&:is(:focus-visible, &.focus):where(:not([disabled]))': {
background: "--cnvs-sys-color-bg-alt-soft";
boxShadow: string;
};
};
};
dark: ({ searchInputPart }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
"[data-part=\"search-form-input\"]": {
backgroundColor: string;
color: "--cnvs-sys-color-text-inverse";
boxShadow: string;
'::placeholder': {
color: "--cnvs-sys-color-text-inverse";
};
':hover': {
background: string;
};
'&:is(:focus-visible, &.focus):where(:not([disabled]))': {
background: "--cnvs-sys-color-bg-default";
color: "--cnvs-sys-color-text-default";
'::placeholder': {
color: "--cnvs-sys-color-text-hint";
};
boxShadow: string;
};
};
};
transparent: ({ searchInputPart }: {
minWidth: `--${string}`;
maxWidth: `--${string}`;
height: `--${string}`;
background: `--${string}`;
backgroundFocus: `--${string}`;
backgroundHover: `--${string}`;
color: `--${string}`;
colorFocus: `--${string}`;
placeholderColor: `--${string}`;
placeholderColorFocus: `--${string}`;
boxShadow: `--${string}`;
boxShadowFocus: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}>) => {
"[data-part=\"search-form-input\"]": {
background: "--cnvs-sys-color-bg-transparent-default";
backgroundFocus: "--cnvs-sys-color-bg-transparent-default";
color: "--cnvs-sys-color-text-default";
colorFocus: "--cnvs-sys-color-text-default";
placeholderColor: "--cnvs-sys-color-text-hint";
placeholderColorFocus: "--cnvs-sys-color-text-hint";
boxShadow: string;
boxShadowFocus: string;
};
};
};
}, {
readonly searchContainer: "search-form-container";
readonly combobox: "search-form-combobox";
readonly closeButton: "search-form-close-button";
readonly searchField: "search-form-field";
readonly submitSearchIcon: "search-form-submit-search-icon";
readonly openSearchIcon: "search-form-open-search-icon";
readonly searchInput: "search-form-input";
readonly closeButtonPart: "search-form-close-button";
}, {
minWidth: string;
maxWidth: string;
height: string;
background: string;
backgroundFocus: string;
backgroundHover: string;
color: string;
colorFocus: string;
placeholderColor: string;
placeholderColorFocus: string;
boxShadow: string;
boxShadowFocus: string;
}, never, never>;
/**
* @deprecated ⚠️ `SearchForm` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage).
*/
export declare class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
static Theme: typeof SearchTheme;
private inputRef;
private openRef;
private defaultLabelId;
state: Readonly<SearchFormState>;
private getTheme;
private getThemeColors;
getIconButtonType: () => TertiaryButtonProps['variant'];
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
openCollapsedSearch: () => void;
closeCollapsedSearch: () => void;
componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState): void;
focusInput: () => void;
focusOpen: () => void;
handleFocus: () => void;
handleBlur: () => void;
handleSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
render(): import("react/jsx-runtime").JSX.Element;
}
//# sourceMappingURL=SearchForm.d.ts.map