@blueprintjs/core - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

dist/common/classes.d.ts

@@ -18,2 +18,3 @@ import { Intent } from "./intent";
 export declare const ROUND = "pt-round";
+export declare const TEXT_OVERFLOW_ELLIPSIS = "pt-text-overflow-ellipsis";
 export declare const ALERT = "pt-alert";
@@ -139,2 +140,3 @@ export declare const ALERT_BODY = "pt-alert-body";
 export declare const TREE_ROOT = "pt-tree-root";
+export declare const ICON = "pt-icon";
 export declare const ICON_STANDARD = "pt-icon-standard";
@@ -141,0 +143,0 @@ export declare const ICON_LARGE = "pt-icon-large";

dist/common/classes.js

@@ -26,2 +26,4 @@ /*
 exports.ROUND = "pt-round";
+// text utilities
+exports.TEXT_OVERFLOW_ELLIPSIS = "pt-text-overflow-ellipsis";
 // components
@@ -148,2 +150,3 @@ exports.ALERT = "pt-alert";
 exports.TREE_ROOT = "pt-tree-root";
+exports.ICON = "pt-icon";
 exports.ICON_STANDARD = "pt-icon-standard";
@@ -150,0 +153,0 @@ exports.ICON_LARGE = "pt-icon-large";

dist/components/button/abstractButton.d.ts

@@ -15,2 +15,8 @@ import * as React from "react";
     /**
+     * If set to `true`, the button will display in an active state.
+     * This is equivalent to setting `pt-active` via className.
+     * @default false
+     */
+    active?: boolean;
+    /**
      * HTML `type` attribute of button. Common values are `"button"` and `"submit"`.
@@ -17,0 +23,0 @@ * Note that this prop has no effect on `AnchorButton`; it only affects `Button`.

dist/components/button/abstractButton.js

@@ -56,3 +56,3 @@ /*
         var className = classNames(Classes.BUTTON, (_a = {},
-            _a[Classes.ACTIVE] = this.state.isActive,
+            _a[Classes.ACTIVE] = this.state.isActive || this.props.active,
             _a[Classes.DISABLED] = disabled,
@@ -59,0 +59,0 @@ _a[Classes.LOADING] = this.props.loading,

dist/components/editable-text/editableText.js

@@ -36,4 +36,7 @@ /*
         _this.cancelEditing = function () {
-            var lastValue = _this.state.lastValue;
+            var _a = _this.state, lastValue = _a.lastValue, value = _a.value;
             _this.setState({ isEditing: false, value: lastValue });
+            if (value !== lastValue) {
+                utils_1.safeInvoke(_this.props.onChange, lastValue);
+            }
             utils_1.safeInvoke(_this.props.onCancel, lastValue);
@@ -40,0 +43,0 @@ };

dist/components/forms/numericInput.d.ts

@@ -5,2 +5,8 @@ import * as React from "react";
     /**
+     * Whether to allow only floating-point number characters in the field,
+     * mimicking the native `input[type="number"]`.
+     * @default true
+     */
+    allowNumericCharactersOnly?: boolean;
+    /**
      * The position of the buttons with respect to the input field.
@@ -37,2 +43,12 @@ * @default Position.RIGHT
     /**
+     * Whether the entire text field should be selected on focus.
+     * @default false
+     */
+    selectAllOnFocus?: boolean;
+    /**
+     * Whether the entire text field should be selected on increment.
+     * @default false
+     */
+    selectAllOnIncrement?: boolean;
+    /**
      * The increment between successive values when no modifier keys are held.
@@ -62,2 +78,15 @@ * @default 1
     private static VALUE_ZERO;
+    /**
+     * A regex that matches a string of length 1 (i.e. a standalone character)
+     * if and only if it is a floating-point number character as defined by W3C:
+     * https://www.w3.org/TR/2012/WD-html-markup-20120329/datatypes.html#common.data.float
+     *
+     * Floating-point number characters are the only characters that can be
+     * printed within a default input[type="number"]. This component should
+     * behave the same way when this.props.allowNumericCharactersOnly = true.
+     * See here for the input[type="number"].value spec:
+     * https://www.w3.org/TR/2012/WD-html-markup-20120329/input.number.html#input.number.attrs.value
+     */
+    private static FLOATING_POINT_NUMBER_CHARACTER_REGEX;
+    private didPasteEventJustOccur;
     private inputElement;
@@ -79,2 +108,4 @@ constructor(props?: HTMLInputProps & INumericInputProps, context?: any);
     private handleInputKeyDown;
+    private handleInputKeyPress;
+    private handleInputPaste;
     private handleInputChange;
@@ -87,2 +118,4 @@ private invokeOnChangeCallbacks(value);
     private isValueNumeric(value);
+    private isKeyboardEventDisabledForBasicNumericEntry(e);
+    private isFloatingPointNumericCharacter(char);
 }
@@ -89,0 +122,0 @@ export declare const NumericInputFactory: React.ComponentFactory<React.HTMLProps<HTMLInputElement> & INumericInputProps & {

dist/components/forms/numericInput.js

@@ -63,7 +63,9 @@ /*
         _this.handleInputFocus = function (e) {
-            _this.setState({ isInputGroupFocused: true });
+            _this.setState({ isInputGroupFocused: true, shouldSelectAfterUpdate: _this.props.selectAllOnFocus });
             common_1.Utils.safeInvoke(_this.props.onFocus, e);
         };
         _this.handleInputBlur = function (e) {
-            _this.setState({ isInputGroupFocused: false });
+            // explicitly set `shouldSelectAfterUpdate` to `false` to prevent focus
+            // hoarding on IE11 (#704)
+            _this.setState({ isInputGroupFocused: false, shouldSelectAfterUpdate: false });
             common_1.Utils.safeInvoke(_this.props.onBlur, e);
@@ -95,4 +97,27 @@ };
         };
+        _this.handleInputKeyPress = function (e) {
+            // we prohibit keystrokes in onKeyPress instead of onKeyDown, because
+            // e.key is not trustworthy in onKeyDown in all browsers.
+            if (_this.props.allowNumericCharactersOnly && _this.isKeyboardEventDisabledForBasicNumericEntry(e)) {
+                e.preventDefault();
+            }
+            common_1.Utils.safeInvoke(_this.props.onKeyPress, e);
+        };
+        _this.handleInputPaste = function (e) {
+            _this.didPasteEventJustOccur = true;
+            common_1.Utils.safeInvoke(_this.props.onPaste, e);
+        };
         _this.handleInputChange = function (e) {
-            var nextValue = e.target.value;
+            var value = e.target.value;
+            var nextValue;
+            if (_this.props.allowNumericCharactersOnly && _this.didPasteEventJustOccur) {
+                _this.didPasteEventJustOccur = false;
+                var valueChars = value.split("");
+                var sanitizedValueChars = valueChars.filter(_this.isFloatingPointNumericCharacter);
+                var sanitizedValue = sanitizedValueChars.join("");
+                nextValue = sanitizedValue;
+            }
+            else {
+                nextValue = value;
+            }
             _this.setState({ shouldSelectAfterUpdate: false, value: nextValue });
@@ -131,2 +156,3 @@ _this.invokeOnChangeCallbacks(nextValue);
         var inputGroupHtmlProps = common_1.removeNonHTMLProps(this.props, [
+            "allowNumericCharactersOnly",
             "buttonPosition",
@@ -136,5 +162,6 @@ "majorStepSize",
             "onValueChange",
+            "selectAllOnFocus",
             "stepSize",
         ], true);
-        var inputGroup = (React.createElement(inputGroup_1.InputGroup, tslib_1.__assign({}, inputGroupHtmlProps, { intent: this.props.intent, inputRef: this.inputRef, key: "input-group", leftIconName: this.props.leftIconName, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, value: this.state.value })));
+        var inputGroup = (React.createElement(inputGroup_1.InputGroup, tslib_1.__assign({}, inputGroupHtmlProps, { intent: this.props.intent, inputRef: this.inputRef, key: "input-group", leftIconName: this.props.leftIconName, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onKeyPress: this.handleInputKeyPress, onPaste: this.handleInputPaste, value: this.state.value })));
         // the strict null check here is intentional; an undefined value should
@@ -213,3 +240,3 @@ // fall back to the default button position on the right side.
         var nextValue = this.getSanitizedValue(currValue, delta, this.props.min, this.props.max);
-        this.setState({ shouldSelectAfterUpdate: true, value: nextValue });
+        this.setState({ shouldSelectAfterUpdate: this.props.selectAllOnIncrement, value: nextValue });
         this.invokeOnChangeCallbacks(nextValue);
@@ -256,2 +283,28 @@ };
     };
+    NumericInput.prototype.isKeyboardEventDisabledForBasicNumericEntry = function (e) {
+        // unit tests may not include e.key. don't bother disabling those events.
+        if (e.key == null) {
+            return false;
+        }
+        // allow modified key strokes that may involve letters and other
+        // non-numeric/invalid characters (Cmd + A, Cmd + C, Cmd + V, Cmd + X).
+        if (e.ctrlKey || e.altKey || e.metaKey) {
+            return false;
+        }
+        // keys that print a single character when pressed have a `key` name of
+        // length 1. every other key has a longer `key` name (e.g. "Backspace",
+        // "ArrowUp", "Shift"). since none of those keys can print a character
+        // to the field--and since they may have important native behaviors
+        // beyond printing a character--we don't want to disable their effects.
+        var isSingleCharKey = e.key.length === 1;
+        if (!isSingleCharKey) {
+            return false;
+        }
+        // now we can simply check that the single character that wants to be printed
+        // is a floating-point number character that we're allowed to print.
+        return !this.isFloatingPointNumericCharacter(e.key);
+    };
+    NumericInput.prototype.isFloatingPointNumericCharacter = function (char) {
+        return NumericInput_1.FLOATING_POINT_NUMBER_CHARACTER_REGEX.test(char);
+    };
     return NumericInput;
@@ -261,5 +314,8 @@ }(common_1.AbstractComponent));
 NumericInput.defaultProps = {
+    allowNumericCharactersOnly: true,
     buttonPosition: common_1.Position.RIGHT,
     majorStepSize: 10,
     minorStepSize: 0.1,
+    selectAllOnFocus: false,
+    selectAllOnIncrement: false,
     stepSize: 1,
@@ -274,2 +330,14 @@ value: NumericInput_1.VALUE_EMPTY,
 NumericInput.VALUE_ZERO = "0";
+/**
+ * A regex that matches a string of length 1 (i.e. a standalone character)
+ * if and only if it is a floating-point number character as defined by W3C:
+ * https://www.w3.org/TR/2012/WD-html-markup-20120329/datatypes.html#common.data.float
+ *
+ * Floating-point number characters are the only characters that can be
+ * printed within a default input[type="number"]. This component should
+ * behave the same way when this.props.allowNumericCharactersOnly = true.
+ * See here for the input[type="number"].value spec:
+ * https://www.w3.org/TR/2012/WD-html-markup-20120329/input.number.html#input.number.attrs.value
+ */
+NumericInput.FLOATING_POINT_NUMBER_CHARACTER_REGEX = /^[Ee0-9\+\-\.]$/;
 NumericInput = NumericInput_1 = tslib_1.__decorate([
@@ -276,0 +344,0 @@ PureRender

dist/components/tree/tree.d.ts

@@ -35,6 +35,14 @@ import * as React from "react";
     static nodeFromPath(path: number[], treeNodes: ITreeNode[]): ITreeNode;
+    private nodeRefs;
     render(): JSX.Element;
+    /**
+     * Returns the underlying HTML element of the `Tree` node with an id of `nodeId`.
+     * This element does not contain the children of the node, only its label and controls.
+     * If the node is not currently mounted, `undefined` is returned.
+     */
+    getNodeContentElement(nodeId: string | number): HTMLElement | undefined;
     private renderNodes(treeNodes, currentPath?, className?);
     private handleNodeCollapse;
     private handleNodeClick;
+    private handleContentRef;
     private handleNodeContextMenu;
@@ -41,0 +49,0 @@ private handleNodeDoubleClick;

dist/components/tree/tree.js

@@ -18,2 +18,3 @@ /*
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.nodeRefs = {};
         _this.handleNodeCollapse = function (node, e) {
@@ -25,2 +26,12 @@ _this.handlerHelper(_this.props.onNodeCollapse, node, e);
         };
+        _this.handleContentRef = function (node, element) {
+            var nodeData = Tree.nodeFromPath(node.props.path, _this.props.contents);
+            if (element != null) {
+                _this.nodeRefs[nodeData.id] = element;
+            }
+            else {
+                // don't want our object to get bloated with old keys
+                delete _this.nodeRefs[nodeData.id];
+            }
+        };
         _this.handleNodeContextMenu = function (node, e) {
@@ -48,2 +59,10 @@ _this.handlerHelper(_this.props.onNodeContextMenu, node, e);
     };
+    /**
+     * Returns the underlying HTML element of the `Tree` node with an id of `nodeId`.
+     * This element does not contain the children of the node, only its label and controls.
+     * If the node is not currently mounted, `undefined` is returned.
+     */
+    Tree.prototype.getNodeContentElement = function (nodeId) {
+        return this.nodeRefs[nodeId];
+    };
     Tree.prototype.renderNodes = function (treeNodes, currentPath, className) {
@@ -56,3 +75,3 @@ var _this = this;
             var elementPath = currentPath.concat(i);
-            return (React.createElement(treeNode_1.TreeNode, tslib_1.__assign({}, node, { key: node.id, depth: elementPath.length - 1, onClick: _this.handleNodeClick, onContextMenu: _this.handleNodeContextMenu, onCollapse: _this.handleNodeCollapse, onDoubleClick: _this.handleNodeDoubleClick, onExpand: _this.handleNodeExpand, path: elementPath }), _this.renderNodes(node.childNodes, elementPath)));
+            return (React.createElement(treeNode_1.TreeNode, tslib_1.__assign({}, node, { key: node.id, contentRef: _this.handleContentRef, depth: elementPath.length - 1, onClick: _this.handleNodeClick, onContextMenu: _this.handleNodeContextMenu, onCollapse: _this.handleNodeCollapse, onDoubleClick: _this.handleNodeDoubleClick, onExpand: _this.handleNodeExpand, path: elementPath }), _this.renderNodes(node.childNodes, elementPath)));
         });
@@ -59,0 +78,0 @@ return (React.createElement("ul", { className: classNames(Classes.TREE_NODE_LIST, className) }, nodeItems));

dist/components/tree/treeNode.d.ts

@@ -45,2 +45,3 @@ import * as React from "react";
     children?: React.ReactNode;
+    contentRef?: (node: TreeNode, element: HTMLDivElement | null) => void;
     depth: number;
@@ -61,4 +62,5 @@ key?: string | number;
     private handleClick;
+    private handleContentRef;
     private handleContextMenu;
     private handleDoubleClick;
 }

dist/components/tree/treeNode.js

@@ -26,2 +26,5 @@ /*
         };
+        _this.handleContentRef = function (element) {
+            utils_1.safeInvoke(_this.props.contentRef, _this, element);
+        };
         _this.handleContextMenu = function (e) {
@@ -49,3 +52,3 @@ utils_1.safeInvoke(_this.props.onContextMenu, _this, e);
         return (React.createElement("li", { className: classes },
-            React.createElement("div", { className: contentClasses, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onDoubleClick: this.handleDoubleClick },
+            React.createElement("div", { className: contentClasses, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onDoubleClick: this.handleDoubleClick, ref: this.handleContentRef },
                 React.createElement("span", { className: caretClasses, onClick: showCaret ? this.handleCaretClick : null }),
@@ -52,0 +55,0 @@ this.maybeRenderIcon(),

package.json

 {
   "name": "@blueprintjs/core",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Core styles & components",
@@ -24,3 +24,3 @@ "main": "dist/index.js",
   "devDependencies": {
-    "bourbon": "4.2.6",
+    "bourbon": "4.3.2",
     "react": "15.4.0",
@@ -27,0 +27,0 @@ "react-addons-css-transition-group": "15.4.0",

src/common/classes.ts

@@ -28,2 +28,5 @@ /*
 
+// text utilities
+export const TEXT_OVERFLOW_ELLIPSIS = "pt-text-overflow-ellipsis";
+
 // components
@@ -183,2 +186,3 @@ export const ALERT = "pt-alert";
 
+export const ICON = "pt-icon";
 export const ICON_STANDARD = "pt-icon-standard";
@@ -185,0 +189,0 @@ export const ICON_LARGE = "pt-icon-large";

No alert changes

Improved metrics

Total package byte prevSize

5919622

increased by0.7%

Lines of code

35267

increased by1.34%

No dependency changes