@blueprintjs/core - npm Package Compare versions

Comparing version 4.17.5 to 4.17.6

lib/cjs/components/tag-input/resizableInput.js

@@ -19,3 +19,3 @@ "use strict";
     }, [content]);
-    var onChange = props.onChange, otherProps = tslib_1.__rest(props, ["onChange"]);
+    var onChange = props.onChange, style = props.style, otherProps = tslib_1.__rest(props, ["onChange", "style"]);
     var handleInputChange = function (evt) {
@@ -27,6 +27,6 @@ var _a, _b;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", { ref: span, className: common_1.Classes.RESIZABLE_INPUT_SPAN }, content.replace(/ /g, "\u00a0")),
-        react_1.default.createElement("input", tslib_1.__assign({}, otherProps, { type: "text", style: { width: width }, onChange: handleInputChange, ref: ref }))));
+        react_1.default.createElement("span", { ref: span, className: common_1.Classes.RESIZABLE_INPUT_SPAN, "aria-hidden": true }, content.replace(/ /g, "\u00a0")),
+        react_1.default.createElement("input", tslib_1.__assign({}, otherProps, { type: "text", style: tslib_1.__assign(tslib_1.__assign({}, style), { width: width }), onChange: handleInputChange, ref: ref }))));
 });
 exports.ResizableInput.displayName = "".concat(common_1.DISPLAYNAME_PREFIX, ".ResizableInput");
 //# sourceMappingURL=resizableInput.js.map

lib/cjs/components/tag-input/tagInput.d.ts

@@ -37,2 +37,15 @@ import * as React from "react";
     addOnPaste?: boolean;
+    /**
+     * Whether the component should automatically resize as a user types in the text input.
+     * This will have no effect when `fill={true}`.
+     *
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Optional child elements which will be rendered between the selected tags and
+     * the text input. Rendering children is usually unnecessary.
+     *
+     * @default undefined
+     */
     children?: React.ReactNode;
@@ -52,2 +65,3 @@ /**
      * Note that `ref` and `key` are not supported here; use `inputRef` below.
+     * Also note that `inputProps.style.width` will be overriden if `autoResize={true}`.
      */
@@ -54,0 +68,0 @@ inputProps?: HTMLInputProps;

lib/cjs/components/tag-input/tagInput.js

@@ -161,3 +161,3 @@ "use strict";
         var _a;
-        var _b = this.props, className = _b.className, disabled = _b.disabled, fill = _b.fill, inputProps = _b.inputProps, intent = _b.intent, large = _b.large, leftIcon = _b.leftIcon, placeholder = _b.placeholder, values = _b.values;
+        var _b = this.props, autoResize = _b.autoResize, className = _b.className, disabled = _b.disabled, fill = _b.fill, inputProps = _b.inputProps, intent = _b.intent, large = _b.large, leftIcon = _b.leftIcon, placeholder = _b.placeholder, values = _b.values;
         var classes = (0, classnames_1.default)(common_1.Classes.INPUT, common_1.Classes.TAG_INPUT, (_a = {},
@@ -173,2 +173,4 @@ _a[common_1.Classes.ACTIVE] = this.state.isInputFocused,
         var resolvedPlaceholder = placeholder == null || isSomeValueDefined ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder : placeholder;
+        // final props that may be sent to <input> or <ResizableInput>
+        var resolvedInputProps = tslib_1.__assign(tslib_1.__assign({ value: this.state.inputValue }, inputProps), { className: (0, classnames_1.default)(common_1.Classes.INPUT_GHOST, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown, onKeyUp: this.handleInputKeyUp, onPaste: this.handleInputPaste, placeholder: resolvedPlaceholder, ref: this.handleRef });
         return (React.createElement("div", { className: classes, onBlur: this.handleContainerBlur, onClick: this.handleContainerClick },
@@ -179,3 +181,3 @@ React.createElement(icon_1.Icon, { className: common_1.Classes.TAG_INPUT_ICON, icon: leftIcon, size: isLarge ? icon_1.IconSize.LARGE : icon_1.IconSize.STANDARD }),
                 this.props.children,
-                React.createElement(resizableInput_1.ResizableInput, tslib_1.__assign({ value: this.state.inputValue }, inputProps, { onFocus: this.handleInputFocus, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onKeyUp: this.handleInputKeyUp, onPaste: this.handleInputPaste, placeholder: resolvedPlaceholder, ref: this.handleRef, className: (0, classnames_1.default)(common_1.Classes.INPUT_GHOST, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled }))),
+                autoResize ? React.createElement(resizableInput_1.ResizableInput, tslib_1.__assign({}, resolvedInputProps)) : React.createElement("input", tslib_1.__assign({}, resolvedInputProps))),
             this.props.rightElement));
@@ -260,2 +262,3 @@ };
         addOnPaste: true,
+        autoResize: false,
         inputProps: {},
@@ -262,0 +265,0 @@ separator: /[,\n\r]/,

lib/esm/components/tag-input/resizableInput.js

@@ -16,3 +16,3 @@ /* !
     }, [content]);
-    var onChange = props.onChange, otherProps = __rest(props, ["onChange"]);
+    var onChange = props.onChange, style = props.style, otherProps = __rest(props, ["onChange", "style"]);
     var handleInputChange = function (evt) {
@@ -24,6 +24,6 @@ var _a, _b;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { ref: span, className: Classes.RESIZABLE_INPUT_SPAN }, content.replace(/ /g, "\u00a0")),
-        React.createElement("input", __assign({}, otherProps, { type: "text", style: { width: width }, onChange: handleInputChange, ref: ref }))));
+        React.createElement("span", { ref: span, className: Classes.RESIZABLE_INPUT_SPAN, "aria-hidden": true }, content.replace(/ /g, "\u00a0")),
+        React.createElement("input", __assign({}, otherProps, { type: "text", style: __assign(__assign({}, style), { width: width }), onChange: handleInputChange, ref: ref }))));
 });
 ResizableInput.displayName = "".concat(DISPLAYNAME_PREFIX, ".ResizableInput");
 //# sourceMappingURL=resizableInput.js.map

lib/esm/components/tag-input/tagInput.d.ts

@@ -37,2 +37,15 @@ import * as React from "react";
     addOnPaste?: boolean;
+    /**
+     * Whether the component should automatically resize as a user types in the text input.
+     * This will have no effect when `fill={true}`.
+     *
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Optional child elements which will be rendered between the selected tags and
+     * the text input. Rendering children is usually unnecessary.
+     *
+     * @default undefined
+     */
     children?: React.ReactNode;
@@ -52,2 +65,3 @@ /**
      * Note that `ref` and `key` are not supported here; use `inputRef` below.
+     * Also note that `inputProps.style.width` will be overriden if `autoResize={true}`.
      */
@@ -54,0 +68,0 @@ inputProps?: HTMLInputProps;

lib/esm/components/tag-input/tagInput.js

@@ -158,3 +158,3 @@ /*
         var _a;
-        var _b = this.props, className = _b.className, disabled = _b.disabled, fill = _b.fill, inputProps = _b.inputProps, intent = _b.intent, large = _b.large, leftIcon = _b.leftIcon, placeholder = _b.placeholder, values = _b.values;
+        var _b = this.props, autoResize = _b.autoResize, className = _b.className, disabled = _b.disabled, fill = _b.fill, inputProps = _b.inputProps, intent = _b.intent, large = _b.large, leftIcon = _b.leftIcon, placeholder = _b.placeholder, values = _b.values;
         var classes = classNames(Classes.INPUT, Classes.TAG_INPUT, (_a = {},
@@ -170,2 +170,4 @@ _a[Classes.ACTIVE] = this.state.isInputFocused,
         var resolvedPlaceholder = placeholder == null || isSomeValueDefined ? inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder : placeholder;
+        // final props that may be sent to <input> or <ResizableInput>
+        var resolvedInputProps = __assign(__assign({ value: this.state.inputValue }, inputProps), { className: classNames(Classes.INPUT_GHOST, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown, onKeyUp: this.handleInputKeyUp, onPaste: this.handleInputPaste, placeholder: resolvedPlaceholder, ref: this.handleRef });
         return (React.createElement("div", { className: classes, onBlur: this.handleContainerBlur, onClick: this.handleContainerClick },
@@ -176,3 +178,3 @@ React.createElement(Icon, { className: Classes.TAG_INPUT_ICON, icon: leftIcon, size: isLarge ? IconSize.LARGE : IconSize.STANDARD }),
                 this.props.children,
-                React.createElement(ResizableInput, __assign({ value: this.state.inputValue }, inputProps, { onFocus: this.handleInputFocus, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onKeyUp: this.handleInputKeyUp, onPaste: this.handleInputPaste, placeholder: resolvedPlaceholder, ref: this.handleRef, className: classNames(Classes.INPUT_GHOST, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled }))),
+                autoResize ? React.createElement(ResizableInput, __assign({}, resolvedInputProps)) : React.createElement("input", __assign({}, resolvedInputProps))),
             this.props.rightElement));
@@ -257,2 +259,3 @@ };
         addOnPaste: true,
+        autoResize: false,
         inputProps: {},
@@ -259,0 +262,0 @@ separator: /[,\n\r]/,

lib/esnext/components/tag-input/resizableInput.js

@@ -15,3 +15,3 @@ /* !
     }, [content]);
-    const { onChange, ...otherProps } = props;
+    const { onChange, style, ...otherProps } = props;
     const handleInputChange = evt => {
@@ -22,6 +22,6 @@ onChange?.(evt);
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { ref: span, className: Classes.RESIZABLE_INPUT_SPAN }, content.replace(/ /g, "\u00a0")),
-        React.createElement("input", { ...otherProps, type: "text", style: { width }, onChange: handleInputChange, ref: ref })));
+        React.createElement("span", { ref: span, className: Classes.RESIZABLE_INPUT_SPAN, "aria-hidden": true }, content.replace(/ /g, "\u00a0")),
+        React.createElement("input", { ...otherProps, type: "text", style: { ...style, width }, onChange: handleInputChange, ref: ref })));
 });
 ResizableInput.displayName = `${DISPLAYNAME_PREFIX}.ResizableInput`;
 //# sourceMappingURL=resizableInput.js.map

lib/esnext/components/tag-input/tagInput.d.ts

@@ -37,2 +37,15 @@ import * as React from "react";
     addOnPaste?: boolean;
+    /**
+     * Whether the component should automatically resize as a user types in the text input.
+     * This will have no effect when `fill={true}`.
+     *
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Optional child elements which will be rendered between the selected tags and
+     * the text input. Rendering children is usually unnecessary.
+     *
+     * @default undefined
+     */
     children?: React.ReactNode;
@@ -52,2 +65,3 @@ /**
      * Note that `ref` and `key` are not supported here; use `inputRef` below.
+     * Also note that `inputProps.style.width` will be overriden if `autoResize={true}`.
      */
@@ -54,0 +68,0 @@ inputProps?: HTMLInputProps;

lib/esnext/components/tag-input/tagInput.js

@@ -36,2 +36,3 @@ /*
         addOnPaste: true,
+        autoResize: false,
         inputProps: {},
@@ -58,3 +59,3 @@ separator: /[,\n\r]/,
     render() {
-        const { className, disabled, fill, inputProps, intent, large, leftIcon, placeholder, values } = this.props;
+        const { autoResize, className, disabled, fill, inputProps, intent, large, leftIcon, placeholder, values } = this.props;
         const classes = classNames(Classes.INPUT, Classes.TAG_INPUT, {
@@ -70,2 +71,16 @@ [Classes.ACTIVE]: this.state.isInputFocused,
         const resolvedPlaceholder = placeholder == null || isSomeValueDefined ? inputProps?.placeholder : placeholder;
+        // final props that may be sent to <input> or <ResizableInput>
+        const resolvedInputProps = {
+            value: this.state.inputValue,
+            ...inputProps,
+            className: classNames(Classes.INPUT_GHOST, inputProps?.className),
+            disabled,
+            onChange: this.handleInputChange,
+            onFocus: this.handleInputFocus,
+            onKeyDown: this.handleInputKeyDown,
+            onKeyUp: this.handleInputKeyUp,
+            onPaste: this.handleInputPaste,
+            placeholder: resolvedPlaceholder,
+            ref: this.handleRef,
+        };
         return (React.createElement("div", { className: classes, onBlur: this.handleContainerBlur, onClick: this.handleContainerClick },
@@ -76,3 +91,3 @@ React.createElement(Icon, { className: Classes.TAG_INPUT_ICON, icon: leftIcon, size: isLarge ? IconSize.LARGE : IconSize.STANDARD }),
                 this.props.children,
-                React.createElement(ResizableInput, { value: this.state.inputValue, ...inputProps, onFocus: this.handleInputFocus, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onKeyUp: this.handleInputKeyUp, onPaste: this.handleInputPaste, placeholder: resolvedPlaceholder, ref: this.handleRef, className: classNames(Classes.INPUT_GHOST, inputProps?.className), disabled: disabled })),
+                autoResize ? React.createElement(ResizableInput, { ...resolvedInputProps }) : React.createElement("input", { ...resolvedInputProps })),
             this.props.rightElement));
@@ -79,0 +94,0 @@ }

package.json

 {
     "name": "@blueprintjs/core",
-    "version": "4.17.5",
+    "version": "4.17.6",
     "description": "Core styles & components",
@@ -5,0 +5,0 @@ "main": "lib/cjs/index.js",

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

5500224

increased by0.07%

Lines of code

84374

increased by0.09%

No dependency changes