@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
1,637 lines (1,636 loc) • 13.9 MB
JavaScript
import React from 'react';
export const GithubUrl = React.createContext('https://github.com/Workday/canvas-kit/');
export const GithubBranch = React.createContext('master');
export const StorybookUrl = React.createContext(typeof location !== 'undefined' && location.pathname.indexOf('/canvas-kit/') === 0
? '/canvas-kit/'
: '/');
export const docs = (typeof window !== 'undefined' && window.__docs) ||
[
{
"name": "AutocompleteList",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx",
"description": "",
"declarations": [
{
"name": "AutocompleteList",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {},
"type": {
"kind": "component",
"props": [
{
"kind": "property",
"name": "autocompleteItems",
"required": true,
"type": {
"kind": "union",
"value": [
{
"kind": "array",
"value": {
"kind": "external",
"name": "ReactElement",
"url": "https://reactjs.org/docs/rendering-elements.html",
"typeParameters": [
{
"kind": "primitive",
"value": "any"
}
]
}
},
{
"kind": "array",
"value": {
"kind": "symbol",
"name": "ComboBoxMenuItemGroup",
"value": "ComboBoxMenuItemGroup"
}
}
]
},
"description": "The autocomplete items of the Combobox. This array of menu items is shown under the text input.",
"declarations": [
{
"name": "autocompleteItems",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "selectedIndex",
"required": true,
"type": {
"kind": "union",
"value": [
{
"kind": "primitive",
"value": "number"
},
{
"kind": "primitive",
"value": "null"
}
]
},
"description": "Index of the active autocomplete item",
"declarations": [
{
"name": "selectedIndex",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "handleAutocompleteClick",
"required": true,
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"name": "event",
"type": {
"kind": "external",
"name": "SyntheticEvent",
"url": "https://reactjs.org/docs/events.html",
"typeParameters": [
{
"kind": "external",
"name": "Element",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
},
{
"kind": "external",
"name": "Event",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/event"
}
]
},
"required": true,
"rest": false,
"description": "",
"declarations": [
{
"name": "event",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
},
{
"kind": "parameter",
"name": "menuItemProps",
"type": {
"kind": "primitive",
"value": "any"
},
"required": true,
"rest": false,
"description": "",
"declarations": [
{
"name": "menuItemProps",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
}
],
"members": [],
"returnType": {
"kind": "primitive",
"value": "void"
}
},
"description": "The function called when an autocomplete item is selected",
"declarations": [
{
"name": "handleAutocompleteClick",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "labelId",
"required": true,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The id of the form field.",
"declarations": [
{
"name": "labelId",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "comboboxId",
"required": true,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The id of the combobox.",
"declarations": [
{
"name": "comboboxId",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "showGroupText",
"required": true,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "True when group changes via keyboard control",
"declarations": [
{
"name": "showGroupText",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/AutocompleteList.tsx"
}
],
"tags": {}
}
]
}
},
{
"name": "ComboBoxMenuItemGroup",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx",
"description": "",
"declarations": [
{
"name": "ComboBoxMenuItemGroup",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {},
"type": {
"kind": "object",
"properties": [
{
"kind": "property",
"name": "header",
"required": true,
"type": {
"kind": "external",
"name": "ReactElement",
"url": "https://reactjs.org/docs/rendering-elements.html",
"typeParameters": [
{
"kind": "primitive",
"value": "any"
}
]
},
"description": "",
"declarations": [
{
"name": "header",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "items",
"required": true,
"type": {
"kind": "array",
"value": {
"kind": "external",
"name": "ReactElement",
"url": "https://reactjs.org/docs/rendering-elements.html",
"typeParameters": [
{
"kind": "primitive",
"value": "any"
}
]
}
},
"description": "",
"declarations": [
{
"name": "items",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
}
]
}
},
{
"name": "ComboboxProps",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx",
"description": "",
"declarations": [
{
"name": "ComboboxProps",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {},
"type": {
"kind": "alias",
"name": "Combobox"
}
},
{
"name": "listBoxIdPart",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx",
"description": "",
"declarations": [
{
"name": "listBoxIdPart",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {},
"type": {
"kind": "string",
"value": "listbox"
}
},
{
"name": "getOptionId",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx",
"description": "",
"declarations": [
{
"name": "getOptionId",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {},
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"name": "baseId",
"type": {
"kind": "primitive",
"value": "string"
},
"required": false,
"rest": false,
"description": "",
"declarations": [
{
"name": "baseId",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "parameter",
"name": "index",
"type": {
"kind": "primitive",
"value": "number"
},
"required": false,
"rest": false,
"description": "",
"declarations": [
{
"name": "index",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
}
],
"members": [],
"returnType": {
"kind": "primitive",
"value": "string"
}
}
},
{
"name": "getTextFromElement",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx",
"description": "",
"declarations": [
{
"name": "getTextFromElement",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {},
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"name": "children",
"type": {
"kind": "external",
"name": "ReactNode",
"url": "https://reactjs.org/docs/rendering-elements.html"
},
"required": false,
"rest": false,
"description": "",
"declarations": [
{
"name": "children",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
}
],
"members": [],
"returnType": {
"kind": "primitive",
"value": "string"
}
}
},
{
"name": "Combobox",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx",
"description": "",
"declarations": [
{
"name": "Combobox",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {},
"type": {
"kind": "component",
"props": [
{
"kind": "property",
"name": "children",
"required": true,
"type": {
"kind": "external",
"name": "ReactElement",
"url": "https://reactjs.org/docs/rendering-elements.html",
"typeParameters": [
{
"kind": "symbol",
"name": "TextInputProps",
"value": "TextInputProps"
}
]
},
"description": "The TextInput child of the Combobox.",
"declarations": [
{
"name": "children",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "initialValue",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The initial value of the Combobox.",
"declarations": [
{
"name": "initialValue",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "clearButtonVariant",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "string",
"value": "inverse"
},
{
"kind": "primitive",
"value": "undefined"
}
]
},
"description": "The variant of the Combobox clear button. The default is a TertiaryButton",
"declarations": [
{
"name": "clearButtonVariant",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "showClearButton",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "If true, render the Combobox with a button to clear the text input.",
"declarations": [
{
"name": "showClearButton",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {
"default": "false"
},
"defaultValue": {
"kind": "boolean",
"value": false
}
},
{
"kind": "property",
"name": "clearButtonAriaLabel",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The `aria-label` for the Combobox clear button.",
"declarations": [
{
"name": "clearButtonAriaLabel",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {
"default": "Reset Search Input"
},
"defaultValue": {
"kind": "symbol",
"name": "Reset Search Input",
"value": "Reset Search Input"
}
},
{
"kind": "property",
"name": "autocompleteItems",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "array",
"value": {
"kind": "external",
"name": "ReactElement",
"url": "https://reactjs.org/docs/rendering-elements.html",
"typeParameters": [
{
"kind": "primitive",
"value": "any"
}
]
}
},
{
"kind": "array",
"value": {
"kind": "symbol",
"name": "ComboBoxMenuItemGroup",
"value": "ComboBoxMenuItemGroup"
}
}
]
},
"description": "The autocomplete items of the Combobox. This array of menu items is shown under the text input.",
"declarations": [
{
"name": "autocompleteItems",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "onChange",
"required": false,
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"name": "e",
"type": {
"kind": "symbol",
"name": "React.ChangeEvent",
"typeParameters": [
{
"kind": "symbol",
"name": "HTMLInputElement",
"value": "HTMLInputElement"
}
],
"value": "ChangeEvent<T>"
},
"required": true,
"rest": false,
"description": "",
"declarations": [
{
"name": "e",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
}
],
"members": [],
"returnType": {
"kind": "primitive",
"value": "void"
}
},
"description": "The function called when the Combobox text input changes.",
"declarations": [
{
"name": "onChange",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "onFocus",
"required": false,
"type": {
"kind": "symbol",
"name": "React.FocusEventHandler",
"value": "FocusEventHandler<T>"
},
"description": "The function called when the Combobox text input focuses.",
"declarations": [
{
"name": "onFocus",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "onBlur",
"required": false,
"type": {
"kind": "symbol",
"name": "React.FocusEventHandler",
"value": "FocusEventHandler<T>"
},
"description": "The function called when the Combobox text input blurs.",
"declarations": [
{
"name": "onBlur",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "labelId",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The id of the form field.",
"declarations": [
{
"name": "labelId",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "getStatusText",
"required": false,
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"name": "listCount",
"type": {
"kind": "primitive",
"value": "number"
},
"required": true,
"rest": false,
"description": "",
"declarations": [
{
"name": "listCount",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
}
],
"members": [],
"returnType": {
"kind": "primitive",
"value": "string"
}
},
"description": "The text for screen readers announcing the autocomplete count",
"declarations": [
{
"name": "getStatusText",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Combobox.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "grow",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "True if the component should grow to its container's width. False otherwise.",
"declarations": [
{
"name": "grow",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
}
],
"tags": {}
}
]
}
},
{
"name": "StatusProps",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx",
"description": "",
"declarations": [
{
"name": "StatusProps",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"type": {
"kind": "alias",
"name": "Status"
}
},
{
"name": "Status",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx",
"description": "",
"declarations": [
{
"name": "Status",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"type": {
"kind": "component",
"props": [
{
"kind": "property",
"name": "ariaLive",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "string",
"value": "polite"
},
{
"kind": "string",
"value": "assertive"
},
{
"kind": "string",
"value": "off"
}
]
},
"description": "",
"declarations": [
{
"name": "ariaLive",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"defaultValue": {
"kind": "string",
"value": "polite"
}
},
{
"kind": "property",
"name": "role",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "string",
"value": "log"
},
{
"kind": "string",
"value": "status"
},
{
"kind": "string",
"value": "alert"
},
{
"kind": "string",
"value": "progressbar"
},
{
"kind": "string",
"value": "marquee"
},
{
"kind": "string",
"value": "timer"
}
]
},
"description": "",
"declarations": [
{
"name": "role",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"defaultValue": {
"kind": "string",
"value": "status"
}
},
{
"kind": "property",
"name": "ariaRelevant",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "string",
"value": "additions"
},
{
"kind": "string",
"value": "additions text"
},
{
"kind": "string",
"value": "all"
},
{
"kind": "string",
"value": "removals"
},
{
"kind": "string",
"value": "text"
}
]
},
"description": "",
"declarations": [
{
"name": "ariaRelevant",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"defaultValue": {
"kind": "string",
"value": "additions"
}
},
{
"kind": "property",
"name": "ariaAtomic",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "",
"declarations": [
{
"name": "ariaAtomic",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "expireMilliseconds",
"required": false,
"type": {
"kind": "primitive",
"value": "number"
},
"description": "",
"declarations": [
{
"name": "expireMilliseconds",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"defaultValue": {
"kind": "number",
"value": 500
}
},
{
"kind": "property",
"name": "announcementText",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "",
"declarations": [
{
"name": "announcementText",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/combobox/lib/Status.tsx"
}
],
"tags": {},
"defaultValue": {
"kind": "string",
"value": ""
}
}
]
}
},
{
"name": "ComponentStyles",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts",
"description": "",
"declarations": [
{
"name": "ComponentStyles",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts"
}
],
"tags": {},
"type": {
"kind": "type",
"typeParameters": [],
"value": {
"kind": "external",
"name": "Record",
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type",
"typeParameters": [
{
"kind": "primitive",
"value": "string"
},
{
"kind": "symbol",
"name": "CSSProperties",
"value": "CSSProperties"
}
]
}
}
},
{
"name": "useThemeRTL",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts",
"description": "A helpful hook for supporting bidirectional styles.\n* Read below for more detail or [view the docs](https://github.com/Workday/canvas-kit/blob/master/modules/labs-react/common/README.md#useThemeRTL).",
"declarations": [
{
"name": "useThemeRTL",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts"
}
],
"tags": {
"returns": "* `themeRTL` - a function to transform bidirectional styles\n* `theme` - the Canvas theme object (optional, provided for convenience)\n\n`themeRTL` allows you to support bidirectionality with a single set of styles and pass them along to a component.\nIt accepts CSS object styles and transforms CSS attributes based on the content direction set in the theme (LTR or RTL).",
"example": "import { type } from '@workday/canvas-kit-react/tokens';\nimport { useThemeRTL } from '@workday/canvas-kit-labs-react/common';\n\nconst ErrorText: React.FC = (props) => {\n const { themeRTL, theme } = useThemeRTL();\n // `borderLeft` will be converted to `borderRight`\n // when the theme direction is `RTL`.\n // All other styles will remain unchanged.\n const errorTextStyles = themeRTL({\n ...type.levels.subtext.medium,\n color: theme.canvas.palette.error.main,\n borderLeft: `solid 2px ${theme.canvas.palette.error.main}`,\n });\n\n return <span css={errorTextStyles} {...props} />;\n}",
"deprecated": "⚠️ `useThemeRTL` has been deprecated and will be removed in a future major version. Now that IE11 is no longer supported, we encourage consumers to use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)."
},
"type": {
"kind": "function",
"parameters": [],
"members": [],
"returnType": {
"kind": "object",
"properties": [
{
"kind": "property",
"name": "themeRTL",
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"name": "cssObject",
"type": {
"kind": "array",
"value": {
"kind": "symbol",
"name": "CSSProperties",
"value": "CSSProperties"
}
},
"required": true,
"rest": true,
"description": "",
"declarations": [
{
"name": "cssObject",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts"
}
],
"tags": {}
}
],
"members": [],
"returnType": {
"kind": "external",
"name": "CSSProperties",
"url": "https://emotion.sh/docs/object-styles"
}
},
"description": "",
"declarations": [
{
"name": "themeRTL",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts"
}
],
"tags": {}
},
{
"kind": "property",
"name": "theme",
"type": {
"kind": "symbol",
"name": "EmotionCanvasTheme",
"value": "EmotionCanvasTheme"
},
"description": "",
"declarations": [
{
"name": "theme",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/common/lib/theming/useThemeRTL.ts"
}
],
"tags": {}
}
]
}
}
},
{
"name": "SearchFormProps",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx",
"description": "",
"declarations": [
{
"name": "SearchFormProps",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {},
"type": {
"kind": "alias",
"name": "SearchForm"
}
},
{
"name": "SearchFormState",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx",
"description": "",
"declarations": [
{
"name": "SearchFormState",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {},
"type": {
"kind": "object",
"properties": [
{
"kind": "property",
"name": "showForm",
"required": true,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "",
"declarations": [
{
"name": "showForm",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "searchQuery",
"required": true,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "",
"declarations": [
{
"name": "searchQuery",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "isFocused",
"required": true,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "",
"declarations": [
{
"name": "isFocused",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
}
]
}
},
{
"name": "SearchForm",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx",
"description": "",
"declarations": [
{
"name": "SearchForm",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {},
"type": {
"kind": "component",
"props": [
{
"kind": "property",
"name": "onSubmit",
"required": true,
"type": {
"kind": "symbol",
"name": "React.FormEventHandler",
"typeParameters": [
{
"kind": "symbol",
"name": "HTMLFormElement",
"value": "HTMLFormElement"
}
],
"value": "FormEventHandler<T>"
},
"description": "The function called when the SearchForm form is submitted. The current input value is passed to the callback function.",
"declarations": [
{
"name": "onSubmit",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "isCollapsed",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.",
"declarations": [
{
"name": "isCollapsed",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "false"
},
"defaultValue": {
"kind": "boolean",
"value": false
}
},
{
"kind": "property",
"name": "onInputChange",
"required": false,
"type": {
"kind": "symbol",
"name": "React.ChangeEventHandler",
"typeParameters": [
{
"kind": "symbol",
"name": "HTMLInputElement",
"value": "HTMLInputElement"
}
],
"value": "ChangeEventHandler<T>"
},
"description": "The function called when the SearchForm text input changes.",
"declarations": [
{
"name": "onInputChange",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "autocompleteItems",
"required": false,
"type": {
"kind": "array",
"value": {
"kind": "external",
"name": "ReactElement",
"url": "https://reactjs.org/docs/rendering-elements.html",
"typeParameters": [
{
"kind": "primitive",
"value": "any"
}
]
}
},
"description": "The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.",
"declarations": [
{
"name": "autocompleteItems",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "searchTheme",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "symbol",
"name": "SearchTheme",
"value": "SearchTheme"
},
{
"kind": "symbol",
"name": "SearchThemeAttributes",
"value": "SearchThemeAttributes"
}
]
},
"description": "The theme of the header the search input is being rendered in.",
"declarations": [
{
"name": "searchTheme",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "placeholder",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The placeholder text of the SearchForm text input.",
"declarations": [
{
"name": "placeholder",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "Search"
},
"defaultValue": {
"kind": "symbol",
"name": "Search",
"value": "Search"
}
},
{
"kind": "property",
"name": "initialValue",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The initial value of the SearchForm text input.",
"declarations": [
{
"name": "initialValue",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "rightAlign",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "If true, right-align the SearchForm. If false, the text input should grow to left-align the SearchForm.",
"declarations": [
{
"name": "rightAlign",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "false"
},
"defaultValue": {
"kind": "boolean",
"value": false
}
},
{
"kind": "property",
"name": "inputLabel",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The screenreader label text for the SearchForm text input.",
"declarations": [
{
"name": "inputLabel",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "Search"
},
"defaultValue": {
"kind": "symbol",
"name": "Search",
"value": "Search"
}
},
{
"kind": "property",
"name": "submitAriaLabel",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The screenreader label text for the SearchForm submit button.",
"declarations": [
{
"name": "submitAriaLabel",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "Search"
},
"defaultValue": {
"kind": "symbol",
"name": "Search",
"value": "Search"
}
},
{
"kind": "property",
"name": "clearButtonAriaLabel",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The screenreader label text for the SearchForm clear button.",
"declarations": [
{
"name": "clearButtonAriaLabel",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "Reset Search Form"
},
"defaultValue": {
"kind": "symbol",
"name": "Reset Search Form",
"value": "Reset Search Form"
}
},
{
"kind": "property",
"name": "openButtonAriaLabel",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The screenreader label text for the button to open the collapsed SearchForm.",
"declarations": [
{
"name": "openButtonAriaLabel",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "Open Search"
},
"defaultValue": {
"kind": "symbol",
"name": "Open Search",
"value": "Open Search"
}
},
{
"kind": "property",
"name": "closeButtonAriaLabel",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The screenreader label text for the button to close the open SearchForm.",
"declarations": [
{
"name": "closeButtonAriaLabel",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "Cancel"
},
"defaultValue": {
"kind": "symbol",
"name": "Cancel",
"value": "Cancel"
}
},
{
"kind": "property",
"name": "showClearButton",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "If true, render the SearchForm with a button to clear the text input.",
"declarations": [
{
"name": "showClearButton",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "true"
},
"defaultValue": {
"kind": "boolean",
"value": true
}
},
{
"kind": "property",
"name": "height",
"required": false,
"type": {
"kind": "primitive",
"value": "number"
},
"description": "Height of the Search Form in pixels",
"declarations": [
{
"name": "height",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "40"
},
"defaultValue": {
"kind": "number",
"value": 40
}
},
{
"kind": "property",
"name": "allowEmptyStringSearch",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "If true, allow onSubmit being called when input value is empty.",
"declarations": [
{
"name": "allowEmptyStringSearch",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "false"
},
"defaultValue": {
"kind": "boolean",
"value": false
}
},
{
"kind": "property",
"name": "labelId",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "Sets the `id` for the label",
"declarations": [
{
"name": "labelId",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/SearchForm.tsx"
}
],
"tags": {
"default": "unique identifier"
},
"defaultValue": {
"kind": "symbol",
"name": "unique identifier",
"value": "unique identifier"
}
},
{
"kind": "property",
"name": "grow",
"required": false,
"type": {
"kind": "primitive",
"value": "boolean"
},
"description": "True if the component should grow to its container's width. False otherwise.",
"declarations": [
{
"name": "grow",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
}
],
"tags": {}
}
]
}
},
{
"name": "SearchTheme",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/themes.ts",
"description": "",
"declarations": [
{
"name": "SearchTheme",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/search-form/lib/themes.ts"
}
],
"tags": {},
"type": {
"kind": "object",
"typeParameters": [],
"properties": [
{
"kind": "property",
"name": "Light",
"type": {
"kind": "number",
"value": 0
}
},
{
"kind": "property",
"name": "Dark",
"type": {
"kind": "number",
"value": 1
}
},
{
"kind": "property",
"name": "Transparent"