@rh-support/components 1.2.16 → 1.2.18-beta.31

package/lib/cjs/InlineEdit/InlineEdit.d.ts

@@ -19,10 +19,6 @@ interface IProps {
     onSave: any;
     onCancel: any;
     cancelOnToggle?: boolean;
-    charCount: number;
-    charTotal: number;
-    cancelToggleState?: boolean;
-    saveToggleState?: boolean;
     collapseOnBlur?: boolean;
     saveOnBlur?: boolean;
     saveDisabled?: boolean;

package/lib/cjs/InlineEdit/InlineEdit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAqLhC;kBArLQ,UAAU;;;AAwLnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAmKhC;kBAnKQ,UAAU;;;AAsKnB,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/cjs/InlineEdit/InlineEdit.js

@@ -117,13 +117,6 @@ function InlineEdit(props) {
     // editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
     // on input/textareat in this situation as we may have other form elements on page that we want to focus
     var _c = __read(react_1.useState(!props.initialIsEditing), 2), canAutoSetFocus = _c[0], setCanAutoSfocus = _c[1];
-    // To close InlineEdit input and show content whenever cancel is clicked
-    react_1.useEffect(function () {
-        if (isEditing) {
-            setIsEditing(!isEditing);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.cancelToggleState, props.saveToggleState]);
     var onEditClicked = function (e) {
         setCanAutoSfocus(true);
         e.preventDefault();
@@ -218,21 +211,19 @@ function InlineEdit(props) {
                 react_1.default.createElement(react_i18next_1.Trans, null, props.cancelLabel))));
     };
     var canShowContent = !isEditing && props.allowInlineEdit && props.content;
-    var showCount = " " + props.charCount + " / " + props.charTotal;
     return (react_1.default.createElement("div", { className: "form-group edit-question " + props.formClassName, id: props.formId },
         !props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("label", __assign({}, props.labelProps),
                 react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
                 props.helperContent,
-                !props.content && !isEditing ? renderEditButton() : null))),
+                renderEditButton()))),
         renderSaveCancel(),
-        props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className: "\n                        " + (props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count') }, props.charCount ? showCount : null)),
         canShowContent && !props.usePreformattedTag && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
                 props.content,
-                react_1.default.createElement(react_1.default.Fragment, null,
+                props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
                     props.helperContent,
-                    renderEditButton()),
+                    renderEditButton())),
                 props.loadingIndicator && react_1.default.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
         canShowContent && props.usePreformattedTag && react_1.default.createElement("pre", { id: props.inputId }, props.content),
         react_1.default.createElement(react_1.default.Fragment, null,

package/lib/cjs/InlineEdit/NewInlineEdit.css

@@ -0,0 +1,44 @@
+.edit-question .btn-edit {
+    padding: 0 0.5rem !important;
+    margin-left: 0.5rem;
+}
+
+.edit-question .edit-actions {
+    float: right;
+    position: relative;
+    top: 38px;
+    margin-top: -34px;
+}
+
+.edit-question .edit-actions > * {
+    padding: 2px 1rem !important;
+    font-size: 13px !important;
+    float: right;
+}
+
+.edit-question input {
+    padding-right: 150px;
+}
+
+.edit-question .loading-indicator {
+    margin-left: 10px;
+}
+
+.case-overview .edit-question .loading-indicator {
+    margin-left: 0px;
+}
+
+/*  Character Count  */
+.char-count {
+    float: right;
+    position: relative;
+    padding-right: var(--pf-global--spacer--4xl);
+    margin-right: var(--pf-global--spacer--lg);
+    font-size: 12px;
+}
+
+@media (max-width: 415px) {
+    .char-count {
+        padding-right: var(--pf-global--spacer--2xl);
+    }
+}

package/lib/cjs/InlineEdit/NewInlineEdit.d.ts

@@ -0,0 +1,40 @@
+import './NewInlineEdit.css';
+import { HTMLProps } from 'react';
+interface IProps {
+    inputId?: string;
+    children: JSX.Element | JSX.Element[];
+    labelProps: HTMLProps<HTMLLabelElement>;
+    labelContent: JSX.Element | JSX.Element[];
+    helperContent?: JSX.Element | JSX.Element[];
+    loadingIndicator: JSX.Element | string;
+    content?: string | JSX.Element;
+    allowInlineEdit: boolean;
+    formClassName?: string;
+    formId?: string;
+    dataTrackingId?: string;
+    usePreformattedTag: boolean;
+    hideSaveCancel: boolean;
+    cancelLabel: JSX.Element | string;
+    saveLabel: JSX.Element | string;
+    onSave: any;
+    onCancel: any;
+    cancelOnToggle?: boolean;
+    charCount: number;
+    charTotal: number;
+    cancelToggleState?: boolean;
+    saveToggleState?: boolean;
+    collapseOnBlur?: boolean;
+    saveOnBlur?: boolean;
+    saveDisabled?: boolean;
+    cancelOnBlur?: boolean;
+    initialIsEditing?: boolean;
+    hideLabel?: boolean;
+    isSpaceAllowed?: boolean;
+    inputValue?: string;
+}
+declare function NewInlineEdit(props: IProps): JSX.Element;
+declare namespace NewInlineEdit {
+    var defaultProps: Partial<IProps>;
+}
+export { NewInlineEdit };
+//# sourceMappingURL=NewInlineEdit.d.ts.map

package/lib/cjs/InlineEdit/NewInlineEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAqLnC;kBArLQ,aAAa;;;AAwLtB,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/cjs/InlineEdit/NewInlineEdit.js

@@ -0,0 +1,263 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewInlineEdit = void 0;
+require("./NewInlineEdit.css");
+var pencil_alt_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/pencil-alt-icon"));
+var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var defaultProps = {
+    allowInlineEdit: false,
+    formClassName: '',
+    formId: '',
+    dataTrackingId: '',
+    usePreformattedTag: false,
+    hideSaveCancel: false,
+    saveLabel: 'Save',
+    cancelLabel: 'Cancel',
+    cancelOnToggle: false,
+    loadingIndicator: '',
+    initialIsEditing: false,
+    collapseOnBlur: false,
+    saveOnBlur: false,
+    cancelOnBlur: false,
+    saveDisabled: false,
+    hideLabel: false,
+    isSpaceAllowed: true,
+};
+function NewInlineEdit(props) {
+    var _this = this;
+    var _a;
+    var _b = __read(react_1.useState(props.initialIsEditing), 2), isEditing = _b[0], setIsEditing = _b[1];
+    // editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
+    // on input/textareat in this situation as we may have other form elements on page that we want to focus
+    var _c = __read(react_1.useState(!props.initialIsEditing), 2), canAutoSetFocus = _c[0], setCanAutoSfocus = _c[1];
+    // To close InlineEdit input and show content whenever cancel is clicked
+    react_1.useEffect(function () {
+        if (isEditing) {
+            setIsEditing(!isEditing);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.cancelToggleState, props.saveToggleState]);
+    var onEditClicked = function (e) {
+        setCanAutoSfocus(true);
+        e.preventDefault();
+        props.cancelOnToggle && isEditing && props.onCancel && props.onCancel();
+        setIsEditing(!isEditing);
+    };
+    var renderEditButton = function () {
+        if (!props.allowInlineEdit) {
+            return null;
+        }
+        return (react_1.default.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
+            react_1.default.createElement(pencil_alt_icon_1.default, null)));
+    };
+    var onBlurChild = function () {
+        props.collapseOnBlur && setIsEditing(!isEditing);
+        props.saveOnBlur && !props.saveDisabled && props.onSave && props.onSave();
+        props.cancelOnBlur && props.onCancel && props.onCancel();
+    };
+    var onCancelClicked = function () {
+        props.onCancel && props.onCancel();
+        setIsEditing(false);
+    };
+    var onSave = function () { return __awaiter(_this, void 0, void 0, function () {
+        var _a, e_1;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 3, , 4]);
+                    _a = props.onSave;
+                    if (!_a) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.onSave()];
+                case 1:
+                    _a = (_b.sent());
+                    _b.label = 2;
+                case 2:
+                    _a;
+                    setIsEditing(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _b.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onSaveClicked = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (props.saveDisabled)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, onSave()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    // Disables button if isSpaceAllowed is False and Input has Spaces
+    var diabledCheckForSpaceAllowed = !props.isSpaceAllowed && lodash_1.isEmpty((_a = props.inputValue) === null || _a === void 0 ? void 0 : _a.trim());
+    var handleKeyDown = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(props.allowInlineEdit && isEditing && e.keyCode === 27)) return [3 /*break*/, 1];
+                    props.onCancel && props.onCancel();
+                    setIsEditing(false);
+                    return [3 /*break*/, 3];
+                case 1:
+                    if (!(!props.hideSaveCancel &&
+                        props.allowInlineEdit &&
+                        isEditing &&
+                        !diabledCheckForSpaceAllowed &&
+                        !props.saveDisabled &&
+                        e.keyCode === 13)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, onSave()];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var renderSaveCancel = function () {
+        return !props.hideSaveCancel &&
+            props.allowInlineEdit &&
+            isEditing && (react_1.default.createElement("span", { className: "edit-actions" },
+            props.loadingIndicator && react_1.default.createElement("span", null, props.loadingIndicator),
+            react_1.default.createElement("button", { "data-tracking-id": props.dataTrackingId ? props.dataTrackingId + "-inline-edit-save" : null, className: "btn btn-app btn-link", type: "button", onClick: onSaveClicked, disabled: diabledCheckForSpaceAllowed || props.saveDisabled },
+                react_1.default.createElement(react_i18next_1.Trans, null, props.saveLabel)),
+            react_1.default.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? props.dataTrackingId + "-inline-edit-cancel" : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
+                react_1.default.createElement(react_i18next_1.Trans, null, props.cancelLabel))));
+    };
+    var canShowContent = !isEditing && props.allowInlineEdit && props.content;
+    var showCount = " " + props.charCount + " / " + props.charTotal;
+    return (react_1.default.createElement("div", { className: "form-group edit-question " + props.formClassName, id: props.formId },
+        !props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("label", __assign({}, props.labelProps),
+                react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
+                props.helperContent,
+                !props.content && !isEditing ? renderEditButton() : null))),
+        renderSaveCancel(),
+        props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className: "\n                        " + (props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count') }, props.charCount ? showCount : null)),
+        canShowContent && !props.usePreformattedTag && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
+                props.content,
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    props.helperContent,
+                    renderEditButton()),
+                props.loadingIndicator && react_1.default.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
+        canShowContent && props.usePreformattedTag && react_1.default.createElement("pre", { id: props.inputId }, props.content),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { onBlur: onBlurChild, onKeyDown: handleKeyDown, className: "inlineEdit-wrapper", "data-tracking-id": "inline-edit-input-wrapper" },
+                !props.allowInlineEdit && props.children,
+                props.allowInlineEdit &&
+                    isEditing &&
+                    react_1.default.Children.map(props.children, function (child) {
+                        if (!child)
+                            return;
+                        var canFocusChild = (child.type === 'input' || child.type === 'textarea') && canAutoSetFocus;
+                        // if input/textarea had autoFocus but focus was lost in the wrapper component
+                        var needsReFocus = !canAutoSetFocus && child.props.autoFocus;
+                        if (canFocusChild || needsReFocus) {
+                            return react_1.default.cloneElement(child, {
+                                ref: function (node) {
+                                    node && node.focus();
+                                    setCanAutoSfocus(false);
+                                },
+                            });
+                        }
+                        else {
+                            return child;
+                        }
+                    })))));
+}
+exports.NewInlineEdit = NewInlineEdit;
+NewInlineEdit.defaultProps = defaultProps;

package/lib/cjs/InlineEdit/index.d.ts

@@ -1,2 +1,3 @@
 export * from './InlineEdit';
+export * from './NewInlineEdit';
 //# sourceMappingURL=index.d.ts.map

package/lib/cjs/InlineEdit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}

package/lib/cjs/InlineEdit/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./InlineEdit"), exports);
+__exportStar(require("./NewInlineEdit"), exports);

package/lib/cjs/InlineEdit/inlineEdit.css

@@ -27,18 +27,3 @@
 .case-overview .edit-question .loading-indicator {
     margin-left: 0px;
 }
-
-/*  Character Count  */
-.char-count {
-    float: right;
-    position: relative;
-    padding-right: var(--pf-global--spacer--4xl);
-    margin-right: var(--pf-global--spacer--lg);
-    font-size: 12px;
-}
-
-@media (max-width: 415px) {
-    .char-count {
-        padding-right: var(--pf-global--spacer--2xl);
-    }
-}

package/lib/esm/InlineEdit/InlineEdit.d.ts

@@ -19,10 +19,6 @@ interface IProps {
     onSave: any;
     onCancel: any;
     cancelOnToggle?: boolean;
-    charCount: number;
-    charTotal: number;
-    cancelToggleState?: boolean;
-    saveToggleState?: boolean;
     collapseOnBlur?: boolean;
     saveOnBlur?: boolean;
     saveDisabled?: boolean;

package/lib/esm/InlineEdit/InlineEdit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAqLhC;kBArLQ,UAAU;;;AAwLnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAmKhC;kBAnKQ,UAAU;;;AAsKnB,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/esm/InlineEdit/InlineEdit.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import './inlineEdit.css';
 import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 const defaultProps = {
     allowInlineEdit: false,
@@ -37,13 +37,6 @@ function InlineEdit(props) {
     // editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
     // on input/textareat in this situation as we may have other form elements on page that we want to focus
     const [canAutoSetFocus, setCanAutoSfocus] = useState(!props.initialIsEditing);
-    // To close InlineEdit input and show content whenever cancel is clicked
-    useEffect(() => {
-        if (isEditing) {
-            setIsEditing(!isEditing);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.cancelToggleState, props.saveToggleState]);
     const onEditClicked = (e) => {
         setCanAutoSfocus(true);
         e.preventDefault();
@@ -107,22 +100,19 @@ function InlineEdit(props) {
         React.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
             React.createElement(Trans, null, props.cancelLabel))));
     const canShowContent = !isEditing && props.allowInlineEdit && props.content;
-    const showCount = ` ${props.charCount} / ${props.charTotal}`;
     return (React.createElement("div", { className: `form-group edit-question ${props.formClassName}`, id: props.formId },
         !props.hideLabel && (React.createElement(React.Fragment, null,
             React.createElement("label", Object.assign({}, props.labelProps),
                 React.createElement("span", { className: "label-edit" }, props.labelContent),
                 props.helperContent,
-                !props.content && !isEditing ? renderEditButton() : null))),
+                renderEditButton()))),
         renderSaveCancel(),
-        props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
-                        ${props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
         canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
             React.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
                 props.content,
-                React.createElement(React.Fragment, null,
+                props.hideLabel && (React.createElement(React.Fragment, null,
                     props.helperContent,
-                    renderEditButton()),
+                    renderEditButton())),
                 props.loadingIndicator && React.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
         canShowContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
         React.createElement(React.Fragment, null,

package/lib/esm/InlineEdit/NewInlineEdit.css

@@ -0,0 +1,44 @@
+.edit-question .btn-edit {
+    padding: 0 0.5rem !important;
+    margin-left: 0.5rem;
+}
+
+.edit-question .edit-actions {
+    float: right;
+    position: relative;
+    top: 38px;
+    margin-top: -34px;
+}
+
+.edit-question .edit-actions > * {
+    padding: 2px 1rem !important;
+    font-size: 13px !important;
+    float: right;
+}
+
+.edit-question input {
+    padding-right: 150px;
+}
+
+.edit-question .loading-indicator {
+    margin-left: 10px;
+}
+
+.case-overview .edit-question .loading-indicator {
+    margin-left: 0px;
+}
+
+/*  Character Count  */
+.char-count {
+    float: right;
+    position: relative;
+    padding-right: var(--pf-global--spacer--4xl);
+    margin-right: var(--pf-global--spacer--lg);
+    font-size: 12px;
+}
+
+@media (max-width: 415px) {
+    .char-count {
+        padding-right: var(--pf-global--spacer--2xl);
+    }
+}

package/lib/esm/InlineEdit/NewInlineEdit.d.ts

@@ -0,0 +1,40 @@
+import './NewInlineEdit.css';
+import { HTMLProps } from 'react';
+interface IProps {
+    inputId?: string;
+    children: JSX.Element | JSX.Element[];
+    labelProps: HTMLProps<HTMLLabelElement>;
+    labelContent: JSX.Element | JSX.Element[];
+    helperContent?: JSX.Element | JSX.Element[];
+    loadingIndicator: JSX.Element | string;
+    content?: string | JSX.Element;
+    allowInlineEdit: boolean;
+    formClassName?: string;
+    formId?: string;
+    dataTrackingId?: string;
+    usePreformattedTag: boolean;
+    hideSaveCancel: boolean;
+    cancelLabel: JSX.Element | string;
+    saveLabel: JSX.Element | string;
+    onSave: any;
+    onCancel: any;
+    cancelOnToggle?: boolean;
+    charCount: number;
+    charTotal: number;
+    cancelToggleState?: boolean;
+    saveToggleState?: boolean;
+    collapseOnBlur?: boolean;
+    saveOnBlur?: boolean;
+    saveDisabled?: boolean;
+    cancelOnBlur?: boolean;
+    initialIsEditing?: boolean;
+    hideLabel?: boolean;
+    isSpaceAllowed?: boolean;
+    inputValue?: string;
+}
+declare function NewInlineEdit(props: IProps): JSX.Element;
+declare namespace NewInlineEdit {
+    var defaultProps: Partial<IProps>;
+}
+export { NewInlineEdit };
+//# sourceMappingURL=NewInlineEdit.d.ts.map

package/lib/esm/InlineEdit/NewInlineEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eAqLnC;kBArLQ,aAAa;;;AAwLtB,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/esm/InlineEdit/NewInlineEdit.js

@@ -0,0 +1,153 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import './NewInlineEdit.css';
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import { isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
+const defaultProps = {
+    allowInlineEdit: false,
+    formClassName: '',
+    formId: '',
+    dataTrackingId: '',
+    usePreformattedTag: false,
+    hideSaveCancel: false,
+    saveLabel: 'Save',
+    cancelLabel: 'Cancel',
+    cancelOnToggle: false,
+    loadingIndicator: '',
+    initialIsEditing: false,
+    collapseOnBlur: false,
+    saveOnBlur: false,
+    cancelOnBlur: false,
+    saveDisabled: false,
+    hideLabel: false,
+    isSpaceAllowed: true,
+};
+function NewInlineEdit(props) {
+    var _a;
+    const [isEditing, setIsEditing] = useState(props.initialIsEditing);
+    // editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
+    // on input/textareat in this situation as we may have other form elements on page that we want to focus
+    const [canAutoSetFocus, setCanAutoSfocus] = useState(!props.initialIsEditing);
+    // To close InlineEdit input and show content whenever cancel is clicked
+    useEffect(() => {
+        if (isEditing) {
+            setIsEditing(!isEditing);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.cancelToggleState, props.saveToggleState]);
+    const onEditClicked = (e) => {
+        setCanAutoSfocus(true);
+        e.preventDefault();
+        props.cancelOnToggle && isEditing && props.onCancel && props.onCancel();
+        setIsEditing(!isEditing);
+    };
+    const renderEditButton = () => {
+        if (!props.allowInlineEdit) {
+            return null;
+        }
+        return (React.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
+            React.createElement(PencilAltIcon, null)));
+    };
+    const onBlurChild = () => {
+        props.collapseOnBlur && setIsEditing(!isEditing);
+        props.saveOnBlur && !props.saveDisabled && props.onSave && props.onSave();
+        props.cancelOnBlur && props.onCancel && props.onCancel();
+    };
+    const onCancelClicked = () => {
+        props.onCancel && props.onCancel();
+        setIsEditing(false);
+    };
+    const onSave = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            props.onSave && (yield props.onSave());
+            setIsEditing(false);
+        }
+        catch (e) {
+            // we will keep the user in the editing state. so nothing to do here
+        }
+    });
+    const onSaveClicked = () => __awaiter(this, void 0, void 0, function* () {
+        if (props.saveDisabled)
+            return;
+        yield onSave();
+    });
+    // Disables button if isSpaceAllowed is False and Input has Spaces
+    const diabledCheckForSpaceAllowed = !props.isSpaceAllowed && isEmpty((_a = props.inputValue) === null || _a === void 0 ? void 0 : _a.trim());
+    const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
+        // Cancel on pressing esc
+        if (props.allowInlineEdit && isEditing && e.keyCode === 27) {
+            props.onCancel && props.onCancel();
+            setIsEditing(false);
+        }
+        // Save on pressing enter
+        else if (!props.hideSaveCancel &&
+            props.allowInlineEdit &&
+            isEditing &&
+            !diabledCheckForSpaceAllowed &&
+            !props.saveDisabled &&
+            e.keyCode === 13) {
+            yield onSave();
+        }
+    });
+    const renderSaveCancel = () => !props.hideSaveCancel &&
+        props.allowInlineEdit &&
+        isEditing && (React.createElement("span", { className: "edit-actions" },
+        props.loadingIndicator && React.createElement("span", null, props.loadingIndicator),
+        React.createElement("button", { "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-save` : null, className: "btn btn-app btn-link", type: "button", onClick: onSaveClicked, disabled: diabledCheckForSpaceAllowed || props.saveDisabled },
+            React.createElement(Trans, null, props.saveLabel)),
+        React.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
+            React.createElement(Trans, null, props.cancelLabel))));
+    const canShowContent = !isEditing && props.allowInlineEdit && props.content;
+    const showCount = ` ${props.charCount} / ${props.charTotal}`;
+    return (React.createElement("div", { className: `form-group edit-question ${props.formClassName}`, id: props.formId },
+        !props.hideLabel && (React.createElement(React.Fragment, null,
+            React.createElement("label", Object.assign({}, props.labelProps),
+                React.createElement("span", { className: "label-edit" }, props.labelContent),
+                props.helperContent,
+                !props.content && !isEditing ? renderEditButton() : null))),
+        renderSaveCancel(),
+        props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
+                        ${props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
+        canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
+            React.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
+                props.content,
+                React.createElement(React.Fragment, null,
+                    props.helperContent,
+                    renderEditButton()),
+                props.loadingIndicator && React.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
+        canShowContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { onBlur: onBlurChild, onKeyDown: handleKeyDown, className: "inlineEdit-wrapper", "data-tracking-id": "inline-edit-input-wrapper" },
+                !props.allowInlineEdit && props.children,
+                props.allowInlineEdit &&
+                    isEditing &&
+                    React.Children.map(props.children, (child) => {
+                        if (!child)
+                            return;
+                        const canFocusChild = (child.type === 'input' || child.type === 'textarea') && canAutoSetFocus;
+                        // if input/textarea had autoFocus but focus was lost in the wrapper component
+                        const needsReFocus = !canAutoSetFocus && child.props.autoFocus;
+                        if (canFocusChild || needsReFocus) {
+                            return React.cloneElement(child, {
+                                ref: (node) => {
+                                    node && node.focus();
+                                    setCanAutoSfocus(false);
+                                },
+                            });
+                        }
+                        else {
+                            return child;
+                        }
+                    })))));
+}
+NewInlineEdit.defaultProps = defaultProps;
+export { NewInlineEdit };

package/lib/esm/InlineEdit/index.d.ts

@@ -1,2 +1,3 @@
 export * from './InlineEdit';
+export * from './NewInlineEdit';
 //# sourceMappingURL=index.d.ts.map

package/lib/esm/InlineEdit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}

package/lib/esm/InlineEdit/index.js

@@ -1 +1,2 @@
 export * from './InlineEdit';
+export * from './NewInlineEdit';

package/lib/esm/InlineEdit/inlineEdit.css

@@ -27,18 +27,3 @@
 .case-overview .edit-question .loading-indicator {
     margin-left: 0px;
 }
-
-/*  Character Count  */
-.char-count {
-    float: right;
-    position: relative;
-    padding-right: var(--pf-global--spacer--4xl);
-    margin-right: var(--pf-global--spacer--lg);
-    font-size: 12px;
-}
-
-@media (max-width: 415px) {
-    .char-count {
-        padding-right: var(--pf-global--spacer--2xl);
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "1.2.16",
+    "version": "1.2.18-beta.31",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -85,8 +85,8 @@
         "@patternfly/react-core": "4.264.0",
         "@patternfly/react-table": "4.111.33",
         "@rh-support/types": "0.2.0",
-        "@rh-support/user-permissions": "1.0.11",
-        "@rh-support/utils": "1.0.9",
+        "@rh-support/user-permissions": "1.0.11-beta.31",
+        "@rh-support/utils": "1.0.9-beta.31",
         "@storybook/addon-a11y": "^5.3.19",
         "@storybook/addon-actions": "^5.3.19",
         "@storybook/addon-docs": "^5.3.19",
@@ -110,6 +110,10 @@
         "storybook-readme": "^5.0.8",
         "use-deep-compare-effect": "^1.6.1"
     },
+    "resolutions": {
+        "@types/react": "17.0.14",
+        "@types/react-dom": "17.0.9"
+    },
     "devDependencies": {
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
@@ -117,8 +121,9 @@
         "@types/dompurify": "^2.2.1",
         "@types/lodash": "^4.14.136",
         "@types/marked": "^1.1.0",
-        "@types/react": "^17.0.14",
+        "@types/react": "17.0.14",
         "@types/react-bootstrap-typeahead": "^5.1.3",
+        "@types/react-dom": "17.0.9",
         "identity-obj-proxy": "^3.0.0"
     },
     "browserslist": [
@@ -126,5 +131,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "af45effefff4d9434a171992428c249f80fc84ce"
+    "gitHead": "146329bae87bc1b15be8fc467f60a8fbbd6f2529"
 }