@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
1,513 lines (1,512 loc) • 10.7 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": "ExpandableProps",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx",
"description": "",
"declarations": [
{
"name": "ExpandableProps",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
}
],
"tags": {},
"type": {
"kind": "alias",
"name": "Expandable"
}
},
{
"name": "CanvasColorTokens",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/layout/lib/utils/background.ts",
"description": "",
"tags": {},
"declarations": [],
"type": {
"kind": "canvasColor"
}
},
{
"name": "Expandable",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx",
"description": "`Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a\n`DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the\nhoisted model pattern.",
"declarations": [
{
"name": "Expandable",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
}
],
"tags": {},
"type": {
"kind": "enhancedComponent",
"componentType": "container",
"displayName": "Expandable",
"props": [
{
"kind": "property",
"name": "children",
"required": false,
"type": {
"kind": "external",
"name": "ReactNode",
"url": "https://reactjs.org/docs/rendering-elements.html"
},
"description": "The children of the `Expandable` container. This should contain `Expandable.Target` and\n`Expandable.Container`",
"declarations": [
{
"name": "children",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
}
],
"tags": {}
},
{
"kind": "property",
"name": "cs",
"required": false,
"type": {
"kind": "symbol",
"name": "CSToPropsInput",
"value": "CSToPropsInput"
},
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
"declarations": [
{
"name": "cs",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
}
],
"tags": {}
},
{
"kind": "property",
"name": "as",
"description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
"tags": {},
"declarations": [],
"type": {
"kind": "external",
"name": "React.ElementType",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
},
"defaultValue": {
"kind": "external",
"name": "div",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
}
},
{
"kind": "property",
"name": "ref",
"description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
"tags": {},
"declarations": [],
"type": {
"kind": "external",
"name": "React.Ref",
"url": "https://reactjs.org/docs/refs-and-the-dom.html",
"typeParameters": [
{
"kind": "typeParameter",
"name": "R",
"required": true,
"defaultValue": {
"kind": "external",
"name": "div",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
}
}
]
}
},
{
"kind": "property",
"name": "model",
"description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
"tags": {},
"declarations": [],
"type": {
"kind": "symbol",
"name": "ExpandableModel"
}
},
{
"kind": "property",
"name": "elemPropsHook",
"description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
"tags": {},
"declarations": [],
"type": {
"kind": "function",
"parameters": [
{
"kind": "parameter",
"description": "",
"tags": {},
"declarations": [],
"name": "model",
"type": {
"kind": "symbol",
"name": "ExpandableModel"
},
"required": true
},
{
"kind": "parameter",
"description": "",
"tags": {},
"declarations": [],
"name": "elemProps",
"type": {
"kind": "generic",
"name": "TProps"
}
}
],
"returnType": {
"kind": "external",
"name": "HTML Attributes",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
}
}
}
],
"baseElement": {
"kind": "external",
"name": "div",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
},
"model": "ExpandableModel",
"styleComponent": {
"kind": "symbol",
"name": "Flex"
},
"subComponents": [
{
"name": "Target",
"symbol": "ExpandableTarget",
"description": "`Expandable.Target` creates a heading and a button. The heading is a semantic heading to\ndescribe the associated content. The button provides users the ability to toggle the\nassociated content.\n\nAs according to the [W3 disclosure\nspecification](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/), the button has\n`aria-expanded` and `aria-controls` attributes set by default\n\nThis component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an\n`Expandable.Title`.",
"declarations": [
{
"name": "Target",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
},
{
"name": "ExpandableTarget",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableTarget.tsx"
}
],
"tags": {}
},
{
"name": "Title",
"symbol": "ExpandableTitle",
"description": "`Expandable.Title` styles the target text that describes the content.",
"declarations": [
{
"name": "Title",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
},
{
"name": "ExpandableTitle",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableTitle.tsx"
}
],
"tags": {}
},
{
"name": "Icon",
"symbol": "ExpandableIcon",
"description": "`Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an\n`iconPosition` prop to determine which chevron icon to use.",
"declarations": [
{
"name": "Icon",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
},
{
"name": "ExpandableIcon",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableIcon.tsx"
}
],
"tags": {}
},
{
"name": "Avatar",
"symbol": "ExpandableAvatar",
"description": "`Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative\nimage.",
"declarations": [
{
"name": "Avatar",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
},
{
"name": "ExpandableAvatar",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableAvatar.tsx"
}
],
"tags": {}
},
{
"name": "Content",
"symbol": "ExpandableContent",
"description": "`Expandable.Content` holds the content that will be conditionally expanded and collapsed. It\nhas an `id` to ensure the `Expandable.Target` properly set it to the `aria-controls`\nattribute.",
"declarations": [
{
"name": "Content",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/Expandable.tsx"
},
{
"name": "ExpandableContent",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableContent.tsx"
}
],
"tags": {}
}
]
}
},
{
"name": "ExpandableAvatarProps",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableAvatar.tsx",
"description": "",
"declarations": [
{
"name": "ExpandableAvatarProps",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableAvatar.tsx"
}
],
"tags": {},
"type": {
"kind": "alias",
"name": "ExpandableAvatar"
}
},
{
"name": "ExpandableAvatar",
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableAvatar.tsx",
"description": "",
"declarations": [
{
"name": "ExpandableAvatar",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/expandable/lib/ExpandableAvatar.tsx"
}
],
"tags": {},
"type": {
"kind": "enhancedComponent",
"componentType": "regular",
"displayName": "Expandable.Avatar",
"props": [
{
"kind": "property",
"name": "variant",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "string",
"value": "light"
},
{
"kind": "string",
"value": "dark"
},
{
"kind": "symbol",
"name": "AvatarVariant",
"value": "AvatarVariant"
}
]
},
"description": "The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.",
"declarations": [
{
"name": "variant",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
}
],
"tags": {
"default": "\"light\""
},
"defaultValue": {
"kind": "string",
"value": "light"
}
},
{
"kind": "property",
"name": "size",
"required": false,
"type": {
"kind": "union",
"value": [
{
"kind": "string",
"value": "extraSmall"
},
{
"kind": "string",
"value": "small"
},
{
"kind": "string",
"value": "medium"
},
{
"kind": "string",
"value": "large"
},
{
"kind": "string",
"value": "extraLarge"
},
{
"kind": "string",
"value": "extraExtraLarge"
},
{
"kind": "parenthesis",
"value": {
"kind": "intersection",
"value": [
{
"kind": "primitive",
"value": "string"
},
{
"kind": "object",
"properties": []
}
]
}
},
{
"kind": "symbol",
"name": "SystemIconCircleSize",
"value": "SystemIconCircleSize"
},
{
"kind": "primitive",
"value": "number"
}
]
},
"description": "The size of the Avatar.\n- `extraExtraLarge`: 7.5rem x 7.5rem (120px x 120px)\n- `extraLarge`: 4.5rem x 4.5rem (64px x 64px)\n- `large`: 2.5rem x 2.5rem (40px x 40px)\n- `medium`: 2rem x 2rem (32px x 32px)\n- `small`: 1.5rem x 1.5rem (24px x 24px)\n- `small`: 1rem x 1rem (16px x 16px)",
"declarations": [
{
"name": "size",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
}
],
"tags": {
"default": "\"medium\""
},
"defaultValue": {
"kind": "string",
"value": "medium"
}
},
{
"kind": "property",
"name": "altText",
"required": false,
"type": {
"kind": "primitive",
"value": "string"
},
"description": "The alt text of the Avatar image. This prop is also used for the aria-label.",
"declarations": [
{
"name": "altText",
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
}
],
"tags": {
"default": "Avatar"
},
"defaultValue": {
"kind": "symbol",
"name": "Avatar",
"value": "Avatar"
}
},
{
"kind": "property"