{ "Accordion": [ { "description": "@deprecated This component has been deprecated. 2020-04-10", "displayName": "Accordion", "methods": [ { "name": "handleSelection", "docblock": null, "modifiers": [], "params": [ { "name": "selected", "type": null } ], "returns": null } ], "props": { "children": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "arrayOf", "value": { "name": "node" } } ] }, "required": true, "description": "" }, "initiallySelected": { "type": { "name": "number" }, "required": false, "description": "", "defaultValue": { "value": "0", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "" } } }, { "description": "", "displayName": "AccordionSection", "methods": [], "props": { "_isSelected": { "type": { "name": "bool" }, "required": false, "description": "" }, "_onClickHandler": { "type": { "name": "func" }, "required": false, "description": "" }, "children": { "type": { "name": "node" }, "required": true, "description": "" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "" }, "title": { "type": { "name": "string" }, "required": true, "description": "" } } } ], "ArrowsInline": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}\n@deprecated This component has been deprecated. 2020-04-10", "displayName": "ArrowsInline", "methods": [], "props": { "direction": { "type": { "name": "enum", "value": [ { "value": "\"up\"", "computed": false }, { "value": "\"down\"", "computed": false }, { "value": "\"left\"", "computed": false }, { "value": "\"right\"", "computed": false } ] }, "required": false, "description": "Direction the arrow points", "defaultValue": { "value": "\"down\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Attention": [ { "description": "", "displayName": "renderDismissButton", "methods": [] }, { "description": "", "displayName": "Attention", "methods": [], "props": { "alignment": { "required": false, "tsType": { "name": "union", "raw": "\"left\" | \"center\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"center\"" } ] }, "description": "", "defaultValue": { "value": "\"left\"", "computed": false } }, "children": { "required": false, "tsType": { "name": "any" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "isDismissible": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "" }, "type": { "required": false, "tsType": { "name": "union", "raw": "\"bad-news\" | \"brand\" | \"good-news\" | \"warning\"", "elements": [ { "name": "literal", "value": "\"bad-news\"" }, { "name": "literal", "value": "\"brand\"" }, { "name": "literal", "value": "\"good-news\"" }, { "name": "literal", "value": "\"warning\"" } ] }, "description": "", "defaultValue": { "value": "\"brand\"", "computed": false } } } } ], "Avatar": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Avatar", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "imageUrl": { "type": { "name": "string" }, "required": false, "description": "Image to use for the avatar - default is the anonymous head" }, "isEmulating": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the emulating border should appear" }, "size": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"medium\"", "computed": false } ] }, "required": false, "description": "Size of the avatar, large is default" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Data test section to use for testing" } } } ], "Badge": [ { "description": "Tiny inline component used to draw attention to an item's state or status.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Badge", "methods": [], "props": { "backgroundColor": { "type": { "name": "enum", "value": [ { "value": "\"yellow\"", "computed": false }, { "value": "\"default\"", "computed": false }, { "value": "\"green\"", "computed": false }, { "value": "\"orange\"", "computed": false }, { "value": "\"pink\"", "computed": false }, { "value": "\"magenta\"", "computed": false }, { "value": "\"grey\"", "computed": false }, { "value": "\"purple\"", "computed": false }, { "value": "\"black\"", "computed": false } ] }, "required": false, "description": "@deprecated Color to use for the background of the token" }, "children": { "type": { "name": "node" }, "required": true, "description": "Text that appears within the component" }, "className": { "type": { "name": "string" }, "required": false, "description": "" }, "color": { "type": { "name": "enum", "value": [ { "value": "\"default\"", "computed": false }, { "value": "\"draft\"", "computed": false }, { "value": "\"live\"", "computed": false }, { "value": "\"primary\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"purple\"", "computed": false }, { "value": "\"bad-news\"", "computed": false } ] }, "required": false, "description": "Various color schemes. Purple has been deprecated 2021-06-08.", "defaultValue": { "value": "\"default\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Category": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "BlockList.Category", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Items that appears within the category" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "header": { "type": { "name": "node" }, "required": false, "description": "Node or component that appears above the `children`" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Item": [ { "description": "", "displayName": "Item", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "", "tsType": { "name": "union", "raw": "ReactElement | ReactElement[]", "elements": [ { "name": "ReactElement" }, { "name": "Array", "elements": [ { "name": "ReactElement" } ], "raw": "ReactElement[]" } ] } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "tsType": { "name": "string" } } } } ], "BlockList": [ { "description": "Building blocks to display a list of items that perform actions.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "BlockList", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Should be subcomponents of `BlockList`" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "hasBorder": { "type": { "name": "bool" }, "required": false, "description": "Should the `BlockList` contain a border on all sides", "defaultValue": { "value": "true", "computed": false } }, "maxHeight": { "type": { "name": "union", "value": [ { "name": "number" }, { "name": "string" } ] }, "required": false, "description": "The max height of the `BlockList`. Pixels will be assumed if no unit is\nprovided." }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "ButterBar": [ { "description": "", "displayName": "renderDismissButton", "methods": [] }, { "description": "", "displayName": "ButterBar", "methods": [], "props": { "alignment": { "required": false, "tsType": { "name": "union", "raw": "\"left\" | \"center\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"center\"" } ] }, "description": "", "defaultValue": { "value": "\"left\"", "computed": false } }, "children": { "required": false, "tsType": { "name": "any" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "isDismissible": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "" }, "type": { "required": false, "tsType": { "name": "union", "raw": "\"bad-news\" | \"brand\" | \"good-news\" | \"warning\"", "elements": [ { "name": "literal", "value": "\"bad-news\"" }, { "name": "literal", "value": "\"brand\"" }, { "name": "literal", "value": "\"good-news\"" }, { "name": "literal", "value": "\"warning\"" } ] }, "description": "", "defaultValue": { "value": "\"brand\"", "computed": false } }, "onDismiss": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => any", "signature": { "arguments": [], "return": { "name": "any" } } }, "description": "", "defaultValue": { "value": "() => null", "computed": false } } } } ], "Button": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Button", "methods": [], "props": { "ariaHasPopup": { "type": { "name": "bool" }, "required": false, "description": "Should be true if this button displays a menu or tooltip" }, "ariaLabel": { "type": { "name": "string" }, "required": false, "description": "Describes buttons that have an icon but no text" }, "buttonRef": { "type": { "name": "union", "value": [ { "name": "func" }, { "name": "shape", "value": { "current": { "name": "instanceOf", "value": "Element", "required": false } } } ] }, "required": false, "description": "React ref to the underlying button component" }, "children": { "type": { "name": "node" }, "required": true, "description": "Text within the button" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "isActive": { "type": { "name": "bool" }, "required": false, "description": "Render button with active state" }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Prevent users from interacting with the button", "defaultValue": { "value": "false", "computed": false } }, "isLink": { "type": { "name": "bool" }, "required": false, "description": "Changes the button to a div for insertion within a Link component", "defaultValue": { "value": "false", "computed": false } }, "isLoading": { "type": { "name": "bool" }, "required": false, "description": "When true, adds a spinner to the button and disables the button", "defaultValue": { "value": "false", "computed": false } }, "isSubmit": { "type": { "name": "bool" }, "required": false, "description": "Make the button act as a submit button", "defaultValue": { "value": "false", "computed": false } }, "leftIcon": { "type": { "name": "node" }, "required": false, "description": "Icon to display on the left" }, "loadingText": { "type": { "name": "string" }, "required": false, "description": "When the button adds a spinner, it displays this text", "defaultValue": { "value": "\"\"", "computed": false } }, "onBlur": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the button loses focus", "defaultValue": { "value": "() => null", "computed": false } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the button is clicked on", "defaultValue": { "value": "() => null", "computed": false } }, "onMouseDown": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the button is mouse downed", "defaultValue": { "value": "() => null", "computed": false } }, "rightIcon": { "type": { "name": "node" }, "required": false, "description": "Icon to display on the right" }, "size": { "type": { "name": "enum", "value": [ { "value": "\"tiny\"", "computed": false }, { "value": "\"small\"", "computed": false }, { "value": "\"large\"", "computed": false }, { "value": "\"narrow\"", "computed": false }, { "value": "\"tight\"", "computed": false } ] }, "required": false, "description": "Various height and width options" }, "style": { "type": { "name": "enum", "value": [ { "value": "\"highlight\"", "computed": false }, { "value": "\"danger\"", "computed": false }, { "value": "\"danger-outline\"", "computed": false }, { "value": "\"outline\"", "computed": false }, { "value": "\"outline-reverse\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"toggle\"", "computed": false }, { "value": "\"underline\"", "computed": false }, { "value": "\"unstyled\"", "computed": false } ] }, "required": false, "description": "Various color options" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" }, "title": { "type": { "name": "string" }, "required": false, "description": "Title of the button shown as tooltip text when the button is hovered" }, "width": { "type": { "name": "enum", "value": [ { "value": "\"default\"", "computed": false }, { "value": "\"full\"", "computed": false } ] }, "required": false, "description": "Various height and width options", "defaultValue": { "value": "\"default\"", "computed": false } } } } ], "ButtonIcon": [ { "description": "", "displayName": "ButtonIcon", "methods": [], "props": { "buttonRef": { "type": { "name": "union", "value": [ { "name": "func" }, { "name": "shape", "value": { "current": { "name": "instanceOf", "value": "Element", "required": false } } } ] }, "required": false, "description": "React ref to the underlying button component", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "iconFill": { "type": { "name": "enum", "computed": true, "value": "Object.keys(FILL_COLOR_MAP)" }, "required": false, "description": "Color to use for the fill of the icon", "tsType": { "name": "union", "raw": "\"aqua\" | \"yellow\" | \"default\" | \"green\" | \"orange\" | \"pink\" | \"red\" | \"magenta\" | \"grey\" | \"purple\" | \"black\"", "elements": [ { "name": "literal", "value": "\"aqua\"" }, { "name": "literal", "value": "\"yellow\"" }, { "name": "literal", "value": "\"default\"" }, { "name": "literal", "value": "\"green\"" }, { "name": "literal", "value": "\"orange\"" }, { "name": "literal", "value": "\"pink\"" }, { "name": "literal", "value": "\"red\"" }, { "name": "literal", "value": "\"magenta\"" }, { "name": "literal", "value": "\"grey\"" }, { "name": "literal", "value": "\"purple\"" }, { "name": "literal", "value": "\"black\"" } ] } }, "iconName": { "type": { "name": "string" }, "required": false, "description": "Name of the icon to use", "tsType": { "name": "string" }, "defaultValue": { "value": "\"add\"", "computed": false } }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Prevent users from interacting with the button", "tsType": { "name": "boolean" } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Function to perform when the close button is clicked.", "tsType": { "name": "signature", "type": "function", "raw": "(evt) => void", "signature": { "arguments": [ { "name": "evt" } ], "return": { "name": "void" } } }, "defaultValue": { "value": "() => null", "computed": false } }, "size": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"medium\"", "computed": false }, { "value": "\"large\"", "computed": false } ] }, "required": false, "description": "Size of the button, medium by default", "tsType": { "name": "union", "raw": "\"small\" | \"medium\" | \"large\"", "elements": [ { "name": "literal", "value": "\"small\"" }, { "name": "literal", "value": "\"medium\"" }, { "name": "literal", "value": "\"large\"" } ] }, "defaultValue": { "value": "\"medium\"", "computed": false } }, "style": { "type": { "name": "enum", "value": [ { "value": "\"highlight\"", "computed": false }, { "value": "\"danger\"", "computed": false }, { "value": "\"danger-outline\"", "computed": false }, { "value": "\"outline\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"unstyled\"", "computed": false } ] }, "required": false, "description": "Various style options", "tsType": { "name": "union", "raw": "\"highlight\" | \"danger\" | \"danger-outline\" | \"outline\" | \"plain\" | \"unstyled\"", "elements": [ { "name": "literal", "value": "\"highlight\"" }, { "name": "literal", "value": "\"danger\"" }, { "name": "literal", "value": "\"danger-outline\"" }, { "name": "literal", "value": "\"outline\"" }, { "name": "literal", "value": "\"plain\"" }, { "name": "literal", "value": "\"unstyled\"" } ] } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": false, "description": "Title of the button used on hover and for screen readers", "tsType": { "name": "string" }, "defaultValue": { "value": "\"\"", "computed": false } } } } ], "ButtonRow": [ { "description": "", "displayName": "ButtonRowSide", "methods": [] }, { "description": "A horizontal list of buttons with space between them.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ButtonRow", "methods": [], "props": { "centerGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for the center" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "leftGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for left side" }, "rightGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for right side" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Card": [ { "description": "", "displayName": "Card", "methods": [], "props": { "children": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": true, "description": "Elements that appears within the component", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "onClose": { "type": { "name": "func" }, "required": false, "description": "method to invoke when a close element is clicked", "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } } }, "shadow": { "type": { "name": "bool" }, "required": false, "description": "Display a subtle shadow around card.", "tsType": { "name": "boolean" }, "defaultValue": { "value": "false", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "For automated testing only.", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": true, "description": "What is the card title", "tsType": { "name": "string" } } } } ], "Checkbox": [ { "description": "Generates a `checkbox` element wrapped in a Label\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Checkbox", "methods": [], "props": { "checked": { "type": { "name": "bool" }, "required": false, "description": "Boolean to set checkbox, for controlled component" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "defaultChecked": { "type": { "name": "bool" }, "required": false, "description": "Boolean for how checkbox renders initially" }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Prevents checkbox from being modified and appears disabled" }, "label": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": false, "description": "Label that describes the checkbox" }, "labelWeight": { "type": { "name": "enum", "value": [ { "value": "\"light\"", "computed": false }, { "value": "\"normal\"", "computed": false }, { "value": "\"bold\"", "computed": false } ] }, "required": false, "description": "Font weight for the label text", "defaultValue": { "value": "\"normal\"", "computed": false } }, "onChange": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the checkbox is clicked" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "CloseButton": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "CloseButton", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "onClick": { "type": { "name": "func" }, "required": true, "description": "Function to perform when the close button is clicked." }, "size": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"medium\"", "computed": false }, { "value": "\"large\"", "computed": false } ] }, "required": false, "description": "Size of the close button.", "defaultValue": { "value": "\"medium\"", "computed": false } } } } ], "Code": [ { "description": "Display code either inline or in its own block.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Code", "methods": [ { "name": "renderCode", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "children": { "type": { "name": "string" }, "required": false, "description": "The code within the component" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "copyButtonStyle": { "type": { "name": "enum", "value": [ { "value": "\"highlight\"", "computed": false }, { "value": "\"danger\"", "computed": false }, { "value": "\"danger-outline\"", "computed": false }, { "value": "\"outline\"", "computed": false }, { "value": "\"outline-reverse\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"toggle\"", "computed": false }, { "value": "\"underline\"", "computed": false }, { "value": "\"unstyled\"", "computed": false }, { "value": "\"none\"", "computed": false } ] }, "required": false, "description": "Style for the CopyButton" }, "copyButtonUsesTextLabel": { "type": { "name": "bool" }, "required": false, "description": "Copy button displays `Copy` instead of icon", "defaultValue": { "value": "false", "computed": false } }, "hasCopyButton": { "type": { "name": "bool" }, "required": false, "description": "Adds a copy button to code examples" }, "isHighlighted": { "type": { "name": "bool" }, "required": false, "description": "Apply syntax highlighting to the code" }, "language": { "type": { "name": "enum", "value": [ { "value": "\"cs\"", "computed": false }, { "value": "\"css\"", "computed": false }, { "value": "\"diff\"", "computed": false }, { "value": "\"html\"", "computed": false }, { "value": "\"java\"", "computed": false }, { "value": "\"javascript\"", "computed": false }, { "value": "\"js\"", "computed": false }, { "value": "\"jsx\"", "computed": false }, { "value": "\"markdown\"", "computed": false }, { "value": "\"md\"", "computed": false }, { "value": "\"objectivec\"", "computed": false }, { "value": "\"php\"", "computed": false }, { "value": "\"python\"", "computed": false }, { "value": "\"ruby\"", "computed": false }, { "value": "\"scss\"", "computed": false }, { "value": "\"swift\"", "computed": false }, { "value": "\"go\"", "computed": false } ] }, "required": false, "description": "Specify a language for the syntax highlighter" }, "ouiStyle": { "type": { "name": "bool" }, "required": false, "description": "ouiStyle" }, "shouldWrap": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the content should wrap" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" }, "type": { "type": { "name": "enum", "value": [ { "value": "\"inline\"", "computed": false }, { "value": "\"block\"", "computed": false } ] }, "required": true, "description": "How the code should be displayed" } } } ], "CodeDiff": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "CodeDiff", "methods": [], "props": { "borderLocation": { "type": { "name": "arrayOf", "value": { "name": "enum", "value": [ { "value": "\"top\"", "computed": false }, { "value": "\"right\"", "computed": false }, { "value": "\"bottom\"", "computed": false }, { "value": "\"left\"", "computed": false } ] } }, "required": false, "description": "Where borders should be added. Defaults to borders on every side (OUI)", "defaultValue": { "value": "[\"top\", \"right\", \"bottom\", \"left\"]", "computed": false } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "header": { "type": { "name": "node" }, "required": false, "description": "Differential title that spans all columns.\nIf not provided, no header will be shown (OUI)", "defaultValue": { "value": "\"\"", "computed": false } }, "newValue": { "type": { "name": "any" }, "required": true, "description": "New value. If of type \"object\", will be\nformatted with JSON.stringify (ReactDiffViewer)" }, "oldValue": { "type": { "name": "any" }, "required": true, "description": "Show and hide line numbers (ReactDiffViewer)" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Value used for testing via data-test-section attribute (OUI)", "defaultValue": { "value": "\"\"", "computed": false } }, "compareMethod": { "defaultValue": { "value": "\"diffWords\"", "computed": false }, "required": false } } } ], "CopyButton": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}\n@private", "displayName": "CopyButton", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "onCopy": { "type": { "name": "func" }, "required": false, "description": "Function to perform when content is copied.\n This callback is passed as onCopy prop to CopyToClipboard component.\n onCopy(text, result)\n result (bool): Returns true if copied successfully, else false." }, "style": { "type": { "name": "enum", "value": [ { "value": "\"highlight\"", "computed": false }, { "value": "\"danger\"", "computed": false }, { "value": "\"danger-outline\"", "computed": false }, { "value": "\"outline\"", "computed": false }, { "value": "\"outline-reverse\"", "computed": false }, { "value": "\"plain\"", "computed": false }, { "value": "\"toggle\"", "computed": false }, { "value": "\"underline\"", "computed": false }, { "value": "\"unstyled\"", "computed": false }, { "value": "\"none\"", "computed": false } ] }, "required": false, "description": "Style option for the button", "defaultValue": { "value": "\"plain\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" }, "textLabel": { "type": { "name": "string" }, "required": false, "description": "String label to use when usesTextLabel is true", "defaultValue": { "value": "\"Copy\"", "computed": false } }, "textToCopy": { "type": { "name": "string" }, "required": true, "description": "The text or code that will be copied" }, "usesTextLabel": { "type": { "name": "bool" }, "required": false, "description": "Whether or not this should use a string label\ninstead of an icon", "defaultValue": { "value": "false", "computed": false } } } } ], "DatePicker": [ { "description": "", "displayName": "getCustomMonthElement", "methods": [] } ], "Dialog": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "DialogNew", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "The body of the dialog to request minimal information from the user." }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "footerButtonList": { "type": { "name": "array" }, "required": true, "description": "Array of buttons used in the footer of the dialog." }, "hasCloseButton": { "type": { "name": "bool" }, "required": false, "description": "Used to determine if the dialog should have a close button.", "defaultValue": { "value": "true", "computed": false } }, "hasOverlay": { "type": { "name": "bool" }, "required": false, "description": "Used to determine if dialog should have a semi\ntransparent overlay behind it.", "defaultValue": { "value": "true", "computed": false } }, "onClose": { "type": { "name": "func" }, "required": false, "description": "Function to perform when the dialog is closed.", "defaultValue": { "value": "() => null", "computed": false } }, "subtitle": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "string" } ] }, "required": false, "description": "A subtitle for the dialog.", "defaultValue": { "value": "\"\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Identifier used to create data-test-section attributes for testing.", "defaultValue": { "value": "\"\"", "computed": false } }, "title": { "type": { "name": "string" }, "required": true, "description": "Main title of the dialog." } } } ], "Disclose": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Disclose", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "" }, "childrenStyle": { "type": { "name": "string" }, "required": false, "description": "" }, "headerStyle": { "type": { "name": "string" }, "required": false, "description": "" }, "indented": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "true", "computed": false } }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "" }, "isInitiallyOpen": { "type": { "name": "bool" }, "required": false, "description": "" }, "isOpen": { "type": { "name": "bool" }, "required": false, "description": "" }, "noBorder": { "type": { "name": "bool" }, "required": false, "description": "" }, "openHandler": { "type": { "name": "func" }, "required": false, "description": "" }, "title": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "string" } ] }, "required": true, "description": "" } } } ], "Row": [ { "description": "", "displayName": "Row", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "", "tsType": { "name": "Array", "elements": [ { "name": "ReactElement" } ], "raw": "ReactElement[]" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "isFullWidth": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether items in the row should take up as much width as possible", "tsType": { "name": "boolean" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "tsType": { "name": "string" } } } } ], "DiscloseTable": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "DiscloseTable", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Should be a `Table.THead` or `Table.TBody`" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "DockedFooter": [ { "description": "", "displayName": "DockedFooter", "methods": [ { "name": "domNodesPresent", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "setEventListeners", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "throttle", "docblock": null, "modifiers": [], "params": [ { "name": "delay", "type": null }, { "name": "fn", "type": null } ], "returns": null }, { "name": "setIsDocked", "docblock": null, "modifiers": [], "params": [ { "name": "callback", "type": null } ], "returns": null }, { "name": "setAtBottom", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "centerGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Any components to be included in the DockedFooter" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "includesMargin": { "type": { "name": "bool" }, "required": false, "description": "Used to determine if there should be top margin", "defaultValue": { "value": "false", "computed": false } }, "leftGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for left side" }, "rightGroup": { "type": { "name": "arrayOf", "value": { "name": "element" } }, "required": false, "description": "Array of buttons for right side" }, "scrollRef": { "type": { "name": "union", "value": [ { "name": "func" }, { "name": "shape", "value": { "current": { "name": "elementType", "required": false } } } ] }, "required": false, "description": "Ref from parent element for DockedFooter to set listeners", "defaultValue": { "value": "null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Identifier used to create data-test-section attributes for testing.", "defaultValue": { "value": "\"\"", "computed": false } } } } ], "DraggableItem": [ { "description": "", "displayName": "DraggableItem", "methods": [], "props": { "id": { "type": { "name": "number" }, "required": true, "description": "Id for this particular Draggable Item" }, "index": { "type": { "name": "number" }, "required": true, "description": "Current index for this particular Draggable Item" }, "item": { "type": { "name": "shape", "value": { "id": { "name": "number", "required": false } } }, "required": true, "description": "Item to render using render function pass as prop" }, "renderFunc": { "type": { "name": "func" }, "required": true, "description": "Function used to render the contents of this Draggable Item" }, "useCustomDragHandle": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the item itself will make use of the drag handle" } } } ], "DragAndDrop": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "DragAndDrop", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "idForDroppableRegion": { "type": { "name": "string" }, "required": true, "description": "ID used for this Droppable region" }, "items": { "type": { "name": "arrayOf", "value": { "name": "shape", "value": { "id": { "name": "number", "required": false } } } }, "required": true, "description": "Array of items to render as DraggableItems" }, "onBeforeCapture": { "type": { "name": "func" }, "required": false, "description": "Function to perform an action before item dimensions are captured", "defaultValue": { "value": "() => null", "computed": false } }, "onDragEnd": { "type": { "name": "func" }, "required": false, "description": "Function to perform an action after dragging has finished", "defaultValue": { "value": "() => null", "computed": false } }, "renderItem": { "type": { "name": "func" }, "required": true, "description": "Function used to render each draggable item" }, "useCustomDragHandle": { "type": { "name": "bool" }, "required": false, "description": "Whether or not items themselves will make use of the drag handle", "defaultValue": { "value": "false", "computed": false } } } } ], "DropdownBlockLink": [ { "description": "", "displayName": "DropdownBlockLink", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Content to be shown in the menu option" }, "hasFauxFocus": { "type": { "name": "bool" }, "required": false, "description": "Whether or not this element should be highlighted." }, "isItemSelected": { "type": { "name": "bool" }, "required": false, "description": "Whether or not this item's checkbox is checked'" }, "isLink": { "type": { "name": "bool" }, "required": false, "description": "Should this be a link or non-clickable text?\nTo indicate item is selected (in single select),\nisLink should be false.", "defaultValue": { "value": "true", "computed": false } }, "isMultiSelect": { "type": { "name": "bool" }, "required": false, "description": "Whether or not this item should include a checkbox" }, "minWidth": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "number" } ] }, "required": false, "description": "Minimum width of the list item, useful if\nyou need to have a block of description text" }, "onClick": { "type": { "name": "func" }, "required": true, "description": "Click handler for the menu option" }, "onMouseEnter": { "type": { "name": "func" }, "required": false, "description": "MouseEnter handler for the menu option", "defaultValue": { "value": "() => null", "computed": false } }, "onMouseLeave": { "type": { "name": "func" }, "required": false, "description": "MouseLeave handler for the menu option", "defaultValue": { "value": "() => null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Used for data-test-section attribute on the link" }, "trackId": { "type": { "name": "string" }, "required": false, "description": "Used for data-track-id attribute on the link" }, "value": { "type": { "name": "string" }, "required": false, "description": "An optional value to invoke the onClick callback with" } } } ], "DropdownBlockLinkSecondaryText": [ { "description": "", "displayName": "DropdownBlockLinkSecondaryText", "methods": [], "props": { "isWarning": { "type": { "name": "bool" }, "required": false, "description": "should show info icon", "defaultValue": { "value": "false", "computed": false } }, "secondaryText": { "type": { "name": "node" }, "required": false, "description": "description text, if provided", "defaultValue": { "value": "null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "test section from parent" } } } ], "DropdownBlockLinkText": [ { "description": "", "displayName": "DropdownBlockLinkText", "methods": [], "props": { "hasExternalIcon": { "type": { "name": "bool" }, "required": false, "description": "adds external icon when true" }, "isDestructive": { "type": { "name": "bool" }, "required": false, "description": "Changes text to red when true" }, "isItemSelected": { "type": { "name": "bool" }, "required": false, "description": "Changes text to black when true" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "test section from parent" }, "text": { "type": { "name": "node" }, "required": false, "description": "text, if provided", "defaultValue": { "value": "null", "computed": false } } } } ], "DropdownContents": [ { "description": "", "displayName": "DropdownContents", "methods": [], "props": { "ariaLabel": { "required": false, "tsType": { "name": "string" }, "description": "Label for the dropdown contents for screen readers" }, "canScroll": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether contents can scroll", "defaultValue": { "value": "false", "computed": false } }, "children": { "required": false, "tsType": { "name": "any" }, "description": "Children of the element." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "direction": { "required": false, "tsType": { "name": "union", "raw": "\"left\" | \"right\" | \"up\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"right\"" }, { "name": "literal", "value": "\"up\"" } ] }, "description": "Direction of contents", "defaultValue": { "value": "\"left\"", "computed": false } }, "maxHeight": { "required": false, "tsType": { "name": "union", "raw": "string | number", "elements": [ { "name": "string" }, { "name": "number" } ] }, "description": "" }, "isLoading": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether or not the dropdown is in a loading state.", "defaultValue": { "value": "undefined", "computed": true } }, "isNoWrap": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether to wrap contents or not", "defaultValue": { "value": "false", "computed": false } }, "minWidth": { "required": false, "tsType": { "name": "union", "raw": "string | number", "elements": [ { "name": "string" }, { "name": "number" } ] }, "description": "Minimum width of contents" }, "renderHeader": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Optional render function to display a header before the list.", "defaultValue": { "value": "noop", "computed": true } }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "Test section for element", "defaultValue": { "value": "\"\"", "computed": false } } } } ], "DropdownListItem": [ { "description": "", "displayName": "DropdownListItem", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": false, "description": "Nodes to display within", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "hardSides": { "type": { "name": "bool" }, "required": false, "description": "Remove padding from sides", "tsType": { "name": "boolean" } }, "hardTop": { "type": { "name": "bool" }, "required": false, "description": "Remove padding from top", "tsType": { "name": "boolean" } }, "ignoreToggle": { "type": { "name": "bool" }, "required": false, "description": "Instructs the Dropdown parent to ignore clicks for toggle purposes.", "tsType": { "name": "boolean" } }, "removeBorderTop": { "type": { "name": "bool" }, "required": false, "description": "Removes border if true", "tsType": { "name": "boolean" } }, "role": { "type": { "name": "string" }, "required": false, "description": "Aria role for this list item. See roles here:\nhttps://www.w3.org/WAI/PF/aria/roles", "tsType": { "name": "string" } } } } ], "Dropdown": [ { "description": "", "displayName": "Dropdown", "methods": [ { "name": "shouldDisplayChildren", "docblock": null, "modifiers": [ "static" ], "params": [ { "name": "{ isOpen, isDisabled }", "type": null } ], "returns": null }, { "name": "componentDidUpdate", "docblock": null, "modifiers": [], "params": [ { "name": "prevProps", "type": null } ], "returns": null }, { "name": "handleHideChildren", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "handleOnBlur", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "handleToggle", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null } ], "returns": null }, { "name": "onMouseOver", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "onMouseLeave", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "activator": { "type": { "name": "elementType" }, "required": false, "description": "React element that when clicked activates the dropdown\nEither this prop OR buttonContent should be used, not both\nNot included in defaultProps because undefined is an expected value" }, "arrowIcon": { "type": { "name": "enum", "value": [ { "value": "\"down\"", "computed": false }, { "value": "\"left\"", "computed": false }, { "value": "\"none\"", "computed": false }, { "value": "\"right\"", "computed": false }, { "value": "\"up\"", "computed": false } ] }, "required": false, "description": "Arrow icon direction:\n- Defaults to 'none', which hides the arrow\n- passing a prop value of false also hides the arrow\n- passing a prop value of true uses down arrow", "defaultValue": { "value": "\"none\"", "computed": false } }, "buttonContent": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "element" }, { "name": "shape", "value": { "label": { "name": "string", "required": false }, "content": { "name": "string", "required": false } } } ] }, "required": false, "description": "Button text, can be a string or element.\nEither this prop OR activator should be used, not both\nNot included in defaultProps because undefined is an expected value" }, "children": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "func" } ] }, "required": true, "description": "Dropdown contents, typically using the component\nUse render prop function for custom hide configuration" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "displayError": { "type": { "name": "bool" }, "required": false, "description": "Show error state.", "defaultValue": { "value": "false", "computed": false } }, "fullWidth": { "type": { "name": "bool" }, "required": false, "description": "Button width is either full or inline-block.", "defaultValue": { "value": "false", "computed": false } }, "hide": { "type": { "name": "func" }, "required": false, "description": "Provided by @withToggle HOC" }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Disable button.", "defaultValue": { "value": "false", "computed": false } }, "isLabelTight": { "type": { "name": "bool" }, "required": false, "description": "Whether button width is narrow or full. Defaults to false.", "defaultValue": { "value": "false", "computed": false } }, "isOpen": { "type": { "name": "bool" }, "required": false, "description": "Provided by @withToggle HOC\nDefaults to false but Dropdown can be open by default if true", "defaultValue": { "value": "false", "computed": false } }, "overChildren": { "type": { "name": "bool" }, "required": false, "description": "Provided by @withState HOC\nWhether or not the children are currently moused over", "defaultValue": { "value": "false", "computed": false } }, "placement": { "type": { "name": "enum", "value": [ { "value": "\"top\"", "computed": false }, { "value": "\"top-start\"", "computed": false }, { "value": "\"top-end\"", "computed": false }, { "value": "\"bottom\"", "computed": false }, { "value": "\"bottom-start\"", "computed": false }, { "value": "\"bottom-end\"", "computed": false }, { "value": "\"right\"", "computed": false }, { "value": "\"right-start\"", "computed": false }, { "value": "\"right-end\"", "computed": false }, { "value": "\"left\"", "computed": false }, { "value": "\"left-start\"", "computed": false }, { "value": "\"left-end\"", "computed": false } ] }, "required": false, "description": "Popper placement property", "defaultValue": { "value": "\"bottom-start\"", "computed": false } }, "renderActivator": { "type": { "name": "func" }, "required": false, "description": "A render prop to render the activator button that when clicked activates\nthe dropdown\nEither this prop OR buttonContent should be used, not both", "defaultValue": { "value": "null", "computed": false } }, "setOverChildren": { "type": { "name": "func" }, "required": false, "description": "Provided by @withToggle HOC. Control for overChildren value", "defaultValue": { "value": "() => null", "computed": false } }, "shouldHideChildrenOnClick": { "type": { "name": "bool" }, "required": false, "description": "Whether Dropdown children should be hidden on children click\n- Defaults to true\n- Pass render prop function as child prop and use provided\n handleHideChildren function to programmatically hide", "defaultValue": { "value": "true", "computed": false } }, "style": { "type": { "name": "string" }, "required": false, "description": "Button style, e.g. highlight, danger, outline\nNot included in defaultProps because undefined is an expected value" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "For automated testing only.", "defaultValue": { "value": "\"\"", "computed": false } }, "toggle": { "type": { "name": "func" }, "required": false, "description": "Provided by @withToggle HOC. Toggle control for isOpen.", "defaultValue": { "value": "() => null", "computed": false } }, "width": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "number" } ] }, "required": false, "description": "Dropdown menu width, in pixels.", "defaultValue": { "value": "200", "computed": false } }, "zIndex": { "type": { "name": "number" }, "required": false, "description": "Override default dropdown menu z-index.", "defaultValue": { "value": "999", "computed": false } } } } ], "EmptyDashboard": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "EmptyDashboard", "methods": [], "props": { "button": { "type": { "name": "node" }, "required": false, "description": "A button, link, or other element that is actionable" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "description": { "type": { "name": "element" }, "required": false, "description": "A string or `div` containing longer text that describes the empty state" }, "descriptionMaxWidth": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "number" } ] }, "required": false, "description": "Max width of description. Accepts any valid CSS width value.", "defaultValue": { "value": "\"450px\"", "computed": false } }, "headline": { "type": { "name": "string" }, "required": true, "description": "Short text about the empty state" }, "imageHeight": { "type": { "name": "string" }, "required": false, "description": "String to set the max image height", "defaultValue": { "value": "\"inherit\"", "computed": false } }, "imagePath": { "type": { "name": "string" }, "required": false, "description": "Path to an image representing the empty state" }, "imageWidth": { "type": { "name": "string" }, "required": false, "description": "String to set the max image width", "defaultValue": { "value": "\"inherit\"", "computed": false } }, "showButtonBelow": { "type": { "name": "bool" }, "required": false, "description": "Boolean used to show the button below the image\ninstead of top right corner of the empty state", "defaultValue": { "value": "false", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Identifier used to create data-test-section attributes for testing", "defaultValue": { "value": "\"empty-hello\"", "computed": false } } } } ], "Fieldset": [ { "description": "", "displayName": "Fieldset", "methods": [], "props": { "bottomSpacing": { "type": { "name": "bool" }, "required": false, "description": "Adds spacing at the bottom. If used in a Form, make this to true.", "tsType": { "name": "boolean" }, "defaultValue": { "value": "true", "computed": false } }, "children": { "type": { "name": "node" }, "required": true, "description": "Children components. Should be Fieldset.Row or Fieldset.Item for proper spacing", "tsType": { "name": "union", "raw": "ReactElement | ReactElement[]", "elements": [ { "name": "ReactElement" }, { "name": "Array", "elements": [ { "name": "ReactElement" } ], "raw": "ReactElement[]" } ] } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "description": { "type": { "name": "node" }, "required": false, "description": "Description for Fieldset", "tsType": { "name": "string" } }, "helpIcon": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include a help popover", "tsType": { "name": "boolean" } }, "isOptional": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include the \"optional\" tag to the fieldset", "tsType": { "name": "boolean" } }, "isRequired": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include a required asterisk", "tsType": { "name": "boolean" } }, "popoverText": { "type": { "name": "string" }, "required": false, "description": "Text for popover", "tsType": { "name": "string" } }, "popoverTitle": { "type": { "name": "string" }, "required": false, "description": "Title for popover", "tsType": { "name": "string" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": false, "description": "Title for Fieldset", "tsType": { "name": "string" } }, "titleSize": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"large\"", "computed": false } ] }, "required": false, "description": "Size of Fieldset title", "tsType": { "name": "union", "raw": "\"small\" | \"large\"", "elements": [ { "name": "literal", "value": "\"small\"" }, { "name": "literal", "value": "\"large\"" } ] }, "defaultValue": { "value": "\"large\"", "computed": false } } } } ], "FilterPicker": [ { "description": "", "displayName": "FilterPicker", "methods": [ { "name": "handleFilterInput", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null } ], "returns": null } ], "props": { "allEntities": { "type": { "name": "union", "value": [ { "name": "arrayOf", "value": { "name": "object" } }, { "name": "custom", "raw": "ImmutablePropTypes.listOf(ImmutablePropTypes.map)" } ] }, "required": false, "description": "Array of Objects or Immutable.List of Immutable.Maps of all entities,\nincluding selected ones", "defaultValue": { "value": "[]", "computed": false } }, "children": { "type": { "name": "func" }, "required": true, "description": "Function that should return a child node, passed an object\nas an argument with the following keys:\n- availableEntities {Array|Immutable.List}:\n The difference of allEntities and entities based on provided\n selectedEntityIds. Additionally, filtered via the default filter\n function based on the filterQuery value set in handleFilterInput,\n or alternatively a provided custom filter function\n- filterQuery {string}:\n Value stored in component state via handleFilterInput\n- handleFilterInput {Function}:\n Function that can be used in an input, that sets the input value\n in component state as filterQuery. This can be used for filtering\n in the default or custom filter function. If a search Input will\n be used with Blocklist and FilterList.ListItem, consider wrapping\n Blocklist inside a div with the oui-filter-picker-list class to\n remove the Input's bottom border (see story/story source for example)\n- selectedEntities {Array|Immutable.List}:\n Given the optionally provided selectedEntityIds, an array or\n Immutable.List of entities, based on ID, from allEntities" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "customFilterFn": { "type": { "name": "func" }, "required": false, "description": "Optional function that, if provided, can be used in place of the\nstandard filter function.\n- Function will receive item, filterQuery, and contentToSearch arguments\n from a filter iterable, the last two values may be undefined so some\n sane defaults aren't a bad idea\n- Should return a boolean value, if null is returned by customFilterFn,\n the default filter function will be used instead\n- Example of a customFilterFn that behaves similarly to the default\n filter function:\n {\n return (\n !item.get('archived') &&\n contentToSearch.includes(filterQuery);\n );\n } }>", "defaultValue": { "value": "() => null", "computed": false } }, "keysToSearch": { "type": { "name": "array" }, "required": false, "description": "Optional array of top level keys in allEntities to join and search for\nthe filterQuery", "defaultValue": { "value": "[\"name\", \"description\"]", "computed": false } }, "selectedEntityIds": { "type": { "name": "union", "value": [ { "name": "arrayOf", "value": { "name": "number" } }, { "name": "custom", "raw": "ImmutablePropTypes.listOf(PropTypes.number)" } ] }, "required": false, "description": "Optional array or Immutable.List of numbers of selected entity IDs.\nDo not provide if selected entities shouldn't be filtered\nfrom availableEntities", "defaultValue": { "value": "[]", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "String value for the outermost container's\ndata-test-section attribute", "defaultValue": { "value": "\"\"", "computed": false } } } } ], "FilterPickerListItem": [ { "description": "", "displayName": "ListItem", "methods": [], "props": { "buttonText": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "description": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } }, "hasFauxFocus": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "false", "computed": false } }, "id": { "type": { "name": "number" }, "required": false, "description": "", "defaultValue": { "value": "0", "computed": false } }, "name": { "type": { "name": "string" }, "required": true, "description": "" }, "onButtonClick": { "type": { "name": "func" }, "required": false, "description": "Optional function, intentionally not in defaultProps\n - Secondary function for additional action (e.g. \"View entity\")\n - Called with the following arguments: event, id, name, description" }, "onClick": { "type": { "name": "func" }, "required": true, "description": "" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } } } } ], "Section": [ { "description": "", "displayName": "Section", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "description": { "type": { "name": "node" }, "required": false, "description": "Description for Form Section", "tsType": { "name": "string" } }, "helpIcon": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include a help popover", "tsType": { "name": "boolean" } }, "isOptional": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include the \"optional\" tag to the section", "tsType": { "name": "boolean" } }, "isRequired": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include a required asterisk", "tsType": { "name": "boolean" } }, "popoverText": { "type": { "name": "string" }, "required": false, "description": "Text for popover", "tsType": { "name": "string" } }, "popoverTitle": { "type": { "name": "string" }, "required": false, "description": "Title for popover", "tsType": { "name": "string" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": false, "description": "Title for Section", "tsType": { "name": "string" } } } } ], "Form": [ { "description": "", "displayName": "Form", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "description": { "type": { "name": "node" }, "required": false, "description": "Description for Form", "tsType": { "name": "string" } }, "helpIcon": { "type": { "name": "bool" }, "required": false, "description": "Indicates whether to include a help popover", "tsType": { "name": "boolean" } }, "popoverText": { "type": { "name": "string" }, "required": false, "description": "Text for popover", "tsType": { "name": "string" } }, "popoverTitle": { "type": { "name": "string" }, "required": false, "description": "Title for popover", "tsType": { "name": "string" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "tsType": { "name": "string" } }, "title": { "type": { "name": "string" }, "required": false, "description": "Title for Form", "tsType": { "name": "string" } } } } ], "Grid": [ { "description": "", "displayName": "GridContainer", "methods": [], "props": { "children": { "required": false, "tsType": { "name": "any" }, "description": "Child elements." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLElement" } ], "raw": "Ref" }, "description": "Ref to the component." }, "tag": { "required": false, "tsType": { "name": "ElementType" }, "description": "Customize the tag element (defaults to 'div').", "defaultValue": { "value": "\"div\"", "computed": false } } } }, { "description": "", "displayName": "Grid", "methods": [], "props": { "children": { "required": false, "tsType": { "name": "any" }, "description": "Child elements." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLElement" } ], "raw": "Ref" }, "description": "Ref to the component." }, "tag": { "required": false, "tsType": { "name": "ElementType" }, "description": "Customize the tag element (defaults to 'div').", "defaultValue": { "value": "\"div\"", "computed": false } } } }, { "description": "", "displayName": "GridCell", "methods": [], "props": { "children": { "required": false, "tsType": { "name": "any" }, "description": "Child elements." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "large": { "required": false, "tsType": { "name": "number" }, "description": "Number of columns the cell spans on a large screen. Fullscreen is 12." }, "medium": { "required": false, "tsType": { "name": "number" }, "description": "Number of columns the cell spans on a medium screen. Fullscreen is 8." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLElement" } ], "raw": "Ref" }, "description": "Ref to the component." }, "small": { "required": false, "tsType": { "name": "number" }, "description": "Number of columns the cell spans on a small screen. Fullscreen is 4." }, "tag": { "required": false, "tsType": { "name": "ElementType" }, "description": "Customize the tag element (defaults to 'div').", "defaultValue": { "value": "\"div\"", "computed": false } } } } ], "HelpPopover": [ { "description": "", "displayName": "HelpPopover", "methods": [], "props": { "behavior": { "type": { "name": "enum", "value": [ { "value": "\"click\"", "computed": false }, { "value": "\"hover\"", "computed": false } ] }, "required": false, "description": "Event to listen to and open the overlay", "tsType": { "name": "union", "raw": "\"click\" | \"hover\"", "elements": [ { "name": "literal", "value": "\"click\"" }, { "name": "literal", "value": "\"hover\"" } ] }, "defaultValue": { "value": "\"click\"", "computed": false } }, "children": { "type": { "name": "node" }, "required": true, "description": "Description of thing that the person hovered for.", "tsType": { "name": "any" } }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "horizontalAttachment": { "type": { "name": "enum", "value": [ { "value": "\"left\"", "computed": false }, { "value": "\"center\"", "computed": false }, { "value": "\"right\"", "computed": false } ] }, "required": false, "description": "Side of the `overlay` that should attach to the `children`", "tsType": { "name": "union", "raw": "\"left\" | \"center\" | \"right\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"center\"" }, { "name": "literal", "value": "\"right\"" } ] } }, "iconSize": { "type": { "name": "enum", "value": [ { "value": "\"small\"", "computed": false }, { "value": "\"medium\"", "computed": false }, { "value": "\"large\"", "computed": false } ] }, "required": false, "description": "Size of icon", "tsType": { "name": "union", "raw": "\"small\" | \"medium\" | \"large\"", "elements": [ { "name": "literal", "value": "\"small\"" }, { "name": "literal", "value": "\"medium\"" }, { "name": "literal", "value": "\"large\"" } ] }, "defaultValue": { "value": "\"medium\"", "computed": false } }, "isConstrainedToScreen": { "type": { "name": "bool" }, "required": false, "description": "Attach `overlay` to an edge of the screen if it is going to move off", "tsType": { "name": "boolean" }, "defaultValue": { "value": "true", "computed": false } }, "popoverTitle": { "type": { "name": "string" }, "required": false, "description": "Title of thing that is being described.", "tsType": { "name": "string" } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Test section", "tsType": { "name": "string" }, "defaultValue": { "value": "\"help-popover\"", "computed": false } }, "verticalAttachment": { "type": { "name": "enum", "value": [ { "value": "\"top\"", "computed": false }, { "value": "\"middle\"", "computed": false }, { "value": "\"bottom\"", "computed": false } ] }, "required": false, "description": "Vertical edge of the `overlay` that should touch the `children`", "tsType": { "name": "union", "raw": "\"top\" | \"middle\" | \"bottom\"", "elements": [ { "name": "literal", "value": "\"top\"" }, { "name": "literal", "value": "\"middle\"" }, { "name": "literal", "value": "\"bottom\"" } ] } } } } ], "Input": [ { "description": "", "displayName": "Input", "methods": [], "props": { "id": { "type": { "name": "custom", "raw": "function verifyIDProp(props) {\n if (props.label && !props.id) {\n return new Error(\"Inputs must include an id when a label is specified for accessibility purposes.\");\n }\n return null;\n}" }, "required": false, "description": "Id to link label and input for accessibility reasons\n @param {Object} props Object of props\n @returns {Error} Error or null", "tsType": { "name": "string" } }, "isOptional": { "type": { "name": "custom", "raw": "function verifyIsOptionalProp(props) {\n if (props.isOptional && !props.label) {\n return new Error(\"Must include a value for the label prop to use the isOptional prop\");\n }\n return null;\n}" }, "required": false, "description": "Adds an optional label if there is a label provided\n @param {Object} props Object of props\n @returns {Error} Error or null", "tsType": { "name": "any" } }, "isRequired": { "type": { "name": "custom", "raw": "function verifyIsRequiredProp(props) {\n if (props.isRequired && !props.label) {\n return new Error(\"Must include a value for the label prop to use the isRequired prop\");\n }\n return null;\n}" }, "required": false, "description": "Includes required asterisk label if true\n @param {Object} props Object of props\n @returns {Error} Error or null", "tsType": { "name": "any" }, "defaultValue": { "value": "false", "computed": false } }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "defaultValue": { "required": false, "tsType": { "name": "string" }, "description": "The default value of the input used on initial render" }, "displayError": { "required": false, "tsType": { "name": "boolean" }, "description": "Includes search icon if true" }, "focus": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether or not to automatically focus this input" }, "hasClearButton": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether or not to add a clear button to right of input" }, "hasSpellCheck": { "required": false, "tsType": { "name": "boolean" }, "description": "Disables spell checking when set to false", "defaultValue": { "value": "true", "computed": false } }, "isAutoCompleteEnabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Allows for prevention of input autocomplete suggestions", "defaultValue": { "value": "true", "computed": false } }, "isDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Prevents input from being modified and appears disabled" }, "isFilter": { "required": false, "tsType": { "name": "boolean" }, "description": "Includes error if true" }, "isReadOnly": { "required": false, "tsType": { "name": "boolean" }, "description": "Prevents input from being modified but doesn't appear disabled" }, "label": { "required": false, "tsType": { "name": "string" }, "description": "Text that describes the input" }, "leftIconName": { "required": false, "tsType": { "name": "string" }, "description": "Name of the icon to place on left side of input" }, "max": { "required": false, "tsType": { "name": "number" }, "description": "Max value for the `input`. Should be used only when `type` is `number`." }, "maxLength": { "required": false, "tsType": { "name": "number" }, "description": "Max length of the input value. Should be used only when type is 'text',\n'email', 'search', 'password', 'tel', or 'url'." }, "min": { "required": false, "tsType": { "name": "number" }, "description": "Min value for the `input`. Should be used only when `type` is `number`." }, "note": { "required": false, "tsType": { "name": "union", "raw": "string | null", "elements": [ { "name": "string" }, { "name": "null" } ] }, "description": "Form note for the input", "defaultValue": { "value": "null", "computed": false } }, "onBlur": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires when the input loses focus. It fires regardless of\nwhether the value has changed." }, "onChange": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires when the input loses focus after the value changes" }, "onClearButtonClick": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires when the input's clear button is clicked" }, "onClick": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires when the input is clicked" }, "onFocus": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires when the input gains focus" }, "onInput": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires anytime the input value changes" }, "onKeyDown": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(...args: any[]) => any", "signature": { "arguments": [ { "name": "args", "type": { "name": "Array", "elements": [ { "name": "any" } ], "raw": "any[]" }, "rest": true } ], "return": { "name": "any" } } }, "description": "Function that fires when a key is pressed down" }, "placeholder": { "required": false, "tsType": { "name": "string" }, "description": "Input placeholder text" }, "rightIconName": { "required": false, "tsType": { "name": "string" }, "description": "Name of the icon to place on right side of input" }, "RightContainer": { "required": false, "tsType": { "name": "any" }, "description": "RightContainer on right side of input" }, "step": { "required": false, "tsType": { "name": "string" }, "description": "Input step value" }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "Hook for automated JavaScript tests" }, "textAlign": { "required": false, "tsType": { "name": "union", "raw": "\"left\" | \"right\"", "elements": [ { "name": "literal", "value": "\"left\"" }, { "name": "literal", "value": "\"right\"" } ] }, "description": "Align text inside input. Default is left." }, "type": { "required": true, "tsType": { "name": "union", "raw": "\"text\" | \"password\" | \"date\" | \"number\" | \"email\" | \"url\" | \"search\" | \"tel\" | \"time\"", "elements": [ { "name": "literal", "value": "\"text\"" }, { "name": "literal", "value": "\"password\"" }, { "name": "literal", "value": "\"date\"" }, { "name": "literal", "value": "\"number\"" }, { "name": "literal", "value": "\"email\"" }, { "name": "literal", "value": "\"url\"" }, { "name": "literal", "value": "\"search\"" }, { "name": "literal", "value": "\"tel\"" }, { "name": "literal", "value": "\"time\"" } ] }, "description": "Supported input types" }, "value": { "required": false, "tsType": { "name": "union", "raw": "string | number", "elements": [ { "name": "string" }, { "name": "number" } ] }, "description": "Text within the input" } } } ], "Label": [ { "description": "Wraps text or HTML in a `label` element. Often used to label inputs.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Label", "methods": [], "props": { "children": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": false, "description": "What the label describes" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "inputId": { "type": { "name": "string" }, "required": false, "description": "Id of the input to properly associate with this label" }, "isOptional": { "type": { "name": "bool" }, "required": false, "description": "Includes optional label if true" }, "isRequired": { "type": { "name": "bool" }, "required": false, "description": "Includes required asterisk label if true" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Layout": [ { "description": "", "displayName": "ThemeProvider", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": false, "description": "" }, "prefixes": { "type": { "name": "object" }, "required": true, "description": "" } } } ], "LayoutGrid": [ { "description": "", "displayName": "LayoutGridContainer", "methods": [], "props": { "children": { "required": false, "tsType": { "name": "any" }, "description": "Child elements." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLElement" } ], "raw": "Ref" }, "description": "Ref to the component." }, "tag": { "required": false, "tsType": { "name": "ElementType" }, "description": "Customize the tag element (defaults to 'div')." } } }, { "description": "", "displayName": "LayoutGrid", "methods": [], "props": { "children": { "required": false, "tsType": { "name": "any" }, "description": "Child elements." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLElement" } ], "raw": "Ref" }, "description": "Ref to the component." }, "tag": { "required": false, "tsType": { "name": "ElementType" }, "description": "Customize the tag element (defaults to 'div')." } } }, { "description": "", "displayName": "LayoutGridCell", "methods": [], "props": { "children": { "required": false, "tsType": { "name": "any" }, "description": "Child elements." }, "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "large": { "required": false, "tsType": { "name": "number" }, "description": "Number of columns the cell spans on a large screen. Fullscreen is 12." }, "medium": { "required": false, "tsType": { "name": "number" }, "description": "Number of columns the cell spans on a medium screen. Fullscreen is 8." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLElement" } ], "raw": "Ref" }, "description": "Ref to the component." }, "small": { "required": false, "tsType": { "name": "number" }, "description": "Number of columns the cell spans on a small screen. Fullscreen is 4." }, "tag": { "required": false, "tsType": { "name": "ElementType" }, "description": "Customize the tag element (defaults to 'div')." } } } ], "Link": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Link", "methods": [], "props": { "ariaLabel": { "type": { "name": "string" }, "required": false, "description": "Label to use for screen readers" }, "children": { "type": { "name": "node" }, "required": true, "description": "Text/node that is linked" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "href": { "type": { "name": "string" }, "required": false, "description": "Href for the anchor element" }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Disable link and interactivity", "defaultValue": { "value": "false", "computed": false } }, "isFullWidth": { "type": { "name": "bool" }, "required": false, "description": "Whether or not this link is full width", "defaultValue": { "value": "false", "computed": false } }, "leftIcon": { "type": { "name": "node" }, "required": false, "description": "Icon to display on the left" }, "newWindow": { "type": { "name": "bool" }, "required": false, "description": "Open link in new window", "defaultValue": { "value": "false", "computed": false } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Click handler function" }, "rightIcon": { "type": { "name": "node" }, "required": false, "description": "Icon to display on the right" }, "style": { "type": { "name": "enum", "value": [ { "value": "\"default\"", "computed": false }, { "value": "\"dark\"", "computed": false }, { "value": "\"muted\"", "computed": false }, { "value": "\"bad-news\"", "computed": false }, { "value": "\"reverse\"", "computed": false } ] }, "required": false, "description": "Link style options" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "ListGroup": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ListGroup", "methods": [ { "name": "Item", "docblock": null, "modifiers": [ "static" ], "params": [ { "name": "{ children, className, density, testSection, ...props }", "type": null } ], "returns": null } ], "props": { "children": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "arrayOf", "value": { "name": "node" } } ] }, "required": true, "description": "" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "subtitle": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } }, "title": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } } } }, { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ListGroupItem", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "density": { "type": { "name": "enum", "value": [ { "value": "\"tight\"", "computed": false }, { "value": "\"loose\"", "computed": false } ] }, "required": false, "description": "", "defaultValue": { "value": "\"loose\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "" } } } ], "Header": [ { "description": "", "displayName": "Header", "methods": [], "props": { "backLinkHref": { "type": { "name": "string" }, "required": false, "description": "Href URL to use for Breadcrumb" }, "backLinkOnClick": { "type": { "name": "func" }, "required": false, "description": "Callback to perform when breadcrumb link is clicked" }, "backLinkText": { "type": { "name": "string" }, "required": false, "description": "Text to use for Breadcrumb" }, "children": { "type": { "name": "node" }, "required": false, "description": "Content to render below the main title" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "hasBackLink": { "type": { "name": "bool" }, "required": false, "description": "Whether or not a breadcrumb back link is present", "defaultValue": { "value": "true", "computed": false } }, "isFullHeight": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the header should be full height", "defaultValue": { "value": "false", "computed": false } }, "primaryTitle": { "type": { "name": "string" }, "required": false, "description": "The title of the current entity", "defaultValue": { "value": "null", "computed": false } }, "projectName": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": true, "description": "The name of the current project" }, "secondaryTitle": { "type": { "name": "string" }, "required": false, "description": "A secondary name of the current entity, if applicable" }, "shouldHeaderScroll": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the header should scroll" }, "usesMonospaceStyling": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the header uses monospace styling", "defaultValue": { "value": "false", "computed": false } } } } ], "HeaderDetails": [ { "description": "", "displayName": "HeaderDetails", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "items": { "type": { "name": "arrayOf", "value": { "name": "shape", "value": { "label": { "name": "string", "required": true }, "value": { "name": "union", "value": [ { "name": "string" }, { "name": "number" }, { "name": "node" } ], "required": true } } } }, "required": true, "description": "List of details to display" }, "spaceBelow": { "type": { "name": "bool" }, "required": false, "description": "Whether or not the details have extra space below", "defaultValue": { "value": "false", "computed": false } } } } ], "NavItem": [ { "description": "", "displayName": "NavItem", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "isActive": { "type": { "name": "bool" }, "required": false, "description": "Whether or not this item is currently selected" }, "leftContent": { "type": { "name": "node" }, "required": true, "description": "Content to render within the NavItem\nWill be left aligned" }, "rightContent": { "type": { "name": "node" }, "required": false, "description": "Content to render within the NavItem\nWill be right aligned" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "String to use for testing" } } } ], "NavList": [ { "description": "", "displayName": "NavList", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": false, "description": "Content to render within the list" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "label": { "type": { "name": "string" }, "required": false, "description": "Label to use for this section" }, "popover": { "type": { "name": "bool" }, "required": false, "description": "Popover to display next to the label" }, "rightLabel": { "type": { "name": "bool" }, "required": false, "description": "Optional text to display to the right of the label" }, "testSection": { "type": { "name": "bool" }, "required": false, "description": "Value used for testing via data-test-section attribute" } } } ], "ManagerSideNav": [ { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ManagerSideNav", "methods": [], "props": { "children": { "type": { "name": "custom", "raw": "(props, propName) => {\n const prop = props[propName];\n let error = null;\n React.Children.forEach(prop, child => {\n if (child === null) {\n return;\n }\n if (![Header, NavList].includes(child.type)) {\n error = new Error(\"Children of ManagerSideNav should be of type Header or NavList.\");\n }\n });\n return error;\n}" }, "required": false, "description": "" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Value used for testing via data-test-section attribute", "defaultValue": { "value": "\"\"", "computed": false } } } } ], "CurrentUserMenu": [ { "description": "", "displayName": "CurrentUserMenu", "methods": [ { "name": "renderActivator", "docblock": null, "modifiers": [], "params": [ { "name": "{ buttonRef, onClick, onBlur }", "type": null } ], "returns": null }, { "name": "renderEmulate", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "renderLinks", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "renderCurrentUserMenu", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "renderCollapsedCurrentUserMenu", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "accountSettingsUrl": { "type": { "name": "string" }, "required": true, "description": "Account Settings Url" }, "accountSwitcherHandler": { "type": { "name": "func" }, "required": true, "description": "Function Called to Switch Account" }, "accountSwitcherItems": { "type": { "name": "arrayOf", "value": { "name": "shape", "value": { "text": { "name": "string", "required": true }, "description": { "name": "string", "required": true }, "url": { "name": "string", "required": true }, "isCurrent": { "name": "bool", "required": true } } } }, "required": true, "description": "An array of elements containing the following account data\ntext: String\nurl: String\ndescription: String\nisCurrent: Bool" }, "isOpen": { "type": { "name": "bool" }, "required": false, "description": "True if Navbar is Open, False if collapsed", "defaultValue": { "value": "true", "computed": false } }, "logoutUrl": { "type": { "name": "string" }, "required": true, "description": "Account Log Out Url" }, "onEmulateClick": { "type": { "name": "func" }, "required": true, "description": "Function called when Emulate is clicked" }, "profileAvatarUrl": { "type": { "name": "string" }, "required": false, "description": "Account Profile Avatar Url" }, "profileUrl": { "type": { "name": "string" }, "required": true, "description": "Account Profile Url" }, "showEmulate": { "type": { "name": "bool" }, "required": false, "description": "Show Emulate Link", "defaultValue": { "value": "false", "computed": false } }, "userName": { "type": { "name": "string" }, "required": true, "description": "Account User name to display" } } } ], "IconLink": [ { "description": "", "displayName": "IconLink", "methods": [ { "name": "renderNavLink", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "onAppRouteLinkClick", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null } ], "returns": null }, { "name": "renderAppRouteLink", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "renderExternalLink", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "renderButton", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "hasExternalIcon": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "false", "computed": false } }, "hasSeparator": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "false", "computed": false } }, "href": { "type": { "name": "string" }, "required": false, "description": "", "defaultValue": { "value": "\"\"", "computed": false } }, "iconName": { "type": { "name": "string" }, "required": true, "description": "" }, "isActive": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "false", "computed": false } }, "isOpen": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "true", "computed": false } }, "isSecondaryLink": { "type": { "name": "bool" }, "required": false, "description": "", "defaultValue": { "value": "false", "computed": false } }, "linkLabel": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": true, "description": "" }, "onClick": { "type": { "name": "func" }, "required": false, "description": "", "defaultValue": { "value": "() => null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": true, "description": "" }, "type": { "type": { "name": "enum", "value": [ { "value": "\"link\"", "computed": false }, { "value": "\"pushstate\"", "computed": false }, { "value": "\"button\"", "computed": false } ] }, "required": false, "description": "", "defaultValue": { "value": "\"link\"", "computed": false } } } } ], "NavBar": [ { "description": "", "displayName": "NavBar.PrimaryLink", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "hasExternalIcon": { "type": { "name": "bool" }, "required": false, "description": "" }, "hasSeparator": { "type": { "name": "bool" }, "required": false, "description": "Should show a separator line before this link.", "defaultValue": { "value": "false", "computed": false } }, "href": { "type": { "name": "string" }, "required": false, "description": "Url to Navigate to when type is link.", "defaultValue": { "value": "\"\"", "computed": false } }, "iconName": { "type": { "name": "string" }, "required": true, "description": "Name of Icon." }, "isActive": { "type": { "name": "bool" }, "required": false, "description": "Whether the link is highlighted blue as the current active nav link.", "defaultValue": { "value": "false", "computed": false } }, "isVisible": { "type": { "name": "bool" }, "required": false, "description": "Condition in which this link is visible.", "defaultValue": { "value": "true", "computed": false } }, "linkLabel": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": false, "description": "Description of url.", "defaultValue": { "value": "\"\"", "computed": false } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Handler called when link is clicked.", "defaultValue": { "value": "() => null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Name of test data section.", "defaultValue": { "value": "null", "computed": false } }, "type": { "type": { "name": "enum", "value": [ { "value": "\"link\"", "computed": false }, { "value": "\"pushstate\"", "computed": false }, { "value": "\"button\"", "computed": false } ] }, "required": false, "description": "Type of Link.", "defaultValue": { "value": "\"link\"", "computed": false } } } }, { "description": "", "displayName": "NavBar.SecondaryLink", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "hasExternalIcon": { "type": { "name": "bool" }, "required": false, "description": "" }, "hasSeparator": { "type": { "name": "bool" }, "required": false, "description": "Should show a separator line before this link.", "defaultValue": { "value": "false", "computed": false } }, "href": { "type": { "name": "string" }, "required": false, "description": "Url to Navigate to when type is link.", "defaultValue": { "value": "\"\"", "computed": false } }, "iconName": { "type": { "name": "string" }, "required": true, "description": "Name of Icon." }, "isActive": { "type": { "name": "bool" }, "required": false, "description": "Whether the link is highlighted blue as the current active nav link.", "defaultValue": { "value": "false", "computed": false } }, "isVisible": { "type": { "name": "bool" }, "required": false, "description": "Condition in which this link is visible.", "defaultValue": { "value": "true", "computed": false } }, "linkLabel": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": false, "description": "Description of url.", "defaultValue": { "value": "\"\"", "computed": false } }, "onClick": { "type": { "name": "func" }, "required": false, "description": "Handler called when link is clicked.", "defaultValue": { "value": "() => null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Name of test data section.", "defaultValue": { "value": "null", "computed": false } }, "type": { "type": { "name": "enum", "value": [ { "value": "\"link\"", "computed": false }, { "value": "\"pushstate\"", "computed": false }, { "value": "\"button\"", "computed": false } ] }, "required": false, "description": "Type of Link.", "defaultValue": { "value": "\"link\"", "computed": false } } } }, { "description": "@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "NavBar", "methods": [ { "name": "PrimaryLink", "docblock": null, "modifiers": [ "static" ], "params": [ { "name": "props", "optional": false, "type": null } ], "returns": null }, { "name": "SecondaryLink", "docblock": null, "modifiers": [ "static" ], "params": [ { "name": "props", "optional": false, "type": null } ], "returns": null } ], "props": { "badgeText": { "type": { "name": "string" }, "required": false, "description": "Text to appear below title in a badge.", "defaultValue": { "value": "\"\"", "computed": false } }, "children": { "type": { "name": "custom", "raw": "(props, propName) => {\n const prop = props[propName];\n let error = null;\n React.Children.forEach(prop, child => {\n if (child === null) {\n // Skip checking empty child nodes\n return;\n }\n if (![SecondaryLink, PrimaryLink, CurrentUserMenu].includes(child.type)) {\n error = new Error(\"Children should be of type PrimaryLink, SecondaryLink, or CurrentUserMenu.\");\n }\n });\n if (!error && React.Children.toArray(prop).filter(child => child.type === CurrentUserMenu).length !== 1) {\n error = new Error(\"There should be only one instance of `CurrentUserMenu`\");\n }\n return error;\n}" }, "required": false, "description": "Allowed Children are , , . Only one of is allowed." }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "footerContent": { "type": { "name": "node" }, "required": false, "description": "Component to appear above the privacy statement." }, "homeUrl": { "type": { "name": "string" }, "required": false, "description": "Url to navigate to when Brand Logo is clicked.", "defaultValue": { "value": "\"\"", "computed": false } }, "isOpen": { "type": { "name": "bool" }, "required": false, "description": "Is Navigation Bar open or closed.", "defaultValue": { "value": "true", "computed": false } }, "logoUrl": { "type": { "name": "string" }, "required": false, "description": "Brand logo URL.", "defaultValue": { "value": "null", "computed": false } }, "title": { "type": { "name": "string" }, "required": false, "description": "Title of navigation bar", "defaultValue": { "value": "\"\"", "computed": false } }, "trialContent": { "type": { "name": "node" }, "required": false, "description": "Component to appear above title and below brand logo.", "defaultValue": { "value": "null", "computed": false } } } } ], "Navigation": [ { "description": "", "displayName": "Navigation", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names.", "tsType": { "name": "string" } }, "helpUrl": { "type": { "name": "string" }, "required": false, "description": "Navigates to this URL when the help icon is clicked", "tsType": { "name": "string" } }, "homeUrl": { "type": { "name": "string" }, "required": false, "description": "Navigates to this URL when the logo clicked", "tsType": { "name": "string" } }, "logoUrl": { "type": { "name": "string" }, "required": false, "description": "Brand logo image url", "tsType": { "name": "string" } }, "onHelpClick": { "type": { "name": "func" }, "required": false, "description": "Function called when the help icon is clicked", "tsType": { "name": "signature", "type": "function", "raw": "(event: Event, url?: string) => void", "signature": { "arguments": [ { "name": "event", "type": { "name": "Event" } }, { "name": "url", "type": { "name": "string" } } ], "return": { "name": "void" } } }, "defaultValue": { "value": "() => null", "computed": false } }, "theme": { "type": { "name": "enum", "value": [ { "value": "\"dark\"", "computed": false }, { "value": "\"light\"", "computed": false } ] }, "required": false, "description": "Navigation bar style. Can be one of these:\n - light\n - dark\n dark by default", "tsType": { "name": "union", "raw": "\"light\" | \"dark\"", "elements": [ { "name": "literal", "value": "\"light\"" }, { "name": "literal", "value": "\"dark\"" } ] }, "defaultValue": { "value": "\"dark\"", "computed": false } }, "title": { "type": { "name": "string" }, "required": true, "description": "Navigation bar title", "tsType": { "name": "string" } } } } ], "OverlayWrapper": [ { "description": "Intelligently position elements on a page.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "OverlayWrapper", "methods": [ { "name": "enableTether", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "disableTether", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "removeBodyEventListener", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "isClickWithinOverlayOrChildren", "docblock": "Disable Tether if a user clicks outside of the `overlay` and `children`.\n@param {Object} event - Click event", "modifiers": [], "params": [ { "name": "event", "description": "Click event", "type": { "name": "Object" }, "optional": false } ], "returns": null, "description": "Disable Tether if a user clicks outside of the `overlay` and `children`." }, { "name": "onChildClick", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null }, { "name": "child", "type": null } ], "returns": null }, { "name": "onChildMouseOver", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null }, { "name": "child", "type": null } ], "returns": null }, { "name": "onChildMouseOut", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null }, { "name": "child", "type": null } ], "returns": null }, { "name": "onEscapeKey", "docblock": null, "modifiers": [], "params": [ { "name": "event", "type": null } ], "returns": null } ], "props": { "attachmentConstraint": { "type": { "name": "enum", "value": [ { "value": "\"both\"", "computed": false }, { "value": "\"element\"", "computed": false }, { "value": "\"none\"", "computed": false }, { "value": "\"target\"", "computed": false }, { "value": "\"together\"", "computed": false } ] }, "required": false, "description": "Determines how the attachment is constrained to the target", "defaultValue": { "value": "\"together\"", "computed": false } }, "behavior": { "type": { "name": "enum", "value": [ { "value": "\"click\"", "computed": false }, { "value": "\"hover\"", "computed": false } ] }, "required": false, "description": "Event to listen to and open the overlay", "defaultValue": { "value": "\"click\"", "computed": false } }, "children": { "type": { "name": "node" }, "required": true, "description": "Element that the `overlay` should attach to" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "horizontalAttachment": { "type": { "name": "enum", "value": [ { "value": "\"left\"", "computed": false }, { "value": "\"center\"", "computed": false }, { "value": "\"right\"", "computed": false } ] }, "required": false, "description": "Side of the `overlay` that should attach to the `children`", "defaultValue": { "value": "\"center\"", "computed": false } }, "horizontalTargetAttachment": { "type": { "name": "enum", "value": [ { "value": "\"left\"", "computed": false }, { "value": "\"center\"", "computed": false }, { "value": "\"right\"", "computed": false } ] }, "required": false, "description": "Side of `children` that should attach to the `overlay`" }, "isConstrainedToScreen": { "type": { "name": "bool" }, "required": false, "description": "Attach `overlay` to an edge of the screen if it is going to move off", "defaultValue": { "value": "false", "computed": false } }, "onHide": { "type": { "name": "func" }, "required": false, "description": "Function that runs when the `overlay` is hidden. Return `false` to prevent\nthe `overlay` from closing.", "defaultValue": { "value": "() => null", "computed": false } }, "onShow": { "type": { "name": "func" }, "required": false, "description": "Function that runs when the `overlay` is shown" }, "overlay": { "type": { "name": "node" }, "required": true, "description": "The element that is attached to the children" }, "shouldHideOnClick": { "type": { "name": "bool" }, "required": false, "description": "Should the `overlay` close when clicking outside of it", "defaultValue": { "value": "true", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" }, "verticalAttachment": { "type": { "name": "enum", "value": [ { "value": "\"top\"", "computed": false }, { "value": "\"middle\"", "computed": false }, { "value": "\"bottom\"", "computed": false } ] }, "required": false, "description": "Vertical edge of the `overlay` that should touch the `children`", "defaultValue": { "value": "\"top\"", "computed": false } }, "verticalTargetAttachment": { "type": { "name": "enum", "value": [ { "value": "\"top\"", "computed": false }, { "value": "\"middle\"", "computed": false }, { "value": "\"bottom\"", "computed": false } ] }, "required": false, "description": "Vertical edge of the `children` that should touch the `overlay`" } }, "childContext": { "hideOverlay": { "type": { "name": "func" }, "required": false } } } ], "Pagination": [ { "description": "@deprecated This component has been deprecated. Use PaginationControls instead.", "displayName": "Pagination", "methods": [ { "name": "createPageChangeHandler", "docblock": null, "modifiers": [], "params": [ { "name": "nextPage", "type": null } ], "returns": null } ], "props": { "currentPage": { "type": { "name": "number" }, "required": true, "description": "Sets the current page number" }, "onChange": { "type": { "name": "func" }, "required": false, "description": "Function that is called when a pagination Button is clicked", "defaultValue": { "value": "() => null", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests", "defaultValue": { "value": "\"\"", "computed": false } }, "totalPages": { "type": { "name": "number" }, "required": true, "description": "Sets the total number of pages" } } } ], "PaginationControls": [ { "description": "", "displayName": "PaginationControls", "methods": [ { "name": "handlePageChange", "docblock": null, "modifiers": [], "params": [ { "name": "newPage", "type": null } ], "returns": null }, { "name": "getCoercedInputs", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "fillPageSlots", "docblock": null, "modifiers": [], "params": [], "returns": null }, { "name": "getHrefUrl", "docblock": null, "modifiers": [], "params": [ { "name": "pageNumber", "type": null } ], "returns": null }, { "name": "renderPageNumbers", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "currentPage": { "type": { "name": "number" }, "required": true, "description": "Sets the current page number" }, "goToPage": { "type": { "name": "func" }, "required": false, "description": "Function that is called when a pagination link is clicked" }, "hrefBaseUrl": { "type": { "name": "custom", "raw": "function (props, propName, componentName) {\n if (props[propName] && typeof props[propName] !== \"string\") {\n return new Error(\n \"Invalid prop `\" + propName + \"` supplied to\" + \" `\" + componentName + \"`. Must be of type string.\"\n );\n } else if (props[propName] && !props[propName].includes(PAGE_NUMBER_PLACEHOLDER)) {\n return new Error(\n \"Invalid prop '\" +\n propName +\n \"' supplied to\" +\n \" '\" +\n componentName +\n `'. Must contain the string \\'${PAGE_NUMBER_PLACEHOLDER}\\'.`\n );\n }\n}" }, "required": false, "description": "Base URL to use for the Link's href.\nMust include the string \"[pageNumber]\"" }, "isLoading": { "type": { "name": "bool" }, "required": false, "description": "Sets the total number of pages" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests", "defaultValue": { "value": "\"\"", "computed": false } }, "totalPages": { "type": { "name": "custom", "raw": "checkPropIsGreaterThanOrEqualTo(2, true)" }, "required": false, "description": "Sets the total number of pages. Must be >=2" }, "totalSlots": { "type": { "name": "custom", "raw": "checkPropIsGreaterThanOrEqualTo(7, false)" }, "required": false, "description": "Sets the total number of spots allowed\nbetween the Previous and Next buttons.\nMust be >= 7, default is 9", "defaultValue": { "value": "9", "computed": false } } } } ], "Popover": [ { "description": "Simple component often used to display supplemental information to contents\non a page.\n\nSee `OverlayWrapper` component to position a popover on a page.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Popover", "methods": [], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Content that appears within the popover body" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "padding": { "type": { "name": "enum", "value": [ { "value": "\"default\"", "computed": false }, { "value": "\"hard\"", "computed": false }, { "value": "\"soft-double\"", "computed": false }, { "value": "\"soft-half\"", "computed": false } ] }, "required": false, "description": "Padding class or 'default' padding for the popover container", "defaultValue": { "value": "\"default\"", "computed": false } }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" }, "title": { "type": { "name": "string" }, "required": false, "description": "Text describing the popover contents" } } } ], "Poptip": [ { "description": "Displays help text when hovering on an element.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Poptip", "methods": [ { "name": "renderPoptip", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "props": { "children": { "type": { "name": "node" }, "required": true, "description": "Content that, when hovered on, makes the Poptip appear" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "content": { "type": { "name": "union", "value": [ { "name": "node" }, { "name": "string" } ] }, "required": true, "description": "content could be a node of a string" }, "delay": { "type": { "name": "number" }, "required": false, "description": "how long it takes after a trigger event is fired for a tooltip to show |\ndefault => 0", "defaultValue": { "value": "0", "computed": false } }, "disable": { "type": { "name": "bool" }, "required": false, "description": "disable value | default => false", "defaultValue": { "value": "false", "computed": false } }, "hideDelay": { "type": { "name": "number" }, "required": false, "description": "how long it takes after a trigger event is fired for a tooltip to hide |\ndefault => 0", "defaultValue": { "value": "0", "computed": false } }, "isAnimated": { "type": { "name": "bool" }, "required": false, "description": "should the poptip content be animated | default => true", "defaultValue": { "value": "true", "computed": false } }, "isInline": { "type": { "name": "bool" }, "required": false, "description": "should the poptip be displayed inline", "defaultValue": { "value": "false", "computed": false } }, "position": { "type": { "name": "enum", "value": [ { "value": "\"top\"", "computed": false }, { "value": "\"bottom\"", "computed": false }, { "value": "\"left\"", "computed": false }, { "value": "\"right\"", "computed": false } ] }, "required": false, "description": "position value options | default => top", "defaultValue": { "value": "\"top\"", "computed": false } }, "theme": { "type": { "name": "enum", "value": [ { "value": "\"dark\"", "computed": false }, { "value": "\"light\"", "computed": false }, { "value": "\"transparent\"", "computed": false } ] }, "required": false, "description": "background color | default => dark", "defaultValue": { "value": "\"dark\"", "computed": false } }, "trigger": { "type": { "name": "enum", "value": [ { "value": "\"mouseenter\"", "computed": false }, { "value": "\"focus\"", "computed": false }, { "value": "\"click\"", "computed": false }, { "value": "\"manual\"", "computed": false } ] }, "required": false, "description": "trigger value options | default => mouseenter focus" } } } ], "ProgressBar": [ { "description": "Generates an `ProgressBar` element\nmost of the common input types.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ProgressBar", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "displayError": { "type": { "name": "bool" }, "required": false, "description": "badNews will change the progress bar color to red", "defaultValue": { "value": "false", "computed": false } }, "leftLabel": { "type": { "name": "string" }, "required": false, "description": "left label" }, "max": { "type": { "name": "union", "value": [ { "name": "number" }, { "name": "string" } ] }, "required": false, "description": "max", "defaultValue": { "value": "100", "computed": false } }, "min": { "type": { "name": "union", "value": [ { "name": "number" }, { "name": "string" } ] }, "required": false, "description": "min", "defaultValue": { "value": "0", "computed": false } }, "progress": { "type": { "name": "union", "value": [ { "name": "number" }, { "name": "string" } ] }, "required": false, "description": "string data for progress" }, "rightLabel": { "type": { "name": "string" }, "required": false, "description": "right label" }, "topLabel": { "type": { "name": "string" }, "required": false, "description": "top label" } } } ], "ProgressDots": [ { "description": "Generates an `ProgressDots`\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "ProgressDots", "methods": [], "props": { "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests" } } } ], "Radio": [ { "description": "Generates a `input` element of type `radio` that is wrapped in a `Label`.\n@param {Object} props - Properties passed to component\n@returns {ReactElement}", "displayName": "Radio", "methods": [], "props": { "checked": { "type": { "name": "bool" }, "required": false, "description": "Boolean to set radio input, for controlled component" }, "className": { "type": { "name": "string" }, "required": false, "description": "CSS class names." }, "defaultChecked": { "type": { "name": "bool" }, "required": false, "description": "Boolean for how radio input renders initially" }, "isDisabled": { "type": { "name": "bool" }, "required": false, "description": "Prevents radio input from being modified and appears disabled" }, "label": { "type": { "name": "union", "value": [ { "name": "string" }, { "name": "node" } ] }, "required": false, "description": "Text that describes the radio input" }, "labelWeight": { "type": { "name": "enum", "value": [ { "value": "\"light\"", "computed": false }, { "value": "\"normal\"", "computed": false }, { "value": "\"bold\"", "computed": false } ] }, "required": false, "description": "Font weight for the label text", "defaultValue": { "value": "\"normal\"", "computed": false } }, "name": { "type": { "name": "string" }, "required": true, "description": "String that can be used to identify a set of radio inputs so that only one\n in the set is checked at any given time." }, "onChange": { "type": { "name": "func" }, "required": false, "description": "Function that fires when the radio input is clicked" }, "testSection": { "type": { "name": "string" }, "required": false, "description": "Hook for automated JavaScript tests", "defaultValue": { "value": "null", "computed": false } } } } ], "RangeSlider": [ { "description": "", "displayName": "RangeSlider", "methods": [], "props": { "className": { "required": false, "tsType": { "name": "string" }, "description": "CSS class names." }, "fillColorName": { "required": false, "tsType": { "name": "unknown" }, "description": "Custom color for slider *", "defaultValue": { "value": "\"default\"", "computed": false } }, "isDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether it is disabled, will render as greyscale if so *", "defaultValue": { "value": "false", "computed": false } }, "onChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(event: ChangeEvent) => void", "signature": { "arguments": [ { "name": "event", "type": { "name": "ChangeEvent", "elements": [ { "name": "HTMLInputElement" } ], "raw": "ChangeEvent" } } ], "return": { "name": "void" } } }, "description": "onChange function" }, "testSection": { "required": false, "tsType": { "name": "string" }, "description": "Hook for automated JavaScript tests" }, "useOffForLabel": { "required": false, "tsType": { "name": "boolean" }, "description": "When true, uses 'Off' instead of '0%'", "defaultValue": { "value": "false", "computed": false } }, "value": { "required": true, "tsType": { "name": "number" }, "description": "The value" } } } ], "SearchPicker": [ { "description": "", "displayName": "SearchPicker", "methods": [ { "name": "componentDidMount", "docblock": "Notify keyboardTracker what to do when ENTER is pressed on an item\nand kickoff the initial search to populate the default result set.", "modifiers": [], "params": [], "returns": null, "description": "Notify keyboardTracker what to do when ENTER is pressed on an item\nand kickoff the initial search to populate the default result set." }, { "name": "componentDidUpdate", "docblock": "Whenever the component updates, notify the keyboardTracker\nof how many items are currently available. (this also resets\nthe faux focus index to 0)", "modifiers": [], "params": [], "returns": null, "description": "Whenever the component updates, notify the keyboardTracker\nof how many items are currently available. (this also resets\nthe faux focus index to 0)" }, { "name": "handleItemSelected", "docblock": null, "modifiers": [], "params": [ { "name": "index", "type": null } ], "returns": null }, { "name": "handleOnInput", "docblock": "Handles changes to the search term by calling the debounced change handler.\nIf the term is an empty string, short circuit and reset the results.\n@param {React.SyntheticEvent} event - The onInput event", "modifiers": [], "params": [ { "name": "event", "description": "The onInput event", "type": { "name": "React.SyntheticEvent" }, "optional": false } ], "returns": null, "description": "Handles changes to the search term by calling the debounced change handler.\nIf the term is an empty string, short circuit and reset the results." }, { "name": "executeNewSearch", "docblock": "Execute the search function in a way that is cancellable by storing\nthe Promise resolution methods in state.\nThis enables subsequent invocations to cancel an in progress\nsearch in favor of a new one.\n@param {string} query - The term to search for.\n@returns {Promise}", "modifiers": [], "params": [ { "name": "query", "description": "The term to search for.", "type": { "name": "string" }, "optional": false } ], "returns": { "description": null, "type": { "name": "Promise", "elements": [ { "name": "Array" } ] } }, "description": "Execute the search function in a way that is cancellable by storing\nthe Promise resolution methods in state.\nThis enables subsequent invocations to cancel an in progress\nsearch in favor of a new one." }, { "name": "getAvailableEntities", "docblock": "Filter the current result set to exclude selected entities.\n@returns {Array}", "modifiers": [], "params": [], "returns": { "description": null, "type": { "name": "Array", "elements": [ { "name": "Object" } ] } }, "description": "Filter the current result set to exclude selected entities." }, { "name": "getResultSet", "docblock": "Helper method to return the current result set,\nfalling back to the default.\n@returns {Array}", "modifiers": [], "params": [], "returns": { "description": null, "type": { "name": "Array", "elements": [ { "name": "Object" } ] } }, "description": "Helper method to return the current result set,\nfalling back to the default." }, { "name": "getResultsText", "docblock": "Compute a human readable result text.\n@returns {Object}", "modifiers": [], "params": [], "returns": { "description": null, "type": { "name": "Object" } }, "description": "Compute a human readable result text." }, { "name": "verifyResultOrThrow", "docblock": "@description Provided an API response, an error will be thrown if the\n provided value is not an Array. This is used within a Promise and\n will only cause the Promise to catch instead of this component.\n@param {*} results - The response of the provided searchFunction, which\n is expected to be an Array.", "modifiers": [], "params": [ { "name": "results", "description": "The response of the provided searchFunction, which\n is expected to be an Array.", "type": { "name": "mixed" }, "optional": false } ], "returns": null, "description": null }, { "name": "renderInput", "docblock": "A render method passed to children so that they can render the search\ninput component wherever they like.\n@param {Object} props - Any additional props to pass to the .\n@returns {React.Component}", "modifiers": [], "params": [ { "name": "props", "description": "Any additional props to pass to the .", "type": { "name": "Object" }, "optional": false } ], "returns": { "description": null, "type": { "name": "React.Component" } }, "description": "A render method passed to children so that they can render the search\ninput component wherever they like." } ], "props": { "children": { "type": { "name": "func" }, "required": true, "description": "A render function that is invoked with the following info:\n availableEntities {Array} - The list of entities available\n based on the current input. If no query term is\n entered, the default search collection is used.\n\n isLoading {Boolean} - Whether or not a search is in progress.\n renderInput {Function} - A function to render the \n searchQuery {String} - The current search term\n currentFauxFocusIndex {Number} - Index of the item currently selected.\n resultsText {Object} - An object containing search result\n summaries based on the the types provided\n See this.getResultsText" }, "currentFauxFocusIndex": { "type": { "name": "number" }, "required": true, "description": "Which index in the list is currently selected.\nvia @keyboardTracker" }, "filterAvailableEntities": { "type": { "name": "func" }, "required": false, "description": "This function can be set when custom search results filtering is required\nIt will override the internal search results filtering\n\n@param {Array} searchResults\n@param {Array} selectedEntityIds\n@param {Array} filteredSearchResults" }, "handleKeyDown": { "type": { "name": "func" }, "required": true, "description": "A handler for the input element event onKeyDown\nvia @keyboardTracker" }, "keyboardRef": { "type": { "name": "shape", "value": { "current": { "name": "elementType", "required": false } } }, "required": false, "description": "The element ref to use for capturing keyboard input.\nvia @keyboardTracker" }, "onItemSelected": { "type": { "name": "func" }, "required": true, "description": "Handler to call when an item is selected via the keyboard." }, "searchFunction": { "type": { "name": "func" }, "required": true, "description": "The function to invoke to execute an authenticated public API search.\nDifferent consumers will have different methods of authenticating.\n\n@param {Object} requestConfig\n@return {Promise}" }, "searchOptions": { "type": { "name": "object" }, "required": false, "description": "Additional options to pass to the search function when a search is\nexecuted. Type and query will be overridden by this component.", "defaultValue": { "value": "{}", "computed": false } }, "selectedEntityIds": { "type": { "name": "array" }, "required": false, "description": "An optional list of ids which should be considered \"selected\".\nIf provided, these ids will be filtered out of the list.", "defaultValue": { "value": "[]", "computed": false } }, "setItemCount": { "type": { "name": "func" }, "required": false, "description": "Sets the number of items for the list index tracker.\nvia @keyboardTracker", "defaultValue": { "value": "noop", "computed": true } }, "setOnItemSelect": { "type": { "name": "func" }, "required": false, "description": "Sets the item select callback fn for the list index tracker.\nvia @keyboardTracker", "defaultValue": { "value": "noop", "computed": true } }, "supportedTypes": { "type": { "name": "array" }, "required": true, "description": "" } } } ], "Select": [ { "description": "Generates an