@blueprintjs/core - npm Package Compare versions

Comparing version 5.3.3 to 5.4.0

lib/cjs/common/classes.d.ts

@@ -73,2 +73,5 @@ import { Alignment } from "./alignment";
 export declare const CARD: string;
+export declare const CONTROL_CARD: string;
+export declare const CONTROL_CARD_LABEL: string;
+export declare const SWITCH_CONTROL_CARD: string;
 export declare const CARD_LIST: string;
@@ -75,0 +78,0 @@ export declare const CARD_LIST_BORDERED: string;

lib/cjs/common/classes.js

@@ -19,7 +19,7 @@ "use strict";
 exports.LIST = exports.HEADING = exports.CODE_BLOCK = exports.CODE = exports.BLOCKQUOTE = exports.TEXT_OVERFLOW_ELLIPSIS = exports.TEXT_DISABLED = exports.TEXT_MUTED = exports.TEXT_SMALL = exports.TEXT_LARGE = exports.MONOSPACE_TEXT = exports.RUNNING_TEXT = exports.UI_TEXT = exports.FOCUS_STYLE_MANAGER_IGNORE = exports.FOCUS_DISABLED = exports.INTENT_DANGER = exports.INTENT_WARNING = exports.INTENT_SUCCESS = exports.INTENT_PRIMARY = exports.ELEVATION_4 = exports.ELEVATION_3 = exports.ELEVATION_2 = exports.ELEVATION_1 = exports.ELEVATION_0 = exports.POSITION_RIGHT = exports.POSITION_LEFT = exports.POSITION_BOTTOM = exports.POSITION_TOP = exports.VERTICAL = exports.SMALL = exports.SELECTED = exports.ROUND = exports.READ_ONLY = exports.MULTILINE = exports.PADDED = exports.OUTLINED = exports.MINIMAL = exports.LOADING = exports.LARGE = exports.INTERACTIVE = exports.INLINE = exports.FIXED_TOP = exports.FIXED = exports.FILL = exports.DISABLED = exports.DARK = exports.COMPACT = exports.ALIGN_RIGHT = exports.ALIGN_LEFT = exports.ACTIVE = void 0;
-exports.EDITABLE_TEXT_EDITING = exports.EDITABLE_TEXT_CONTENT = exports.EDITABLE_TEXT = exports.DRAWER_HEADER = exports.DRAWER_FOOTER = exports.DRAWER_BODY = exports.DRAWER = exports.DIVIDER = exports.DIALOG_STEP_VIEWED = exports.DIALOG_STEP_ICON = exports.DIALOG_STEP_TITLE = exports.DIALOG_STEP_CONTAINER = exports.DIALOG_STEP = exports.DIALOG_FOOTER_ACTIONS = exports.DIALOG_FOOTER_MAIN_SECTION = exports.DIALOG_FOOTER_FIXED = exports.DIALOG_FOOTER = exports.DIALOG_CLOSE_BUTTON = exports.DIALOG_BODY_SCROLL_CONTAINER = exports.DIALOG_BODY = exports.DIALOG_HEADER = exports.DIALOG_CONTAINER = exports.DIALOG = exports.CONTROL_GROUP = exports.CONTEXT_MENU_BACKDROP = exports.CONTEXT_MENU_POPOVER = exports.CONTEXT_MENU_VIRTUAL_TARGET = exports.CONTEXT_MENU = exports.COLLAPSE_BODY = exports.COLLAPSE = exports.CARD_LIST_BORDERED = exports.CARD_LIST = exports.CARD = exports.CALLOUT_ICON = exports.CALLOUT_HAS_BODY_CONTENT = exports.CALLOUT = exports.BUTTON_TEXT = exports.BUTTON_SPINNER = exports.BUTTON_GROUP = exports.BUTTON = exports.BREADCRUMBS_COLLAPSED = exports.BREADCRUMBS = exports.BREADCRUMB_CURRENT = exports.BREADCRUMB = exports.ALERT_FOOTER = exports.ALERT_CONTENTS = exports.ALERT_BODY = exports.ALERT = exports.RTL = exports.LIST_UNSTYLED = void 0;
-exports.MULTISTEP_DIALOG = exports.MENU_HEADER = exports.MENU_DIVIDER = exports.MENU_SUBMENU_ICON = exports.MENU_SUBMENU = exports.MENU_ITEM_LABEL = exports.MENU_ITEM_ICON = exports.MENU_ITEM_SELECTED_ICON = exports.MENU_ITEM_IS_SELECTABLE = exports.MENU_ITEM = exports.MENU = exports.FORM_GROUP_SUB_LABEL = exports.FORM_HELPER_TEXT = exports.FORM_CONTENT = exports.FORM_GROUP = exports.LABEL = exports.HOTKEY_DIALOG = exports.HOTKEY_COLUMN = exports.HOTKEY_LABEL = exports.HOTKEY = exports.MODIFIER_KEY = exports.KEY_COMBO = exports.KEY = exports.FILE_UPLOAD_INPUT_CUSTOM_TEXT = exports.FILE_UPLOAD_INPUT = exports.FILE_INPUT_HAS_SELECTION = exports.FILE_INPUT = exports.SWITCH_INNER_TEXT = exports.SWITCH = exports.RADIO = exports.CHECKBOX = exports.CONTROL_INDICATOR_CHILD = exports.CONTROL_INDICATOR = exports.CONTROL = exports.TEXT_AREA_AUTO_RESIZE = exports.TEXT_AREA = exports.RESIZABLE_INPUT_SPAN = exports.INPUT_ACTION = exports.INPUT_LEFT_CONTAINER = exports.INPUT_GROUP = exports.INPUT_GHOST = exports.INPUT = exports.HTML_TABLE_STRIPED = exports.HTML_TABLE_BORDERED = exports.HTML_TABLE = exports.SELECT = exports.HTML_SELECT = exports.FLEX_EXPANDER = exports.EDITABLE_TEXT_PLACEHOLDER = exports.EDITABLE_TEXT_INPUT = void 0;
-exports.POPOVER_DISMISS = exports.POPOVER_CONTENT_SIZING = exports.POPOVER_CONTENT_PLACEMENT = exports.POPOVER_CONTENT = exports.POPOVER_CAPTURING_DISMISS = exports.POPOVER_BACKDROP = exports.POPOVER_ARROW = exports.POPOVER = exports.PANEL_STACK2_VIEW = exports.PANEL_STACK2_HEADER_BACK = exports.PANEL_STACK2_HEADER = exports.PANEL_STACK2 = exports.PANEL_STACK_VIEW = exports.PANEL_STACK_HEADER_BACK = exports.PANEL_STACK_HEADER = exports.PANEL_STACK = exports.OVERLAY_END_FOCUS_TRAP = exports.OVERLAY_START_FOCUS_TRAP = exports.OVERLAY_SCROLL_CONTAINER = exports.OVERLAY_OPEN = exports.OVERLAY_INLINE = exports.OVERLAY_CONTENT = exports.OVERLAY_CONTAINER = exports.OVERLAY_BACKDROP = exports.OVERLAY = exports.OVERFLOW_LIST_SPACER = exports.OVERFLOW_LIST = exports.NUMERIC_INPUT = exports.NON_IDEAL_STATE_TEXT = exports.NON_IDEAL_STATE_VISUAL = exports.NON_IDEAL_STATE = exports.NAVBAR_DIVIDER = exports.NAVBAR_HEADING = exports.NAVBAR_GROUP = exports.NAVBAR = exports.SECTION_CARD = exports.SECTION_HEADER_RIGHT = exports.SECTION_HEADER_TABS = exports.SECTION_HEADER_DIVIDER = exports.SECTION_HEADER_SUB_TITLE = exports.SECTION_HEADER_TITLE = exports.SECTION_HEADER_LEFT = exports.SECTION_HEADER = exports.SECTION_COLLAPSED = exports.SECTION = exports.MULTISTEP_DIALOG_NAV_RIGHT = exports.MULTISTEP_DIALOG_NAV_TOP = exports.MULTISTEP_DIALOG_RIGHT_PANEL = exports.MULTISTEP_DIALOG_LEFT_PANEL = exports.MULTISTEP_DIALOG_PANELS = void 0;
-exports.TREE_NODE_CARET_NONE = exports.TREE_NODE_CARET_CLOSED = exports.TREE_NODE_CARET = exports.TREE_NODE = exports.TREE = exports.TOOLTIP_INDICATOR = exports.TOOLTIP = exports.TOAST_MESSAGE = exports.TOAST_CONTAINER = exports.TOAST = exports.TAG_INPUT_VALUES = exports.TAG_INPUT_ICON = exports.TAG_INPUT = exports.TAG_REMOVE = exports.TAG = exports.TABS = exports.TAB_PANEL = exports.TAB_LIST = exports.TAB_INDICATOR_WRAPPER = exports.TAB_INDICATOR = exports.TAB_TAG = exports.TAB_ICON = exports.TAB = exports.SPINNER_TRACK = exports.SPINNER_NO_SPIN = exports.SPINNER_HEAD = exports.SPINNER_ANIMATION = exports.SPINNER = exports.END = exports.START = exports.SLIDER_PROGRESS = exports.SLIDER_TRACK = exports.SLIDER_LABEL = exports.SLIDER_HANDLE = exports.SLIDER_AXIS = exports.SLIDER = exports.SKELETON = exports.PORTAL = exports.PROGRESS_NO_ANIMATION = exports.PROGRESS_NO_STRIPES = exports.PROGRESS_METER = exports.PROGRESS_BAR = exports.POPOVER_WRAPPER = exports.POPOVER_TRANSITION_CONTAINER = exports.POPOVER_TARGET = exports.POPOVER_REFERENCE_HIDDEN = exports.POPOVER_POPPER_ESCAPED = exports.POPOVER_OPEN = exports.POPOVER_MATCH_TARGET_WIDTH = exports.POPOVER_DISMISS_OVERRIDE = void 0;
-exports.positionClass = exports.intentClass = exports.iconClass = exports.elevationClass = exports.alignmentClass = exports.getClassNamespace = exports.ICON_LARGE = exports.ICON_STANDARD = exports.ICON = exports.TREE_ROOT = exports.TREE_NODE_SELECTED = exports.TREE_NODE_SECONDARY_LABEL = exports.TREE_NODE_LIST = exports.TREE_NODE_LABEL = exports.TREE_NODE_ICON = exports.TREE_NODE_EXPANDED = exports.TREE_NODE_CONTENT = exports.TREE_NODE_CARET_OPEN = void 0;
+exports.DRAWER_HEADER = exports.DRAWER_FOOTER = exports.DRAWER_BODY = exports.DRAWER = exports.DIVIDER = exports.DIALOG_STEP_VIEWED = exports.DIALOG_STEP_ICON = exports.DIALOG_STEP_TITLE = exports.DIALOG_STEP_CONTAINER = exports.DIALOG_STEP = exports.DIALOG_FOOTER_ACTIONS = exports.DIALOG_FOOTER_MAIN_SECTION = exports.DIALOG_FOOTER_FIXED = exports.DIALOG_FOOTER = exports.DIALOG_CLOSE_BUTTON = exports.DIALOG_BODY_SCROLL_CONTAINER = exports.DIALOG_BODY = exports.DIALOG_HEADER = exports.DIALOG_CONTAINER = exports.DIALOG = exports.CONTROL_GROUP = exports.CONTEXT_MENU_BACKDROP = exports.CONTEXT_MENU_POPOVER = exports.CONTEXT_MENU_VIRTUAL_TARGET = exports.CONTEXT_MENU = exports.COLLAPSE_BODY = exports.COLLAPSE = exports.CARD_LIST_BORDERED = exports.CARD_LIST = exports.SWITCH_CONTROL_CARD = exports.CONTROL_CARD_LABEL = exports.CONTROL_CARD = exports.CARD = exports.CALLOUT_ICON = exports.CALLOUT_HAS_BODY_CONTENT = exports.CALLOUT = exports.BUTTON_TEXT = exports.BUTTON_SPINNER = exports.BUTTON_GROUP = exports.BUTTON = exports.BREADCRUMBS_COLLAPSED = exports.BREADCRUMBS = exports.BREADCRUMB_CURRENT = exports.BREADCRUMB = exports.ALERT_FOOTER = exports.ALERT_CONTENTS = exports.ALERT_BODY = exports.ALERT = exports.RTL = exports.LIST_UNSTYLED = void 0;
+exports.MENU_SUBMENU_ICON = exports.MENU_SUBMENU = exports.MENU_ITEM_LABEL = exports.MENU_ITEM_ICON = exports.MENU_ITEM_SELECTED_ICON = exports.MENU_ITEM_IS_SELECTABLE = exports.MENU_ITEM = exports.MENU = exports.FORM_GROUP_SUB_LABEL = exports.FORM_HELPER_TEXT = exports.FORM_CONTENT = exports.FORM_GROUP = exports.LABEL = exports.HOTKEY_DIALOG = exports.HOTKEY_COLUMN = exports.HOTKEY_LABEL = exports.HOTKEY = exports.MODIFIER_KEY = exports.KEY_COMBO = exports.KEY = exports.FILE_UPLOAD_INPUT_CUSTOM_TEXT = exports.FILE_UPLOAD_INPUT = exports.FILE_INPUT_HAS_SELECTION = exports.FILE_INPUT = exports.SWITCH_INNER_TEXT = exports.SWITCH = exports.RADIO = exports.CHECKBOX = exports.CONTROL_INDICATOR_CHILD = exports.CONTROL_INDICATOR = exports.CONTROL = exports.TEXT_AREA_AUTO_RESIZE = exports.TEXT_AREA = exports.RESIZABLE_INPUT_SPAN = exports.INPUT_ACTION = exports.INPUT_LEFT_CONTAINER = exports.INPUT_GROUP = exports.INPUT_GHOST = exports.INPUT = exports.HTML_TABLE_STRIPED = exports.HTML_TABLE_BORDERED = exports.HTML_TABLE = exports.SELECT = exports.HTML_SELECT = exports.FLEX_EXPANDER = exports.EDITABLE_TEXT_PLACEHOLDER = exports.EDITABLE_TEXT_INPUT = exports.EDITABLE_TEXT_EDITING = exports.EDITABLE_TEXT_CONTENT = exports.EDITABLE_TEXT = void 0;
+exports.POPOVER_CONTENT = exports.POPOVER_CAPTURING_DISMISS = exports.POPOVER_BACKDROP = exports.POPOVER_ARROW = exports.POPOVER = exports.PANEL_STACK2_VIEW = exports.PANEL_STACK2_HEADER_BACK = exports.PANEL_STACK2_HEADER = exports.PANEL_STACK2 = exports.PANEL_STACK_VIEW = exports.PANEL_STACK_HEADER_BACK = exports.PANEL_STACK_HEADER = exports.PANEL_STACK = exports.OVERLAY_END_FOCUS_TRAP = exports.OVERLAY_START_FOCUS_TRAP = exports.OVERLAY_SCROLL_CONTAINER = exports.OVERLAY_OPEN = exports.OVERLAY_INLINE = exports.OVERLAY_CONTENT = exports.OVERLAY_CONTAINER = exports.OVERLAY_BACKDROP = exports.OVERLAY = exports.OVERFLOW_LIST_SPACER = exports.OVERFLOW_LIST = exports.NUMERIC_INPUT = exports.NON_IDEAL_STATE_TEXT = exports.NON_IDEAL_STATE_VISUAL = exports.NON_IDEAL_STATE = exports.NAVBAR_DIVIDER = exports.NAVBAR_HEADING = exports.NAVBAR_GROUP = exports.NAVBAR = exports.SECTION_CARD = exports.SECTION_HEADER_RIGHT = exports.SECTION_HEADER_TABS = exports.SECTION_HEADER_DIVIDER = exports.SECTION_HEADER_SUB_TITLE = exports.SECTION_HEADER_TITLE = exports.SECTION_HEADER_LEFT = exports.SECTION_HEADER = exports.SECTION_COLLAPSED = exports.SECTION = exports.MULTISTEP_DIALOG_NAV_RIGHT = exports.MULTISTEP_DIALOG_NAV_TOP = exports.MULTISTEP_DIALOG_RIGHT_PANEL = exports.MULTISTEP_DIALOG_LEFT_PANEL = exports.MULTISTEP_DIALOG_PANELS = exports.MULTISTEP_DIALOG = exports.MENU_HEADER = exports.MENU_DIVIDER = void 0;
+exports.TREE_NODE = exports.TREE = exports.TOOLTIP_INDICATOR = exports.TOOLTIP = exports.TOAST_MESSAGE = exports.TOAST_CONTAINER = exports.TOAST = exports.TAG_INPUT_VALUES = exports.TAG_INPUT_ICON = exports.TAG_INPUT = exports.TAG_REMOVE = exports.TAG = exports.TABS = exports.TAB_PANEL = exports.TAB_LIST = exports.TAB_INDICATOR_WRAPPER = exports.TAB_INDICATOR = exports.TAB_TAG = exports.TAB_ICON = exports.TAB = exports.SPINNER_TRACK = exports.SPINNER_NO_SPIN = exports.SPINNER_HEAD = exports.SPINNER_ANIMATION = exports.SPINNER = exports.END = exports.START = exports.SLIDER_PROGRESS = exports.SLIDER_TRACK = exports.SLIDER_LABEL = exports.SLIDER_HANDLE = exports.SLIDER_AXIS = exports.SLIDER = exports.SKELETON = exports.PORTAL = exports.PROGRESS_NO_ANIMATION = exports.PROGRESS_NO_STRIPES = exports.PROGRESS_METER = exports.PROGRESS_BAR = exports.POPOVER_WRAPPER = exports.POPOVER_TRANSITION_CONTAINER = exports.POPOVER_TARGET = exports.POPOVER_REFERENCE_HIDDEN = exports.POPOVER_POPPER_ESCAPED = exports.POPOVER_OPEN = exports.POPOVER_MATCH_TARGET_WIDTH = exports.POPOVER_DISMISS_OVERRIDE = exports.POPOVER_DISMISS = exports.POPOVER_CONTENT_SIZING = exports.POPOVER_CONTENT_PLACEMENT = void 0;
+exports.positionClass = exports.intentClass = exports.iconClass = exports.elevationClass = exports.alignmentClass = exports.getClassNamespace = exports.ICON_LARGE = exports.ICON_STANDARD = exports.ICON = exports.TREE_ROOT = exports.TREE_NODE_SELECTED = exports.TREE_NODE_SECONDARY_LABEL = exports.TREE_NODE_LIST = exports.TREE_NODE_LABEL = exports.TREE_NODE_ICON = exports.TREE_NODE_EXPANDED = exports.TREE_NODE_CONTENT = exports.TREE_NODE_CARET_OPEN = exports.TREE_NODE_CARET_NONE = exports.TREE_NODE_CARET_CLOSED = exports.TREE_NODE_CARET = void 0;
 var alignment_1 = require("./alignment");
@@ -108,2 +108,5 @@ var elevation_1 = require("./elevation");
 exports.CARD = "".concat(NS, "-card");
+exports.CONTROL_CARD = "".concat(NS, "-control-card");
+exports.CONTROL_CARD_LABEL = "".concat(exports.CONTROL_CARD, "-label");
+exports.SWITCH_CONTROL_CARD = "".concat(NS, "-switch-control-card");
 exports.CARD_LIST = "".concat(NS, "-card-list");
@@ -110,0 +113,0 @@ exports.CARD_LIST_BORDERED = "".concat(exports.CARD_LIST, "-bordered");

lib/cjs/components/card-list/cardList.d.ts

@@ -18,2 +18,5 @@ import * as React from "react";
      *
+     * Note that this prop affects styling for all Cards within this CardList and you do not need to set the
+     * `compact` prop individually on those child Cards.
+     *
      * @default false
@@ -20,0 +23,0 @@ */

lib/cjs/components/card-list/cardList.js

@@ -34,2 +34,3 @@ "use strict";
 exports.CardList.defaultProps = {
+    bordered: true,
     compact: false,
@@ -36,0 +37,0 @@ };

lib/cjs/components/card/card.d.ts

@@ -24,2 +24,8 @@ import * as React from "react";
     /**
+     * Whether this component should use compact styles with reduced visual padding.
+     *
+     * @default false
+     */
+    compact?: boolean;
+    /**
      * Callback invoked when the card is clicked.
@@ -26,0 +32,0 @@ * Recommended when `interactive` is `true`.

lib/cjs/components/card/card.js

@@ -31,4 +31,4 @@ "use strict";
     var _a;
-    var className = props.className, elevation = props.elevation, interactive = props.interactive, htmlProps = tslib_1.__rest(props, ["className", "elevation", "interactive"]);
-    var classes = (0, classnames_1.default)(common_1.Classes.CARD, (_a = {}, _a[common_1.Classes.INTERACTIVE] = interactive, _a), common_1.Classes.elevationClass(elevation), className);
+    var className = props.className, elevation = props.elevation, interactive = props.interactive, compact = props.compact, htmlProps = tslib_1.__rest(props, ["className", "elevation", "interactive", "compact"]);
+    var classes = (0, classnames_1.default)(common_1.Classes.CARD, (_a = {}, _a[common_1.Classes.INTERACTIVE] = interactive, _a[common_1.Classes.COMPACT] = compact, _a), common_1.Classes.elevationClass(elevation), className);
     return React.createElement("div", tslib_1.__assign({ className: classes, ref: ref }, htmlProps));
@@ -35,0 +35,0 @@ });

lib/cjs/components/forms/controls.js

@@ -26,5 +26,5 @@ "use strict";
  * Renders common control elements, with additional props to customize appearance.
- * This function is not exported and is only used within this module for `Checkbox`, `Radio`, and `Switch` below.
+ * This component is not exported and is only used within this module for `Checkbox`, `Radio`, and `Switch` below.
  */
-function renderControl(props, ref) {
+var ControlInternal = React.forwardRef(function (props, ref) {
     var _a;
@@ -38,3 +38,4 @@ var alignIndicator = props.alignIndicator, children = props.children, className = props.className, indicatorChildren = props.indicatorChildren, inline = props.inline, inputRef = props.inputRef, label = props.label, labelElement = props.labelElement, large = props.large, style = props.style, type = props.type, typeClassName = props.typeClassName, _b = props.tagName, tagName = _b === void 0 ? "label" : _b, htmlProps = tslib_1.__rest(props, ["alignIndicator", "children", "className", "indicatorChildren", "inline", "inputRef", "label", "labelElement", "large", "style", "type", "typeClassName", "tagName"]);
     return React.createElement(tagName, { className: classes, style: style, ref: ref }, React.createElement("input", tslib_1.__assign({}, htmlProps, { ref: inputRef, type: type })), React.createElement("span", { className: common_1.Classes.CONTROL_INDICATOR }, indicatorChildren), label, labelElement, children);
-}
+});
+ControlInternal.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Control");
 /**
@@ -55,3 +56,3 @@ * Switch component.
         : null;
-    return renderControl(tslib_1.__assign(tslib_1.__assign({}, controlProps), { indicatorChildren: switchLabels, type: "checkbox", typeClassName: common_1.Classes.SWITCH }), ref);
+    return (React.createElement(ControlInternal, tslib_1.__assign({}, controlProps, { indicatorChildren: switchLabels, ref: ref, type: "checkbox", typeClassName: common_1.Classes.SWITCH })));
 });
@@ -64,5 +65,3 @@ exports.Switch.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Switch");
  */
-exports.Radio = React.forwardRef(function (props, ref) {
-    return renderControl(tslib_1.__assign(tslib_1.__assign({}, props), { type: "radio", typeClassName: common_1.Classes.RADIO }), ref);
-});
+exports.Radio = React.forwardRef(function (props, ref) { return (React.createElement(ControlInternal, tslib_1.__assign({}, props, { ref: ref, type: "radio", typeClassName: common_1.Classes.RADIO }))); });
 exports.Radio.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Radio");
@@ -97,5 +96,5 @@ /**
     }, [localInputRef, isIndeterminate]);
-    return renderControl(tslib_1.__assign(tslib_1.__assign({}, controlProps), { inputRef: inputRef, onChange: handleChange, type: "checkbox", typeClassName: common_1.Classes.CHECKBOX }), ref);
+    return (React.createElement(ControlInternal, tslib_1.__assign({}, controlProps, { inputRef: inputRef, onChange: handleChange, ref: ref, type: "checkbox", typeClassName: common_1.Classes.CHECKBOX })));
 });
 exports.Checkbox.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Checkbox");
 //# sourceMappingURL=controls.js.map

lib/cjs/components/index.d.ts

@@ -64,2 +64,3 @@ export { Alert, AlertProps } from "./alert/alert";
 export { Spinner, SpinnerProps, SpinnerSize } from "./spinner/spinner";
+export { SwitchCard, SwitchCardProps } from "./control-card/switchCard";
 export { Tab, TabId, TabProps } from "./tabs/tab";
@@ -66,0 +67,0 @@ export { Tabs, TabsProps, TabsExpander, Expander } from "./tabs/tabs";

lib/cjs/components/index.js

@@ -19,3 +19,3 @@ "use strict";
 exports.Menu = exports.IconSize = exports.Icon = exports.HTMLTable = exports.HTMLSelect = exports.UL = exports.Pre = exports.OL = exports.Label = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Code = exports.Blockquote = exports.TextArea = exports.RadioGroup = exports.NumericInput = exports.InputGroup = exports.FormGroup = exports.FileInput = exports.Switch = exports.Radio = exports.Checkbox = exports.ControlGroup = exports.EditableText = exports.DrawerSize = exports.Drawer = exports.Divider = exports.MultistepDialog = exports.DialogStep = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.hideContextMenu = exports.showContextMenu = exports.ContextMenuPopover = exports.ContextMenu = exports.Collapse = exports.CardList = exports.Card = exports.Callout = exports.ButtonGroup = exports.Button = exports.AnchorButton = exports.Breadcrumbs = exports.Breadcrumb = exports.Alert = void 0;
-exports.TreeNode = exports.Tree = exports.Tooltip = exports.Toaster = exports.Toast = exports.OverlayToaster = exports.TagInput = exports.Tag = exports.Expander = exports.TabsExpander = exports.Tabs = exports.Tab = exports.SpinnerSize = exports.Spinner = exports.Slider = exports.SectionCard = exports.Section = exports.RangeSlider = exports.MultiSlider = exports.HandleType = exports.HandleInteractionKind = exports.ResizeSensor = exports.ProgressBar = exports.Portal = exports.PopupKind = exports.PopperPlacements = exports.PopoverPosition = exports.PopoverInteractionKind = exports.Popover = exports.PanelStack2 = exports.PanelStack = exports.Text = exports.Overlay = exports.OverflowList = exports.NonIdealStateIconSize = exports.NonIdealState = exports.NavbarHeading = exports.NavbarGroup = exports.NavbarDivider = exports.Navbar = exports.MenuItem = exports.MenuDivider = void 0;
+exports.TreeNode = exports.Tree = exports.Tooltip = exports.Toaster = exports.Toast = exports.OverlayToaster = exports.TagInput = exports.Tag = exports.Expander = exports.TabsExpander = exports.Tabs = exports.Tab = exports.SwitchCard = exports.SpinnerSize = exports.Spinner = exports.Slider = exports.SectionCard = exports.Section = exports.RangeSlider = exports.MultiSlider = exports.HandleType = exports.HandleInteractionKind = exports.ResizeSensor = exports.ProgressBar = exports.Portal = exports.PopupKind = exports.PopperPlacements = exports.PopoverPosition = exports.PopoverInteractionKind = exports.Popover = exports.PanelStack2 = exports.PanelStack = exports.Text = exports.Overlay = exports.OverflowList = exports.NonIdealStateIconSize = exports.NonIdealState = exports.NavbarHeading = exports.NavbarGroup = exports.NavbarDivider = exports.Navbar = exports.MenuItem = exports.MenuDivider = void 0;
 var tslib_1 = require("tslib");
@@ -162,2 +162,4 @@ var alert_1 = require("./alert/alert");
 Object.defineProperty(exports, "SpinnerSize", { enumerable: true, get: function () { return spinner_1.SpinnerSize; } });
+var switchCard_1 = require("./control-card/switchCard");
+Object.defineProperty(exports, "SwitchCard", { enumerable: true, get: function () { return switchCard_1.SwitchCard; } });
 var tab_1 = require("./tabs/tab");
@@ -164,0 +166,0 @@ Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return tab_1.Tab; } });

lib/esm/common/classes.d.ts

@@ -73,2 +73,5 @@ import { Alignment } from "./alignment";
 export declare const CARD: string;
+export declare const CONTROL_CARD: string;
+export declare const CONTROL_CARD_LABEL: string;
+export declare const SWITCH_CONTROL_CARD: string;
 export declare const CARD_LIST: string;
@@ -75,0 +78,0 @@ export declare const CARD_LIST_BORDERED: string;

lib/esm/common/classes.js

@@ -99,2 +99,5 @@ /*
 export var CARD = "".concat(NS, "-card");
+export var CONTROL_CARD = "".concat(NS, "-control-card");
+export var CONTROL_CARD_LABEL = "".concat(CONTROL_CARD, "-label");
+export var SWITCH_CONTROL_CARD = "".concat(NS, "-switch-control-card");
 export var CARD_LIST = "".concat(NS, "-card-list");
@@ -101,0 +104,0 @@ export var CARD_LIST_BORDERED = "".concat(CARD_LIST, "-bordered");

lib/esm/components/card-list/cardList.d.ts

@@ -18,2 +18,5 @@ import * as React from "react";
      *
+     * Note that this prop affects styling for all Cards within this CardList and you do not need to set the
+     * `compact` prop individually on those child Cards.
+     *
      * @default false
@@ -20,0 +23,0 @@ */

lib/esm/components/card-list/cardList.js

@@ -31,2 +31,3 @@ /*
 CardList.defaultProps = {
+    bordered: true,
     compact: false,
@@ -33,0 +34,0 @@ };

lib/esm/components/card/card.d.ts

@@ -24,2 +24,8 @@ import * as React from "react";
     /**
+     * Whether this component should use compact styles with reduced visual padding.
+     *
+     * @default false
+     */
+    compact?: boolean;
+    /**
      * Callback invoked when the card is clicked.
@@ -26,0 +32,0 @@ * Recommended when `interactive` is `true`.

lib/esm/components/card/card.js

@@ -28,4 +28,4 @@ /*
     var _a;
-    var className = props.className, elevation = props.elevation, interactive = props.interactive, htmlProps = __rest(props, ["className", "elevation", "interactive"]);
-    var classes = classNames(Classes.CARD, (_a = {}, _a[Classes.INTERACTIVE] = interactive, _a), Classes.elevationClass(elevation), className);
+    var className = props.className, elevation = props.elevation, interactive = props.interactive, compact = props.compact, htmlProps = __rest(props, ["className", "elevation", "interactive", "compact"]);
+    var classes = classNames(Classes.CARD, (_a = {}, _a[Classes.INTERACTIVE] = interactive, _a[Classes.COMPACT] = compact, _a), Classes.elevationClass(elevation), className);
     return React.createElement("div", __assign({ className: classes, ref: ref }, htmlProps));
@@ -32,0 +32,0 @@ });

lib/esm/components/forms/controls.js

@@ -23,5 +23,5 @@ /*
  * Renders common control elements, with additional props to customize appearance.
- * This function is not exported and is only used within this module for `Checkbox`, `Radio`, and `Switch` below.
+ * This component is not exported and is only used within this module for `Checkbox`, `Radio`, and `Switch` below.
  */
-function renderControl(props, ref) {
+var ControlInternal = React.forwardRef(function (props, ref) {
     var _a;
@@ -35,3 +35,4 @@ var alignIndicator = props.alignIndicator, children = props.children, className = props.className, indicatorChildren = props.indicatorChildren, inline = props.inline, inputRef = props.inputRef, label = props.label, labelElement = props.labelElement, large = props.large, style = props.style, type = props.type, typeClassName = props.typeClassName, _b = props.tagName, tagName = _b === void 0 ? "label" : _b, htmlProps = __rest(props, ["alignIndicator", "children", "className", "indicatorChildren", "inline", "inputRef", "label", "labelElement", "large", "style", "type", "typeClassName", "tagName"]);
     return React.createElement(tagName, { className: classes, style: style, ref: ref }, React.createElement("input", __assign({}, htmlProps, { ref: inputRef, type: type })), React.createElement("span", { className: Classes.CONTROL_INDICATOR }, indicatorChildren), label, labelElement, children);
-}
+});
+ControlInternal.displayName = "".concat(DISPLAYNAME_PREFIX, ".Control");
 /**
@@ -52,3 +53,3 @@ * Switch component.
         : null;
-    return renderControl(__assign(__assign({}, controlProps), { indicatorChildren: switchLabels, type: "checkbox", typeClassName: Classes.SWITCH }), ref);
+    return (React.createElement(ControlInternal, __assign({}, controlProps, { indicatorChildren: switchLabels, ref: ref, type: "checkbox", typeClassName: Classes.SWITCH })));
 });
@@ -61,5 +62,3 @@ Switch.displayName = "".concat(DISPLAYNAME_PREFIX, ".Switch");
  */
-export var Radio = React.forwardRef(function (props, ref) {
-    return renderControl(__assign(__assign({}, props), { type: "radio", typeClassName: Classes.RADIO }), ref);
-});
+export var Radio = React.forwardRef(function (props, ref) { return (React.createElement(ControlInternal, __assign({}, props, { ref: ref, type: "radio", typeClassName: Classes.RADIO }))); });
 Radio.displayName = "".concat(DISPLAYNAME_PREFIX, ".Radio");
@@ -94,5 +93,5 @@ /**
     }, [localInputRef, isIndeterminate]);
-    return renderControl(__assign(__assign({}, controlProps), { inputRef: inputRef, onChange: handleChange, type: "checkbox", typeClassName: Classes.CHECKBOX }), ref);
+    return (React.createElement(ControlInternal, __assign({}, controlProps, { inputRef: inputRef, onChange: handleChange, ref: ref, type: "checkbox", typeClassName: Classes.CHECKBOX })));
 });
 Checkbox.displayName = "".concat(DISPLAYNAME_PREFIX, ".Checkbox");
 //# sourceMappingURL=controls.js.map

lib/esm/components/index.d.ts

@@ -64,2 +64,3 @@ export { Alert, AlertProps } from "./alert/alert";
 export { Spinner, SpinnerProps, SpinnerSize } from "./spinner/spinner";
+export { SwitchCard, SwitchCardProps } from "./control-card/switchCard";
 export { Tab, TabId, TabProps } from "./tabs/tab";
@@ -66,0 +67,0 @@ export { Tabs, TabsProps, TabsExpander, Expander } from "./tabs/tabs";

lib/esm/components/index.js

@@ -76,2 +76,3 @@ /*
 export { Spinner, SpinnerSize } from "./spinner/spinner";
+export { SwitchCard } from "./control-card/switchCard";
 export { Tab } from "./tabs/tab";
@@ -78,0 +79,0 @@ // eslint-disable-next-line deprecation/deprecation

lib/esnext/common/classes.d.ts

@@ -73,2 +73,5 @@ import { Alignment } from "./alignment";
 export declare const CARD: string;
+export declare const CONTROL_CARD: string;
+export declare const CONTROL_CARD_LABEL: string;
+export declare const SWITCH_CONTROL_CARD: string;
 export declare const CARD_LIST: string;
@@ -75,0 +78,0 @@ export declare const CARD_LIST_BORDERED: string;

lib/esnext/common/classes.js

@@ -99,2 +99,5 @@ /*
 export const CARD = `${NS}-card`;
+export const CONTROL_CARD = `${NS}-control-card`;
+export const CONTROL_CARD_LABEL = `${CONTROL_CARD}-label`;
+export const SWITCH_CONTROL_CARD = `${NS}-switch-control-card`;
 export const CARD_LIST = `${NS}-card-list`;
@@ -101,0 +104,0 @@ export const CARD_LIST_BORDERED = `${CARD_LIST}-bordered`;

lib/esnext/components/card-list/cardList.d.ts

@@ -18,2 +18,5 @@ import * as React from "react";
      *
+     * Note that this prop affects styling for all Cards within this CardList and you do not need to set the
+     * `compact` prop individually on those child Cards.
+     *
      * @default false
@@ -20,0 +23,0 @@ */

lib/esnext/components/card-list/cardList.js

@@ -29,2 +29,3 @@ /*
 CardList.defaultProps = {
+    bordered: true,
     compact: false,
@@ -31,0 +32,0 @@ };

lib/esnext/components/card/card.d.ts

@@ -24,2 +24,8 @@ import * as React from "react";
     /**
+     * Whether this component should use compact styles with reduced visual padding.
+     *
+     * @default false
+     */
+    compact?: boolean;
+    /**
      * Callback invoked when the card is clicked.
@@ -26,0 +32,0 @@ * Recommended when `interactive` is `true`.

lib/esnext/components/card/card.js

@@ -26,4 +26,4 @@ /*
 export const Card = React.forwardRef((props, ref) => {
-    const { className, elevation, interactive, ...htmlProps } = props;
-    const classes = classNames(Classes.CARD, { [Classes.INTERACTIVE]: interactive }, Classes.elevationClass(elevation), className);
+    const { className, elevation, interactive, compact, ...htmlProps } = props;
+    const classes = classNames(Classes.CARD, { [Classes.INTERACTIVE]: interactive, [Classes.COMPACT]: compact }, Classes.elevationClass(elevation), className);
     return React.createElement("div", { className: classes, ref: ref, ...htmlProps });
@@ -30,0 +30,0 @@ });

lib/esnext/components/forms/controls.js

@@ -22,5 +22,5 @@ /*
  * Renders common control elements, with additional props to customize appearance.
- * This function is not exported and is only used within this module for `Checkbox`, `Radio`, and `Switch` below.
+ * This component is not exported and is only used within this module for `Checkbox`, `Radio`, and `Switch` below.
  */
-function renderControl(props, ref) {
+const ControlInternal = React.forwardRef((props, ref) => {
     const { alignIndicator, children, className, indicatorChildren, inline, inputRef, label, labelElement, large, style, type, typeClassName, tagName = "label", ...htmlProps } = props;
@@ -33,3 +33,4 @@ const classes = classNames(Classes.CONTROL, typeClassName, {
     return React.createElement(tagName, { className: classes, style, ref }, React.createElement("input", { ...htmlProps, ref: inputRef, type: type }), React.createElement("span", { className: Classes.CONTROL_INDICATOR }, indicatorChildren), label, labelElement, children);
-}
+});
+ControlInternal.displayName = `${DISPLAYNAME_PREFIX}.Control`;
 /**
@@ -49,8 +50,3 @@ * Switch component.
         : null;
-    return renderControl({
-        ...controlProps,
-        indicatorChildren: switchLabels,
-        type: "checkbox",
-        typeClassName: Classes.SWITCH,
-    }, ref);
+    return (React.createElement(ControlInternal, { ...controlProps, indicatorChildren: switchLabels, ref: ref, type: "checkbox", typeClassName: Classes.SWITCH }));
 });
@@ -63,7 +59,3 @@ Switch.displayName = `${DISPLAYNAME_PREFIX}.Switch`;
  */
-export const Radio = React.forwardRef((props, ref) => renderControl({
-    ...props,
-    type: "radio",
-    typeClassName: Classes.RADIO,
-}, ref));
+export const Radio = React.forwardRef((props, ref) => (React.createElement(ControlInternal, { ...props, ref: ref, type: "radio", typeClassName: Classes.RADIO })));
 Radio.displayName = `${DISPLAYNAME_PREFIX}.Radio`;
@@ -98,11 +90,5 @@ /**
     }, [localInputRef, isIndeterminate]);
-    return renderControl({
-        ...controlProps,
-        inputRef,
-        onChange: handleChange,
-        type: "checkbox",
-        typeClassName: Classes.CHECKBOX,
-    }, ref);
+    return (React.createElement(ControlInternal, { ...controlProps, inputRef: inputRef, onChange: handleChange, ref: ref, type: "checkbox", typeClassName: Classes.CHECKBOX }));
 });
 Checkbox.displayName = `${DISPLAYNAME_PREFIX}.Checkbox`;
 //# sourceMappingURL=controls.js.map

lib/esnext/components/index.d.ts

@@ -64,2 +64,3 @@ export { Alert, AlertProps } from "./alert/alert";
 export { Spinner, SpinnerProps, SpinnerSize } from "./spinner/spinner";
+export { SwitchCard, SwitchCardProps } from "./control-card/switchCard";
 export { Tab, TabId, TabProps } from "./tabs/tab";
@@ -66,0 +67,0 @@ export { Tabs, TabsProps, TabsExpander, Expander } from "./tabs/tabs";

lib/esnext/components/index.js

@@ -76,2 +76,3 @@ /*
 export { Spinner, SpinnerSize } from "./spinner/spinner";
+export { SwitchCard } from "./control-card/switchCard";
 export { Tab } from "./tabs/tab";
@@ -78,0 +79,0 @@ // eslint-disable-next-line deprecation/deprecation

package.json

 {
     "name": "@blueprintjs/core",
-    "version": "5.3.3",
+    "version": "5.4.0",
     "description": "Core styles & components",
@@ -52,4 +52,4 @@ "main": "lib/cjs/index.js",
     "dependencies": {
-        "@blueprintjs/colors": "^5.0.2",
-        "@blueprintjs/icons": "^5.1.8",
+        "@blueprintjs/colors": "^5.0.3",
+        "@blueprintjs/icons": "^5.2.0",
         "@popperjs/core": "^2.11.7",
@@ -73,5 +73,5 @@ "classnames": "^2.3.1",
     "devDependencies": {
-        "@blueprintjs/karma-build-scripts": "^5.0.2",
-        "@blueprintjs/node-build-scripts": "^8.0.2",
-        "@blueprintjs/test-commons": "^2.1.0",
+        "@blueprintjs/karma-build-scripts": "^5.0.3",
+        "@blueprintjs/node-build-scripts": "^8.0.3",
+        "@blueprintjs/test-commons": "^2.1.1",
         "@testing-library/react": "^12.1.5",
@@ -78,0 +78,0 @@ "enzyme": "^3.11.0",

src/common/classes.ts

@@ -116,2 +116,5 @@ /*
 export const CARD = `${NS}-card`;
+export const CONTROL_CARD = `${NS}-control-card`;
+export const CONTROL_CARD_LABEL = `${CONTROL_CARD}-label`;
+export const SWITCH_CONTROL_CARD = `${NS}-switch-control-card`;
 
@@ -118,0 +121,0 @@ export const CARD_LIST = `${NS}-card-list`;

src/common/interactionMode.ts

@@ -27,3 +27,6 @@ /*
 
-    constructor(private container: HTMLElement, private className: string) {}
+    constructor(
+        private container: HTMLElement,
+        private className: string,
+    ) {}
 
@@ -30,0 +33,0 @@ /** Returns whether the engine is currently running. */

src/components/card/card.md

 @# Card
 
-A __Card__ is a bounded unit of UI content with a solid background color.
+A **Card** is a bounded unit of UI content with a solid background color.
 
@@ -13,6 +13,8 @@ @reactExample CardExample
 <Card interactive={true} elevation={Elevation.TWO}>
-    <h5><a href="#">Card heading</a></h5>
+    <h5>
+        <a href="#">Card heading</a>
+    </h5>
     <p>Card content</p>
     <Button>Submit</Button>
-</Card>
+</Card>;
 ```
@@ -37,2 +39,3 @@
 Deprecated API: use [`<Card>`](#core/components/card)
+
 </h5>
@@ -39,0 +42,0 @@

src/components/components.md

@@ -11,2 +11,3 @@ @# Components
 @page card-list
+@page control-card
 @page collapse
@@ -13,0 +14,0 @@ @page divider

src/components/forms/numeric-input.md

 @# Numeric input
 
-__NumericInput__ provides controls for easily inputting, incrementing, and decrementing numeric values.
+**NumericInput** provides controls for inputting, incrementing, and decrementing numeric values.
 
 @## Interactions
 
-Values in numeric inputs can be incremented or decremented using both keyboard and mouse interactions.
+The value in a numeric input can be incremented or decremented using both keyboard and mouse interactions.
 
@@ -23,4 +23,4 @@ ##### Keyboard interactions
 
-This example shows how __NumericInput__ works out of the box. It supports the basic keyboard and mouse interactions listed
-above, as well as basic keyboard entry:
+This example shows how **NumericInput** works out of the box. It supports the basic keyboard and mouse interactions
+listed above, as well as basic keyboard entry.
 
@@ -31,4 +31,4 @@ @reactExample NumericInputBasicExample
 
-This example shows how __NumericInput__ can be extended beyond its core functionality. It supports the basic interactions
-above as well as each of the following types of input:
+This example shows how **NumericInput** can be extended beyond its core functionality. It supports the basic
+interactions above as well as each of the following types of input:
 
@@ -45,3 +45,3 @@ -   **Number abbreviations** (e.g. `2.1k`, `-0.3m`)
 
-This example contains non-core functionality that is meant to demonstrate the extensibility of the __NumericInput__
+This example contains non-core functionality that is meant to demonstrate the extensibility of the **NumericInput**
 component. The correctness of the custom evaluation code has not been tested robustly.
@@ -53,12 +53,4 @@
 
-@## Props interface
+@## Usage
 
-@interface NumericInputProps
-
-@### Responsive numeric inputs
-
-__NumericInput__ can be styled with the same set of visual modifier props & CSS classes as
-[__ControlGroup__](#core/components/control-group). The most appropriate such modifier for __NumericInput__ is `fill`,
-which will make the component expand to fill all available width.
-
 @### Uncontrolled mode
@@ -94,3 +86,3 @@
 Note that NumericInput supports arbitrary text entry (not only numeric digits) so the `value`
-__should always be provided as a string, not a number__. Accordingly, change event handlers should use the same data
+**should always be provided as a string, not a number**. Accordingly, change event handlers should use the same data
 type, namely the _second_ parameter of the `onValueChange` callback. This behavior allows users to type non-numeric
@@ -147,3 +139,3 @@ characters like decimal points (".") without the component eagerly coercing those strings to their parsed numeric
 
-__NumericInput__ determines its maximum precision by looking at both the `minorStepSize` and `stepSize` props.
+**NumericInput** determines its maximum precision by looking at both the `minorStepSize` and `stepSize` props.
 If `minorStepSize` is non-null, the number of decimal places in that value will be the maximum precision.
@@ -155,1 +147,11 @@ Otherwise, the component will count the decimal places in `stepSize`.
 precedence.
+
+@## Styling
+
+**NumericInput** can be styled with the same set of visual modifier props & CSS classes as
+[**ControlGroup**](#core/components/control-group). The most appropriate such modifier for **NumericInput** is `fill`,
+which will make the component expand to fill all available width.
+
+@## Props interface
+
+@interface NumericInputProps

src/components/index.ts

@@ -105,2 +105,3 @@ /*
 export { Spinner, SpinnerProps, SpinnerSize } from "./spinner/spinner";
+export { SwitchCard, SwitchCardProps } from "./control-card/switchCard";
 export { Tab, TabId, TabProps } from "./tabs/tab";
@@ -107,0 +108,0 @@ // eslint-disable-next-line deprecation/deprecation

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5795574

increased by0.65%

Number of package files

1580

increased by1.48%

Lines of code

83916

increased by0.63%

Dependency changes

• Updated@blueprintjs/colors@^5.0.3

• Updated@blueprintjs/icons@^5.2.0