` element.\n\n@interface ICalloutProps\n","metadata":{}},"card":{"reference":"card","route":"core/components/card","title":"Cards","contents":[{"tag":"heading","value":"Cards","level":1,"route":"core/components/card"},"
A card is a bounded unit of UI content with a solid background color.
\n",{"tag":"heading","value":"CSS API","level":2,"route":"core/components/card.css-api"},"
Start with .pt-card and add an elevation modifier class to apply a drop shadow that simulates\nheight in the UI.
\n
You can also use the .pt-elevation-* classes by themselves to apply shadows to any arbitrary\nelement.
\n",{"tag":"css","value":"pt-card"},{"tag":"heading","value":"Interactive cards","level":3,"route":"core/components/card.interactive-cards"},"
Add the .pt-interactive modifier class to make a .pt-card respond to user interactions. When you\nhover over cards with this class applied, the mouse changes to a pointer and the elevation shadow on\nthe card increases by two levels.
\n
Users expect an interactive card to be a single clickable unit.
\n",{"tag":"css","value":"pt-card.pt-interactive"}],"contentsRaw":"@# Cards\n\nA card is a bounded unit of UI content with a solid background color.\n\n@## CSS API\n\nStart with `.pt-card` and add an elevation modifier class to apply a drop shadow that simulates\nheight in the UI.\n\nYou can also use the `.pt-elevation-*` classes by themselves to apply shadows to any arbitrary\nelement.\n\n@css pt-card\n\n@### Interactive cards\n\nAdd the `.pt-interactive` modifier class to make a `.pt-card` respond to user interactions. When you\nhover over cards with this class applied, the mouse changes to a pointer and the elevation shadow on\nthe card increases by two levels.\n\nUsers expect an interactive card to be a single clickable unit.\n\n@css pt-card.pt-interactive\n","metadata":{}},"collapse":{"reference":"collapse","route":"core/components/collapse","title":"Collapse","contents":[{"tag":"heading","value":"Collapse","level":1,"route":"core/components/collapse"},"
The Collapse element shows and hides content with a built-in slide in/out animation.\nYou might use this to create a panel of settings for your application, with sub-sections\nthat can be expanded and collapsed.
\n",{"tag":"reactExample","value":"CollapseExample"},{"tag":"heading","value":"JavaScript API","level":2,"route":"core/components/collapse.javascript-api"},"
The Collapse component is available in the @blueprintjs/core package.\nMake sure to review the general usage docs for JS components .
\n
Any content should be a child of the Collapse element. Content must be in the document\nflow (e.g. position: absolute; wouldn't work, as the parent element would inherit a height of 0).
\n
Toggling the isOpen prop triggers the open and close animations.\nOnce the component is in the closed state, the children are no longer rendered.
\n
export interface ICollapseExampleState {
isOpen ? : boolean ;
} ;
export class CollapseExample extends React . Component < { } , ICollapseExampleState > {
public state = {
isOpen : false ,
} ;
public render ( ) {
return (
< div >
< Button onClick = { this . handleClick } >
{ this . state . isOpen ? " Hide " : " Show " } build logs
</ Button >
< Collapse isOpen = { this . state . isOpen } >
< pre >
Dummy text.
</ pre >
</ Collapse >
</ div >
) ;
}
private handleClick = ( ) => {
this . setState ( { isOpen : ! this . state . isOpen } ) ;
}
}
",{"tag":"interface","value":"ICollapseProps"}],"contentsRaw":"@# Collapse\n\nThe `Collapse` element shows and hides content with a built-in slide in/out animation.\nYou might use this to create a panel of settings for your application, with sub-sections\nthat can be expanded and collapsed.\n\n@reactExample CollapseExample\n\n@## JavaScript API\n\nThe `Collapse` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#blueprint.usage).\n\nAny content should be a child of the `Collapse` element. Content must be in the document\nflow (e.g. `position: absolute;` wouldn't work, as the parent element would inherit a height of 0).\n\nToggling the `isOpen` prop triggers the open and close animations.\nOnce the component is in the closed state, the children are no longer rendered.\n\n```tsx\nexport interface ICollapseExampleState {\n isOpen?: boolean;\n};\n\nexport class CollapseExample extends React.Component<{}, ICollapseExampleState> {\n public state = {\n isOpen: false,\n };\n\n public render() {\n return (\n
\n
\n {this.state.isOpen ? \"Hide\" : \"Show\"} build logs\n \n
\n \n Dummy text.\n \n \n
\n );\n }\n\n private handleClick = () => {\n this.setState({ isOpen: !this.state.isOpen });\n }\n}\n```\n\n@interface ICollapseProps\n","metadata":{}},"collapsible-list":{"reference":"collapsible-list","route":"core/components/collapsible-list","title":"Collapsible list","contents":[{"tag":"heading","value":"Collapsible list","level":1,"route":"core/components/collapsible-list"},"
The CollapsibleList React component accepts a list of menu items and a count of visible items. It\nshows precisely that many items and collapses the rest into a dropdown menu. The required\nrenderVisibleItem callback prop allows for customizing the appearance of visible items, using the\nprops from the MenuItem children.
\n",{"tag":"reactExample","value":"CollapsibleListExample"},{"tag":"heading","value":"JavaScript API","level":2,"route":"core/components/collapsible-list.javascript-api"},"
The CollapsibleList component is available in the @blueprintjs/core package.\nMake sure to review the general usage docs for JS components .
\n
Children of the CollapsibleList component must be MenuItems so they can be easily rendered\nin the dropdown. Define a renderVisibleItem callback to customize the appearance of visible\nitems using their IMenuItemProps
\n",{"tag":"interface","value":"ICollapsibleListProps"},{"tag":"heading","value":"Separators","level":2,"route":"core/components/collapsible-list.separators"},"
Often a list of items calls for separators between each item.\nAdding separators to a CollapsibleList is easily achieved via CSS using ::after pseudo-elements.
\n
. my-list-item :: after {
display : inline-block ;
content : " " ;
}
. my-list-item : last-child :: after {
display : none ;
}
"],"contentsRaw":"@# Collapsible list\n\nThe `CollapsibleList` React component accepts a list of menu items and a count of visible items. It\nshows precisely that many items and collapses the rest into a dropdown menu. The required\n`renderVisibleItem` callback prop allows for customizing the appearance of visible items, using the\nprops from the `MenuItem` children.\n\n@reactExample CollapsibleListExample\n\n@## JavaScript API\n\nThe `CollapsibleList` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#blueprint.usage).\n\nChildren of the `CollapsibleList` component _must_ be `MenuItem`s so they can be easily rendered\nin the dropdown. Define a `renderVisibleItem` callback to customize the appearance of visible\nitems using their [`IMenuItemProps`](#core/components/menu.menu-item).\n\n@interface ICollapsibleListProps\n\n@## Separators\n\nOften a list of items calls for separators between each item.\nAdding separators to a `CollapsibleList` is easily achieved via CSS using `::after` pseudo-elements.\n\n```css.scss\n// pass `visibleItemClassName=\"my-list-item\"` to component, then...\n\n.my-list-item::after {\n display: inline-block;\n content: \"\";\n // custom separator styles...\n}\n\n// remove separator after the last item\n.my-list-item:last-child::after {\n display: none;\n}\n```\n","metadata":{}},"components":{"reference":"components","route":"core/components","title":"Components","contents":[{"tag":"heading","value":"Components","level":1,"route":"core/components"},"\n",{"tag":"page","value":"alert"},{"tag":"page","value":"breadcrumbs"},{"tag":"page","value":"button"},{"tag":"page","value":"button-group"},{"tag":"page","value":"callout"},{"tag":"page","value":"card"},{"tag":"page","value":"collapse"},{"tag":"page","value":"collapsible-list"},{"tag":"page","value":"context-menu"},{"tag":"page","value":"dialog"},{"tag":"page","value":"editable-text"},{"tag":"page","value":"forms"},{"tag":"page","value":"hotkeys"},{"tag":"page","value":"icon"},{"tag":"page","value":"menu"},{"tag":"page","value":"navbar"},{"tag":"page","value":"non-ideal-state"},{"tag":"page","value":"overlay"},{"tag":"page","value":"popover"},{"tag":"page","value":"portal"},{"tag":"page","value":"progress"},{"tag":"page","value":"sliders"},{"tag":"page","value":"table"},{"tag":"page","value":"tabs"},{"tag":"page","value":"tabs2"},{"tag":"page","value":"tag"},{"tag":"page","value":"text"},{"tag":"page","value":"toast"},{"tag":"page","value":"tooltip"},{"tag":"page","value":"tree"}],"contentsRaw":"@# Components\n\n\n\n@page alert\n@page breadcrumbs\n@page button\n@page button-group\n@page callout\n@page card\n@page collapse\n@page collapsible-list\n@page context-menu\n@page dialog\n@page editable-text\n@page forms\n@page hotkeys\n@page icon\n@page menu\n@page navbar\n@page non-ideal-state\n@page overlay\n@page popover\n@page portal\n@page progress\n@page sliders\n@page table\n@page tabs\n@page tabs2\n@page tag\n@page text\n@page toast\n@page tooltip\n@page tree\n","metadata":{}},"context-menu":{"reference":"context-menu","route":"core/components/context-menu","title":"Context menus","contents":[{"tag":"heading","value":"Context menus","level":1,"route":"core/components/context-menu"},"
Context menus present the user with a custom list of actions upon right-click.
\n
You can create context menus in either of the following ways:
\n
\nby adding the @ContextMenuTarget decorator \nto a React component that implements renderContextMenu(): JSX.Element. \nvia the imperative ContextMenu.show\nand ContextMenu.hide API methods, ideal for non-React-based applications. \n \n",{"tag":"reactExample","value":"ContextMenuExample"},{"tag":"heading","value":"JavaScript API: decorator","level":2,"route":"core/components/context-menu.javascript-api--decorator"},"
The ContextMenuTarget decorator is available in the @blueprintjs/core package.\nMake sure to review the general usage docs for JS components .
\n
The @ContextMenuTarget class decorator can be applied to any React.Component\nclass that meets the following requirements:
\n
\nIt defines an instance method called renderContextMenu() that returns a single JSX.Element\n(most likely a Menu \nIts root element supports the "contextmenu" event and the onContextMenu prop. \n \n
This is always true if the decorated class uses an intrinsic element, such as <div>, as its\nroot. If it uses a custom element as its root, you must ensure that the prop is implemented\ncorrectly for that element.
\n
When the user triggers the "contextmenu" event on the decorated class, renderContextMenu() is\ncalled. If renderContextMenu() returns an element, the browser's native context menu is\nblocked and the returned element is displayed instead in a Popover at the cursor's location.
\n
If the instance has a onContextMenuClose method, the decorator will call this function when\nthe context menu is closed.
\n
import { ContextMenuTarget , Menu , MenuItem } from " @blueprintjs/core " ;
@ ContextMenuTarget
class RightClickMe extends React . Component < { } , { } > {
public render ( ) {
return < div > { ... } </ div > ;
}
public renderContextMenu ( ) {
return (
< Menu >
< MenuItem onClick = { this . handleSave } text = " Save " />
< MenuItem onClick = { this . handleDelete } text = " Delete " />
</ Menu >
) ;
}
public onContextMenuClose ( ) {
}
}
",{"tag":"heading","value":"JavaScript API: imperative","level":2,"route":"core/components/context-menu.javascript-api--imperative"},"
The ContextMenu component is available in the @blueprintjs/core package.\nMake sure to review the general usage docs for JS components .
\n
The imperative API provides a single static ContextMenu object, enforcing the principle that only\none context menu can be open at a time.
\n
\nContextMenu.show(menu: JSX.Element, offset: IOffset, onClose?: () => void): void –\nShow the given element at the given offset from the top-left corner of the viewport.\nShowing a menu closes the previously shown one automatically. \n
The menu appears below-right of this point, but will flip to below-left instead if there is not\nenough room onscreen. The optional callback is invoked when this menu closes.
\n
\nContextMenu.hide(): void – Hide the context menu, if it is open.ContextMenu.isOpen(): boolean – Whether a context menu is currently visible. \n
This API is ideal for non-React-based apps or for programmatically triggered menus.
\n
import { ContextMenu , MenuFactory , MenuItemFactory } from " @blueprintjs/core " ;
const rightClickMe = document . query ( " #right-click-me " ) as HTMLElement ;
rightClickMe . oncontextmenu = ( e : MouseEvent ) => {
e . preventDefault ( ) ;
const menu = MenuFactory ( {
children : [
MenuItemFactory ( { onClick : handleSave , text : " Save " } ) ,
MenuItemFactory ( { onClick : handleDelete , text : " Delete " } ) ,
]
} ) ;
ContextMenu . show ( menu , { left : e . clientX , top : e . clientY } , ( ) => {
} ) ;
} ;
"],"contentsRaw":"@# Context menus\n\nContext menus present the user with a custom list of actions upon right-click.\n\nYou can create context menus in either of the following ways:\n\n- by adding the `@ContextMenuTarget` [decorator](#core/components/context-menu.javascript-api--decorator)\n to a React component that implements `renderContextMenu(): JSX.Element`.\n- via the [imperative](#core/components/context-menu.javascript-api--imperative) `ContextMenu.show`\n and `ContextMenu.hide` API methods, ideal for non-React-based applications.\n\n@reactExample ContextMenuExample\n\n@## JavaScript API: decorator\n\nThe `ContextMenuTarget` decorator is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#blueprint.usage).\n\nThe `@ContextMenuTarget` [class decorator][ts-decorator] can be applied to any `React.Component`\nclass that meets the following requirements:\n\n- It defines an instance method called `renderContextMenu()` that returns a single `JSX.Element`\n(most likely a [`Menu`](#core/components/menu)).\n- Its root element supports the `\"contextmenu\"` event and the `onContextMenu` prop.\n\nThis is always true if the decorated class uses an intrinsic element, such as `
`, as its\nroot. If it uses a custom element as its root, you must ensure that the prop is implemented\ncorrectly for that element.\n\nWhen the user triggers the `\"contextmenu\"` event on the decorated class, `renderContextMenu()` is\ncalled. If `renderContextMenu()` returns an element, the browser's native [context menu][wiki-cm] is\nblocked and the returned element is displayed instead in a `Popover` at the cursor's location.\n\nIf the instance has a `onContextMenuClose` method, the decorator will call this function when\nthe context menu is closed.\n\n```tsx\nimport { ContextMenuTarget, Menu, MenuItem } from \"@blueprintjs/core\";\n\n@ContextMenuTarget\nclass RightClickMe extends React.Component<{}, {}> {\n public render() {\n // root element must support `onContextMenu`\n return
{...}
;\n }\n\n public renderContextMenu() {\n // return a single element, or nothing to use default browser behavior\n return (\n
\n \n );\n }\n\n public onContextMenuClose() {\n // Optional method called once the context menu is closed.\n }\n}\n```\n\n[ts-decorator]: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Decorators.md\n[wiki-cm]: https://en.wikipedia.org/wiki/Context_menu\n\n@## JavaScript API: imperative\n\nThe `ContextMenu` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#blueprint.usage).\n\nThe imperative API provides a single static `ContextMenu` object, enforcing the principle that only\none context menu can be open at a time.\n\n- `ContextMenu.show(menu: JSX.Element, offset: IOffset, onClose?: () => void): void` –\nShow the given element at the given offset from the top-left corner of the viewport.\nShowing a menu closes the previously shown one automatically.\n\nThe menu appears below-right of this point, but will flip to below-left instead if there is not\nenough room onscreen. The optional callback is invoked when this menu closes.\n\n- `ContextMenu.hide(): void` – Hide the context menu, if it is open.\n- `ContextMenu.isOpen(): boolean` – Whether a context menu is currently visible.\n\nThis API is ideal for non-React-based apps or for programmatically triggered menus.\n\n```tsx\nimport { ContextMenu, MenuFactory, MenuItemFactory } from \"@blueprintjs/core\";\n\nconst rightClickMe = document.query(\"#right-click-me\") as HTMLElement;\nrightClickMe.oncontextmenu = (e: MouseEvent) => {\n // prevent the browser's native context menu\n e.preventDefault();\n\n // render a Menu without JSX...\n const menu = MenuFactory({\n children: [\n MenuItemFactory({ onClick: handleSave, text: \"Save\" }),\n MenuItemFactory({ onClick: handleDelete, text: \"Delete\" }),\n ]\n });\n\n // mouse position is available on event\n ContextMenu.show(menu, { left: e.clientX, top: e.clientY }, () => {\n // menu was closed; callback optional\n });\n};\n```\n","metadata":{}},"dialog":{"reference":"dialog","route":"core/components/dialog","title":"Dialogs","contents":[{"tag":"heading","value":"Dialogs","level":1,"route":"core/components/dialog"},"
Dialogs present content overlaid over other parts of the UI.
\n
\n
Terminology note \n The term "modal" is sometimes used to mean "dialog," but this is a misnomer.\n
Modal is an adjective that describes parts of a UI.\n An element is considered modal if it\n
blocks interaction with the rest of the application .\n We use the term "dialog" to avoid confusion with the adjective.\n
\n\n",{"tag":"reactExample","value":"DialogExample"},{"tag":"heading","value":"JavaScript API","level":2,"route":"core/components/dialog.javascript-api"},"
The Dialog component is available in the @blueprintjs/core package.\nMake sure to review the general usage docs for JS components .
\n
There are two ways to render dialogs:
\n
\ninjected into a newly created element attached to document.body using <Portal>.\nThis is the default behavior. \nin-place in the DOM tree. Set inline={true} to enable this behavior. \n \n
Dialog is a stateless React component. The children you provide to this component\nare rendered as contents inside the .pt-dialog element.
\n
interface IDialogExampleState {
isOpen : boolean ;
}
class DialogExample extends React . Component < { } , IDialogExampleState > {
public state = { isOpen : false } ;
public render ( ) {
return (
< div >
< Button onClick = { this . toggleDialog } text = " Show dialog " />
< Dialog
iconName = " inbox "
isOpen = { this . state . isOpen }
onClose = { this . toggleDialog }
title = " Dialog header "
>
< div className = " pt-dialog-body " >
Some content
</ div >
< div className = " pt-dialog-footer " >
< div className = " pt-dialog-footer-actions " >
< Button text = " Secondary " />
< Button
intent = { Intent . PRIMARY }
onClick = { this . toggleDialog }
text = " Primary "
/>
</ div >
</ div >
</ Dialog >
</ div >
) ;
}
private toggleDialog = ( ) => this . setState ( { isOpen : ! this . state . isOpen } ) ;
}
",{"tag":"interface","value":"IDialogProps"},{"tag":"heading","value":"CSS API","level":2,"route":"core/components/dialog.css-api"},"
You can create dialogs manually using the HTML markup and pt-dialog-* classes below.\nHowever, you should use the dialog JavaScript APIs whenever possible,\nas they automatically generate some of this markup.
\n
More examples of dialog content are shown below.
\n",{"tag":"css","value":"pt-dialog"}],"contentsRaw":"@# Dialogs\n\nDialogs present content overlaid over other parts of the UI.\n\n
\n
Terminology note \n The term \"modal\" is sometimes used to mean \"dialog,\" but this is a misnomer.\n _Modal_ is an adjective that describes parts of a UI.\n An element is considered modal if it\n [blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).\n We use the term \"dialog\" to avoid confusion with the adjective.\n\n\n@reactExample DialogExample\n\n@## JavaScript API\n\nThe `Dialog` component is available in the __@blueprintjs/core__ package.\nMake sure to review the [general usage docs for JS components](#blueprint.usage).\n\nThere are two ways to render dialogs:\n\n- injected into a newly created element attached to `document.body` using `
`.\n This is the default behavior.\n- in-place in the DOM tree. Set `inline={true}` to enable this behavior.\n\n`Dialog` is a stateless React component. The children you provide to this component\nare rendered as contents inside the `.pt-dialog` element.\n\n```tsx\ninterface IDialogExampleState {\n isOpen: boolean;\n}\n\nclass DialogExample extends React.Component<{}, IDialogExampleState> {\n public state = { isOpen: false };\n\n public render() {\n return (\n \n
\n
\n \n Some content\n
\n \n \n EditableText looks like normal UI text, but transforms into a text input field when the user\nfocuses it.
\nThe text input inherits all font styling from its ancestors, making the transition between reading\nand editing text seamless.
\nYou might use this component for inline renaming, or for an\neditable multiline description .\nYou should not use EditableText when a static always-editable <input> or\n<textarea> tag would suffice.
\n\n
Centering the component \n
Do not center this component using
text-align: center, as it will cause an infinite loop\n in the browser (
more details ). Instead,\n you should center the component via flexbox or with
position and
transform: translateX(-50%).\n
The EditableText component is available in the @blueprintjs/core package. Make sure to review\nthe general usage docs for JS components .
\nEditableText can be used like an input\nelementvalue or defaultValue props, respectively.
\nThe onConfirm and onCancel callbacks are invoked based on user interaction. The user presses\nenter or blurs the input to confirm the current value, or presses esc to cancel. Canceling resets\nthe field to the last confirmed value. Neither callback is invoked if the value is unchanged.
\nEditableText by default supports exactly one line of text and will grow or shrink horizontally\nbased on the length of text. See below for information on multiline\nsupport .
\n",{"tag":"interface","value":"IEditableTextProps"},{"tag":"heading","value":"Multiline mode","level":2,"route":"core/components/editable-text.multiline-mode"},"< EditableText multiline minLines = { 3 } maxLines = { 12 } { ... props } />
Provide the multiline prop to create an EditableText field that spans multiple lines. Multiline\nmode uses a <textarea> instead of an <input type="text"> to support multiple lines of text.
\nUsers confirm text in multiline mode by pressing ctrl enter or cmd enter rather than\nsimply enter. (Pressing the enter key by itself moves the cursor to the next line.)
\nAdditionally, in multiline mode the component's width is fixed at 100%. It grows or shrinks\nvertically instead, based on the number of lines of text. You can use the minLines and\nmaxLines props to constrain the vertical size of the component.
\n\n
Multiline prop format \n You should declare multiline as a valueless boolean prop, as in the example above\n (<EditableText multiline ...>). This prevents you from changing the value after declaring it,\n which would provide a sub-optimal experience for users (multiline text does not always render\n cleanly into a single line).\n\n"],"contentsRaw":"@# Editable text\n\n`EditableText` looks like normal UI text, but transforms into a text input field when the user\nfocuses it.\n\nThe text input inherits all font styling from its ancestors, making the transition between reading\nand editing text seamless.\n\nYou might use this component for inline renaming, or for an\n[editable multiline description](#core/components/editable-text.multiline-mode).\nYou should not use `EditableText` when a static always-editable `< textarea class = " pt-input {{ .modifier }} " {{ :modifier }} dir = " auto " > < / textarea >
Disabled
\n","name":":disabled"},{"documentation":"Readonly
\n","name":":readonly"},{"documentation":"Larger font size
\n","name":".pt-large"},{"documentation":"Primary intent
\n","name":".pt-intent-primary"},{"documentation":"Danger intent
\n","name":".pt-intent-danger"},{"documentation":"Take up full width of parent element
\n","name":".pt-fill"}],"reference":"pt-textarea"},"pt-tree":{"documentation":"","markup":"","markupHtml":"< div class = " pt-tree pt-elevation-0 " >
< ul class = " pt-tree-node-list pt-tree-root " >
< li class = " pt-tree-node pt-tree-node-expanded " >
< div class = " pt-tree-node-content " >
< span class = " pt-tree-node-caret pt-tree-node-caret-open pt-icon-standard " > < / span >
< span class = " pt-tree-node-icon pt-icon-standard pt-icon-folder-close " > < / span >
< span class = " pt-tree-node-label " > Label </ span >
< span class = " pt-tree-node-secondary-label " > Secondary label </ span >
</ div >
< ul class = " pt-tree-node-list " >
< li class = " pt-tree-node " >
< div class = " pt-tree-node-content " >
< span class = " pt-tree-node-caret-none pt-icon-standard " > < / span >
< span class = " pt-tree-node-icon pt-icon-standard pt-icon-document " > < / span >
< span class = " pt-tree-node-label " > A Document </ span >
</ div >
</ li >
< li class = " pt-tree-node " >
< div class = " pt-tree-node-content " >
< span class = " pt-tree-node-caret-none pt-icon-standard " > < / span >
< span class = " pt-tree-node-icon pt-icon-standard pt-icon-document " > < / span >
< span class = " pt-tree-node-label " > Another Document </ span >
</ div >
</ li >
</ ul >
</ li >
</ ul >
</ div >
Blueprint components react overlay date picker.
","markupHtml":"< div class = " {{ .modifier }} " > Blueprint components react overlay date picker. </ div >
Default UI text. This is applied to the document body as part of core styles.
\n","name":".pt-ui-text"},{"documentation":"Larger UI text.
\n","name":".pt-ui-text-large"}],"reference":"pt-ui-text"},"typography.links":{"documentation":"Simply use an <a href=""> tag as you normally would. No class is necessary for Blueprint styles.\nLinks are underlined only when hovered.
\nPutting an icon inside a link will cause it to inherit the link's text color.
\n","markup":"","markupHtml":"undefined","modifiers":[],"reference":"typography.links"},"utilities":{"documentation":"","markup":"\n Blueprint components react overlay date picker. Breadcrumbs dialog progress non-ideal state.\n
","markupHtml":"< div class = " {{ .modifier }} " style = " width: 320px; " >
Blueprint components react overlay date picker. Breadcrumbs dialog progress non-ideal state.
</ div >
Changes text color to a gentler gray.
\n","name":".pt-text-muted"},{"documentation":"Truncates a single line of text with an ellipsis if it overflows its container.
\n","name":".pt-text-overflow-ellipsis"}],"reference":"utilities"},"variables.colors":{"documentation":"These variables are semantic aliases of our colors . They are used throughout Blueprint\nitself to ensure consistent color usage across components.
\n\n \n \n Variable \n Description \n \n \n \n \n
$pt-intent-primaryPrimary intent color \n \n \n
$pt-intent-successSuccess intent color \n \n \n
$pt-intent-warningWarning intent color \n \n \n
$pt-intent-dangerDanger intent color \n \n\n \n
$pt-app-background-colorApplication background color \n \n \n
$pt-dark-app-background-colorDark theme application background color \n \n\n \n
$pt-text-colorDefault text color \n \n \n
$pt-text-color-mutedMuted text color \n \n \n
$pt-text-color-disabledDisabled text color \n \n \n
$pt-heading-colorText color for headers \n \n \n
$pt-link-colorText color for links \n \n \n
$pt-dark-text-colorDark theme default text color \n \n \n
$pt-dark-text-color-mutedDark theme muted text color \n \n \n
$pt-dark-text-color-disabledDark theme disabled text color \n \n \n
$pt-dark-heading-colorDark theme text color for headers \n \n \n
$pt-dark-link-colorDark theme text color for links \n \n \n
$pt-text-selection-colorText selection color \n \n\n \n
$pt-icon-colorDefault icon color \n \n \n
$pt-icon-color-hoverHovered icon color \n \n \n
$pt-icon-color-disabledDisabled icon color \n \n \n
$pt-icon-color-selectedSelected icon color \n \n \n
$pt-dark-icon-colorDark theme default icon color \n \n \n
$pt-dark-icon-color-hoverDark theme hovered icon color \n \n \n
$pt-dark-icon-color-disabledDark theme disabled icon color \n \n \n
$pt-dark-icon-color-selectedDark theme selected icon color \n \n\n \n
$pt-divider-blackBlack divider color \n \n \n
$pt-dark-divider-blackDark theme black divider color \n \n \n
$pt-dark-divider-whiteDark theme white divider color \n \n\n \n
$pt-code-text-colorCode text color \n \n \n
$pt-code-background-colorCode background color \n \n \n
$pt-dark-code-text-colorDark theme code text color \n \n \n
$pt-dark-code-background-colorDark theme code background color \n \n \n
","markup":"","markupHtml":"undefined","modifiers":[],"reference":"variables.colors"}}}
/***/ }),
-/* 659 */
+/* 665 */
/***/ (function(module, exports) {
- module.exports = [{"name":"@blueprintjs/core","version":"1.31.0"},{"name":"@blueprintjs/datetime","version":"1.22.0"},{"name":"@blueprintjs/docs","version":"1.1.1"},{"name":"@blueprintjs/labs","version":"0.11.0"},{"name":"@blueprintjs/table","version":"1.28.0"}]
+ module.exports = [{"name":"@blueprintjs/core","version":"1.32.0"},{"name":"@blueprintjs/datetime","version":"1.23.0"},{"name":"@blueprintjs/docs","version":"1.1.1"},{"name":"@blueprintjs/labs","version":"0.12.0"},{"name":"@blueprintjs/table","version":"1.29.0"}]
/***/ }),
-/* 660 */
+/* 666 */
/***/ (function(module, exports) {
- module.exports = ["1.31.0"]
+ module.exports = ["1.32.0"]
/***/ })
/******/ ]);
diff --git a/package.json b/package.json
index a8c5d5d8f5..c1d72f484e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "blueprint-monorepo",
- "version": "1.31.0",
+ "version": "1.32.0",
"private": true,
"description": "A React UI toolkit for the web.",
"scripts": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 21f6a2733f..1dc5b36c0e 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@blueprintjs/core",
- "version": "1.31.0",
+ "version": "1.32.0",
"description": "Core styles & components",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
diff --git a/packages/datetime/package.json b/packages/datetime/package.json
index ab441c9e39..0ab9642e9b 100644
--- a/packages/datetime/package.json
+++ b/packages/datetime/package.json
@@ -1,6 +1,6 @@
{
"name": "@blueprintjs/datetime",
- "version": "1.22.0",
+ "version": "1.23.0",
"description": "Components for interacting with dates and times",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
diff --git a/packages/labs/package.json b/packages/labs/package.json
index 9e23577718..4ad0ea8fdf 100644
--- a/packages/labs/package.json
+++ b/packages/labs/package.json
@@ -1,6 +1,6 @@
{
"name": "@blueprintjs/labs",
- "version": "0.11.0",
+ "version": "0.12.0",
"description": "Incubator for unstable and in-development Blueprint components",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
diff --git a/packages/site-docs/package.json b/packages/site-docs/package.json
index 766c0bb2fc..218090ef65 100644
--- a/packages/site-docs/package.json
+++ b/packages/site-docs/package.json
@@ -1,14 +1,14 @@
{
"name": "blueprintjs.com/docs",
- "version": "1.31.0",
+ "version": "1.32.0",
"description": "Blueprint Docs",
"private": true,
"dependencies": {
- "@blueprintjs/core": "^1.31.0",
- "@blueprintjs/datetime": "^1.22.0",
+ "@blueprintjs/core": "^1.32.0",
+ "@blueprintjs/datetime": "^1.23.0",
"@blueprintjs/docs": "^1.1.1",
- "@blueprintjs/labs": "^0.11.0",
- "@blueprintjs/table": "^1.28.0",
+ "@blueprintjs/labs": "^0.12.0",
+ "@blueprintjs/table": "^1.29.0",
"bourbon": "^4.2.2",
"chroma-js": "^1.3.4",
"classnames": "^2.2.5",
diff --git a/packages/table/package.json b/packages/table/package.json
index 004c577355..c68f4786a7 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -1,6 +1,6 @@
{
"name": "@blueprintjs/table",
- "version": "1.28.0",
+ "version": "1.29.0",
"description": "Scalable interactive table component",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
@@ -20,7 +20,7 @@
"watch": "onchange 'src/**' 'preview/*.ts*' -- npm-run-all build:gulp build:preview"
},
"dependencies": {
- "@blueprintjs/core": "^1.30.0",
+ "@blueprintjs/core": "^1.32.0",
"classnames": "^2.2",
"es6-shim": "^0.35",
"pure-render-decorator": "^1.1",