@neo4j-ndl/react 2.7.2 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Change Log
2
2
 
3
+ ## 2.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#739](https://github.com/neo4j/needle/pull/739) [`c821cdc49a6a37e7745887a88b3237ea3ccdf567`](https://github.com/neo4j/needle/commit/c821cdc49a6a37e7745887a88b3237ea3ccdf567) Thanks [@konsalex](https://github.com/konsalex)! - new InlineEdit component
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`c821cdc49a6a37e7745887a88b3237ea3ccdf567`](https://github.com/neo4j/needle/commit/c821cdc49a6a37e7745887a88b3237ea3ccdf567)]:
12
+ - @neo4j-ndl/base@2.7.0
13
+
3
14
  ## 2.7.2
4
15
 
5
16
  ### Patch Changes
package/lib/cjs/index.js CHANGED
@@ -76,4 +76,5 @@ __exportStar(require("./avatar"), exports);
76
76
  __exportStar(require("./logo"), exports);
77
77
  __exportStar(require("./clipboard-copier"), exports);
78
78
  __exportStar(require("./slider"), exports);
79
+ __exportStar(require("./inline-edit"), exports);
79
80
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,8CAA4B;AAC5B,2CAAyB;AACzB,0CAAwB;AACxB,2CAAyB;AACzB,wCAAsB;AACtB,6CAA2B;AAC3B,2CAAyB;AACzB,0CAAwB;AACxB,iDAA+B;AAC/B,gDAA8B;AAC9B,2CAAyB;AACzB,0CAAwB;AACxB,oDAAkC;AAClC,yCAAuB;AACvB,sDAAoC;AACpC,4CAA0B;AAC1B,iDAA+B;AAC/B,0CAAwB;AACxB,6CAA2B;AAC3B,8CAA4B;AAC5B,+CAA6B;AAC7B,6CAA2B;AAC3B,8CAA4B;AAC5B,6CAA2B;AAC3B,wCAAsB;AACtB,0CAAwB;AACxB,2CAAyB;AACzB,2CAAyB;AACzB,gDAA8B;AAC9B,+CAA6B;AAC7B,sDAAoC;AACpC,qDAAmC;AACnC,oDAAkC;AAClC,+CAA6B;AAC7B,2CAAyB;AACzB,gDAA8B;AAC9B,0CAAwB;AACxB,2CAAyB;AACzB,2CAAyB;AACzB,yCAAuB;AACvB,qDAAmC;AACnC,2CAAyB"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,8CAA4B;AAC5B,2CAAyB;AACzB,0CAAwB;AACxB,2CAAyB;AACzB,wCAAsB;AACtB,6CAA2B;AAC3B,2CAAyB;AACzB,0CAAwB;AACxB,iDAA+B;AAC/B,gDAA8B;AAC9B,2CAAyB;AACzB,0CAAwB;AACxB,oDAAkC;AAClC,yCAAuB;AACvB,sDAAoC;AACpC,4CAA0B;AAC1B,iDAA+B;AAC/B,0CAAwB;AACxB,6CAA2B;AAC3B,8CAA4B;AAC5B,+CAA6B;AAC7B,6CAA2B;AAC3B,8CAA4B;AAC5B,6CAA2B;AAC3B,wCAAsB;AACtB,0CAAwB;AACxB,2CAAyB;AACzB,2CAAyB;AACzB,gDAA8B;AAC9B,+CAA6B;AAC7B,sDAAoC;AACpC,qDAAmC;AACnC,oDAAkC;AAClC,+CAA6B;AAC7B,2CAAyB;AACzB,gDAA8B;AAC9B,0CAAwB;AACxB,2CAAyB;AACzB,2CAAyB;AACzB,yCAAuB;AACvB,qDAAmC;AACnC,2CAAyB;AACzB,gDAA8B"}
@@ -0,0 +1,154 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ Object.defineProperty(exports, "__esModule", { value: true });
12
+ const jsx_runtime_1 = require("react/jsx-runtime");
13
+ /**
14
+ *
15
+ * Copyright (c) "Neo4j"
16
+ * Neo4j Sweden AB [http://neo4j.com]
17
+ *
18
+ * This file is part of Neo4j.
19
+ *
20
+ * Neo4j is free software: you can redistribute it and/or modify
21
+ * it under the terms of the GNU General Public License as published by
22
+ * the Free Software Foundation, either version 3 of the License, or
23
+ * (at your option) any later version.
24
+ *
25
+ * This program is distributed in the hope that it will be useful,
26
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
27
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
28
+ * GNU General Public License for more details.
29
+ *
30
+ * You should have received a copy of the GNU General Public License
31
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
32
+ */
33
+ const react_1 = require("react");
34
+ const react_aria_1 = require("react-aria");
35
+ const defaultImports_1 = require("../_common/defaultImports");
36
+ const typography_1 = require("../typography");
37
+ const base_1 = require("@neo4j-ndl/base");
38
+ const icons_1 = require("../icons");
39
+ const button_1 = require("../button");
40
+ const tip_1 = require("../tip");
41
+ const utils_1 = require("../_common/utils");
42
+ function getErrorIconSize(variant) {
43
+ switch (variant) {
44
+ case 'h1':
45
+ case 'h2':
46
+ return '24';
47
+ case 'h3':
48
+ case 'h4':
49
+ return '20';
50
+ default:
51
+ return '16';
52
+ }
53
+ }
54
+ function isTypescalePropertyObj(obj) {
55
+ return Boolean(obj && typeof obj === 'object' && ('lineHeight' in obj));
56
+ }
57
+ function getMinHeight(variant) {
58
+ let key;
59
+ switch (variant) {
60
+ case 'h1':
61
+ case 'h2':
62
+ case 'h3':
63
+ case 'h4':
64
+ case 'h5':
65
+ case 'h6':
66
+ key = variant;
67
+ break;
68
+ default:
69
+ key = `n-${variant}`;
70
+ break;
71
+ }
72
+ const value = base_1.typescale[key][1];
73
+ if (isTypescalePropertyObj(value)) {
74
+ return value.lineHeight;
75
+ }
76
+ // Subheading medium is the default, will never reach here,
77
+ // just to satisfy the TS compiler
78
+ return '1.5rem';
79
+ }
80
+ const InlineEdit = (0, react_1.forwardRef)(function InlineEdit(props, ref) {
81
+ const { label, defaultValue, variant = 'subheading-medium', isEditing = undefined, onConfirm, onCancel, errorText, hasEditIcon, isDisabled = false, inputProps = {}, typographyProps = {}, isCancellingOnBlur = false, validate, } = props;
82
+ const [hasEditMode, setEditMode] = (0, react_1.useState)(false);
83
+ const [internalErrorText, setErrorText] = (0, react_1.useState)(errorText);
84
+ const [value, setValue] = (0, react_1.useState)(defaultValue);
85
+ (0, react_1.useEffect)(() => {
86
+ // Reset the value if the default value changes
87
+ setValue(defaultValue);
88
+ }, [defaultValue]);
89
+ const iconSize = base_1.tokens.font.size[variant];
90
+ const hasError = Boolean(internalErrorText);
91
+ const hasLabel = Boolean(label);
92
+ const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
93
+ onBlurWithin: () => {
94
+ if (isCancellingOnBlur) {
95
+ onCancelHandler();
96
+ }
97
+ },
98
+ });
99
+ const resetToDefaults = (0, react_1.useCallback)(() => {
100
+ setValue(defaultValue);
101
+ setErrorText(undefined);
102
+ setEditMode(false);
103
+ }, [defaultValue]);
104
+ const onConfirmHandler = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
105
+ if (validate) {
106
+ const validation = validate(value);
107
+ let isValid;
108
+ if (validation instanceof Promise) {
109
+ isValid = yield validation;
110
+ }
111
+ else {
112
+ isValid = validation;
113
+ }
114
+ if (typeof isValid === 'string') {
115
+ setErrorText(isValid);
116
+ return;
117
+ }
118
+ }
119
+ onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(value);
120
+ resetToDefaults();
121
+ }), [onConfirm, validate, value, resetToDefaults]);
122
+ const onCancelHandler = (0, react_1.useCallback)(() => {
123
+ onCancel === null || onCancel === void 0 ? void 0 : onCancel();
124
+ resetToDefaults();
125
+ }, [onCancel, resetToDefaults]);
126
+ const inputID = (0, react_1.useMemo)(() => {
127
+ return inputProps.id || (0, utils_1.randomId)(12);
128
+ }, [inputProps.id]);
129
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, focusWithinProps, { className: (0, defaultImports_1.classNames)(`n-${variant} ndl-inline-edit`, {
130
+ 'ndl-disabled': isDisabled,
131
+ }), ref: ref, children: [hasLabel && (0, jsx_runtime_1.jsx)("label", { htmlFor: inputID, children: label }), (isEditing !== null && isEditing !== void 0 ? isEditing : hasEditMode) ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, defaultImports_1.classNames)('ndl-inline-edit-container', {
132
+ 'ndl-inline-edit-error': hasError,
133
+ }), children: [(0, jsx_runtime_1.jsx)("input", Object.assign({
134
+ // eslint-disable-next-line jsx-a11y/no-autofocus
135
+ autoFocus: true, value: value, onChange: (e) => setValue(e.target.value), id: inputID }, inputProps, {
136
+ // Enforce line-height to be the same as the typography's line-height
137
+ className: (0, defaultImports_1.classNames)(`n-${variant}`, inputProps.className),
138
+ // Custom padding for avoiding icon overlap
139
+ style: Object.assign({ paddingRight: hasError
140
+ ? `${parseInt(getErrorIconSize(variant)) + 4}px`
141
+ : undefined }, (inputProps.style || {})) })), hasError && ((0, jsx_runtime_1.jsxs)(tip_1.Tip, { children: [(0, jsx_runtime_1.jsx)(tip_1.Tip.Trigger, { tabIndex: 0, children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, { "data-testid": "ndl-inline-edit-error-icon", "aria-label": "Error message", style: {
142
+ width: `${getErrorIconSize(variant)}px`,
143
+ height: `${getErrorIconSize(variant)}px`,
144
+ }, className: "ndl-inline-edit-error-icon" }) }), (0, jsx_runtime_1.jsx)(tip_1.Tip.Content, { children: internalErrorText })] })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-inline-edit-buttons", children: [(0, jsx_runtime_1.jsx)(button_1.IconButton, { "data-testid": "ndl-confirm-button", "aria-label": "Accept input's value change", onClick: onConfirmHandler, size: "small", floating: true, children: (0, jsx_runtime_1.jsx)(icons_1.CheckIconOutline, {}) }), (0, jsx_runtime_1.jsx)(button_1.IconButton, { "data-testid": "ndl-cancel-button", "aria-label": "Ignore input's value change", onClick: onCancelHandler, size: "small", floating: true, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: (0, defaultImports_1.classNames)('ndl-inline-idle-container', {
145
+ 'ndl-inline-idle-container-disabled': isDisabled,
146
+ }), style: {
147
+ minHeight: getMinHeight(variant),
148
+ }, onClick: () => !isDisabled && setEditMode(!hasEditMode), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ className: (0, defaultImports_1.classNames)(typographyProps.className, {}) }, typographyProps, { variant: variant, children: defaultValue })), hasEditIcon && ((0, jsx_runtime_1.jsx)(icons_1.PencilIconOutline, { style: {
149
+ width: iconSize,
150
+ height: iconSize,
151
+ } }))] }))] }), defaultValue));
152
+ });
153
+ exports.default = InlineEdit;
154
+ //# sourceMappingURL=InlineEdit.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ /**
3
+ *
4
+ * Copyright (c) "Neo4j"
5
+ * Neo4j Sweden AB [http://neo4j.com]
6
+ *
7
+ * This file is part of Neo4j.
8
+ *
9
+ * Neo4j is free software: you can redistribute it and/or modify
10
+ * it under the terms of the GNU General Public License as published by
11
+ * the Free Software Foundation, either version 3 of the License, or
12
+ * (at your option) any later version.
13
+ *
14
+ * This program is distributed in the hope that it will be useful,
15
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
16
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
17
+ * GNU General Public License for more details.
18
+ *
19
+ * You should have received a copy of the GNU General Public License
20
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
21
+ */
22
+ var __importDefault = (this && this.__importDefault) || function (mod) {
23
+ return (mod && mod.__esModule) ? mod : { "default": mod };
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.InlineEdit = void 0;
27
+ var InlineEdit_1 = require("./InlineEdit");
28
+ Object.defineProperty(exports, "InlineEdit", { enumerable: true, get: function () { return __importDefault(InlineEdit_1).default; } });
29
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/inline-edit/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2CAAqD;AAA5C,yHAAA,OAAO,OAAc"}
package/lib/esm/index.js CHANGED
@@ -60,4 +60,5 @@ export * from './avatar';
60
60
  export * from './logo';
61
61
  export * from './clipboard-copier';
62
62
  export * from './slider';
63
+ export * from './inline-edit';
63
64
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}
@@ -0,0 +1,152 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
+ /**
12
+ *
13
+ * Copyright (c) "Neo4j"
14
+ * Neo4j Sweden AB [http://neo4j.com]
15
+ *
16
+ * This file is part of Neo4j.
17
+ *
18
+ * Neo4j is free software: you can redistribute it and/or modify
19
+ * it under the terms of the GNU General Public License as published by
20
+ * the Free Software Foundation, either version 3 of the License, or
21
+ * (at your option) any later version.
22
+ *
23
+ * This program is distributed in the hope that it will be useful,
24
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
25
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
26
+ * GNU General Public License for more details.
27
+ *
28
+ * You should have received a copy of the GNU General Public License
29
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
30
+ */
31
+ import { forwardRef, useState, useCallback, useEffect, useMemo, } from 'react';
32
+ import { useFocusWithin } from 'react-aria';
33
+ import { classNames } from '../_common/defaultImports';
34
+ import { Typography } from '../typography';
35
+ import { tokens, typescale } from '@neo4j-ndl/base';
36
+ import { CheckIconOutline, ExclamationCircleIconSolid, PencilIconOutline, XMarkIconOutline, } from '../icons';
37
+ import { IconButton } from '../button';
38
+ import { Tip } from '../tip';
39
+ import { randomId } from '../_common/utils';
40
+ function getErrorIconSize(variant) {
41
+ switch (variant) {
42
+ case 'h1':
43
+ case 'h2':
44
+ return '24';
45
+ case 'h3':
46
+ case 'h4':
47
+ return '20';
48
+ default:
49
+ return '16';
50
+ }
51
+ }
52
+ function isTypescalePropertyObj(obj) {
53
+ return Boolean(obj && typeof obj === 'object' && ('lineHeight' in obj));
54
+ }
55
+ function getMinHeight(variant) {
56
+ let key;
57
+ switch (variant) {
58
+ case 'h1':
59
+ case 'h2':
60
+ case 'h3':
61
+ case 'h4':
62
+ case 'h5':
63
+ case 'h6':
64
+ key = variant;
65
+ break;
66
+ default:
67
+ key = `n-${variant}`;
68
+ break;
69
+ }
70
+ const value = typescale[key][1];
71
+ if (isTypescalePropertyObj(value)) {
72
+ return value.lineHeight;
73
+ }
74
+ // Subheading medium is the default, will never reach here,
75
+ // just to satisfy the TS compiler
76
+ return '1.5rem';
77
+ }
78
+ const InlineEdit = forwardRef(function InlineEdit(props, ref) {
79
+ const { label, defaultValue, variant = 'subheading-medium', isEditing = undefined, onConfirm, onCancel, errorText, hasEditIcon, isDisabled = false, inputProps = {}, typographyProps = {}, isCancellingOnBlur = false, validate, } = props;
80
+ const [hasEditMode, setEditMode] = useState(false);
81
+ const [internalErrorText, setErrorText] = useState(errorText);
82
+ const [value, setValue] = useState(defaultValue);
83
+ useEffect(() => {
84
+ // Reset the value if the default value changes
85
+ setValue(defaultValue);
86
+ }, [defaultValue]);
87
+ const iconSize = tokens.font.size[variant];
88
+ const hasError = Boolean(internalErrorText);
89
+ const hasLabel = Boolean(label);
90
+ const { focusWithinProps } = useFocusWithin({
91
+ onBlurWithin: () => {
92
+ if (isCancellingOnBlur) {
93
+ onCancelHandler();
94
+ }
95
+ },
96
+ });
97
+ const resetToDefaults = useCallback(() => {
98
+ setValue(defaultValue);
99
+ setErrorText(undefined);
100
+ setEditMode(false);
101
+ }, [defaultValue]);
102
+ const onConfirmHandler = useCallback(() => __awaiter(this, void 0, void 0, function* () {
103
+ if (validate) {
104
+ const validation = validate(value);
105
+ let isValid;
106
+ if (validation instanceof Promise) {
107
+ isValid = yield validation;
108
+ }
109
+ else {
110
+ isValid = validation;
111
+ }
112
+ if (typeof isValid === 'string') {
113
+ setErrorText(isValid);
114
+ return;
115
+ }
116
+ }
117
+ onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(value);
118
+ resetToDefaults();
119
+ }), [onConfirm, validate, value, resetToDefaults]);
120
+ const onCancelHandler = useCallback(() => {
121
+ onCancel === null || onCancel === void 0 ? void 0 : onCancel();
122
+ resetToDefaults();
123
+ }, [onCancel, resetToDefaults]);
124
+ const inputID = useMemo(() => {
125
+ return inputProps.id || randomId(12);
126
+ }, [inputProps.id]);
127
+ return (_jsxs("div", Object.assign({}, focusWithinProps, { className: classNames(`n-${variant} ndl-inline-edit`, {
128
+ 'ndl-disabled': isDisabled,
129
+ }), ref: ref, children: [hasLabel && _jsx("label", { htmlFor: inputID, children: label }), (isEditing !== null && isEditing !== void 0 ? isEditing : hasEditMode) ? (_jsxs("div", { className: classNames('ndl-inline-edit-container', {
130
+ 'ndl-inline-edit-error': hasError,
131
+ }), children: [_jsx("input", Object.assign({
132
+ // eslint-disable-next-line jsx-a11y/no-autofocus
133
+ autoFocus: true, value: value, onChange: (e) => setValue(e.target.value), id: inputID }, inputProps, {
134
+ // Enforce line-height to be the same as the typography's line-height
135
+ className: classNames(`n-${variant}`, inputProps.className),
136
+ // Custom padding for avoiding icon overlap
137
+ style: Object.assign({ paddingRight: hasError
138
+ ? `${parseInt(getErrorIconSize(variant)) + 4}px`
139
+ : undefined }, (inputProps.style || {})) })), hasError && (_jsxs(Tip, { children: [_jsx(Tip.Trigger, { tabIndex: 0, children: _jsx(ExclamationCircleIconSolid, { "data-testid": "ndl-inline-edit-error-icon", "aria-label": "Error message", style: {
140
+ width: `${getErrorIconSize(variant)}px`,
141
+ height: `${getErrorIconSize(variant)}px`,
142
+ }, className: "ndl-inline-edit-error-icon" }) }), _jsx(Tip.Content, { children: internalErrorText })] })), _jsxs("div", { className: "ndl-inline-edit-buttons", children: [_jsx(IconButton, { "data-testid": "ndl-confirm-button", "aria-label": "Accept input's value change", onClick: onConfirmHandler, size: "small", floating: true, children: _jsx(CheckIconOutline, {}) }), _jsx(IconButton, { "data-testid": "ndl-cancel-button", "aria-label": "Ignore input's value change", onClick: onCancelHandler, size: "small", floating: true, children: _jsx(XMarkIconOutline, {}) })] })] })) : (_jsxs("button", { className: classNames('ndl-inline-idle-container', {
143
+ 'ndl-inline-idle-container-disabled': isDisabled,
144
+ }), style: {
145
+ minHeight: getMinHeight(variant),
146
+ }, onClick: () => !isDisabled && setEditMode(!hasEditMode), children: [_jsx(Typography, Object.assign({ className: classNames(typographyProps.className, {}) }, typographyProps, { variant: variant, children: defaultValue })), hasEditIcon && (_jsx(PencilIconOutline, { style: {
147
+ width: iconSize,
148
+ height: iconSize,
149
+ } }))] }))] }), defaultValue));
150
+ });
151
+ export default InlineEdit;
152
+ //# sourceMappingURL=InlineEdit.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../src/inline-edit/InlineEdit.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAKL,UAAU,EACV,QAAQ,EACR,WAAW,EACX,SAAS,EACT,OAAO,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyE5C,SAAS,gBAAgB,CAAC,OAA2B;IACnD,QAAQ,OAAO,EAAE;QACf,KAAK,IAAI,CAAC;QACV,KAAK,IAAI;YACP,OAAO,IAAI,CAAC;QACd,KAAK,IAAI,CAAC;QACV,KAAK,IAAI;YACP,OAAO,IAAI,CAAC;QACd;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC;AAED,SAAS,sBAAsB,CAAC,GAAY;IAC1C,OAAO,OAAO,CACZ,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAK,CAAC,YAAY,IAAI,GAAG,CAAa,CACrE,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,OAA2B;IAC/C,IAAI,GAA2B,CAAC;IAChC,QAAQ,OAAO,EAAE;QACf,KAAK,IAAI,CAAC;QACV,KAAK,IAAI,CAAC;QACV,KAAK,IAAI,CAAC;QACV,KAAK,IAAI,CAAC;QACV,KAAK,IAAI,CAAC;QACV,KAAK,IAAI;YACP,GAAG,GAAG,OAAO,CAAC;YACd,MAAM;QACR;YACE,GAAG,GAAG,KAAK,OAAO,EAAE,CAAC;YACrB,MAAM;KACT;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhC,IAAI,sBAAsB,CAAC,KAAK,CAAC,EAAE;QACjC,OAAO,KAAK,CAAC,UAAU,CAAC;KACzB;IAED,2DAA2D;IAC3D,kCAAkC;IAClC,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,UAAU,CAC/C,KAAsB,EACtB,GAAiC;IAEjC,MAAM,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,GAAG,mBAAmB,EAC7B,SAAS,GAAG,SAAS,EACrB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,EAAE,EACf,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,KAAK,EAC1B,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAAG,QAAQ,CAChD,SAAS,CACV,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,+CAA+C;QAC/C,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC;QAC1C,YAAY,EAAE,GAAG,EAAE;YACjB,IAAI,kBAAkB,EAAE;gBACtB,eAAe,EAAE,CAAC;aACnB;QACH,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,QAAQ,CAAC,YAAY,CAAC,CAAC;QACvB,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAS,EAAE;QAC9C,IAAI,QAAQ,EAAE;YACZ,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;YAEnC,IAAI,OAAyB,CAAC;YAC9B,IAAI,UAAU,YAAY,OAAO,EAAE;gBACjC,OAAO,GAAG,MAAM,UAAU,CAAC;aAC5B;iBAAM;gBACL,OAAO,GAAG,UAAU,CAAC;aACtB;YAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;gBAC/B,YAAY,CAAC,OAAO,CAAC,CAAC;gBACtB,OAAO;aACR;SACF;QAED,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,CAAC,CAAC;QACnB,eAAe,EAAE,CAAC;IACpB,CAAC,CAAA,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;QACb,eAAe,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,UAAU,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,+BAEM,gBAAgB,IACpB,SAAS,EAAE,UAAU,CAAC,KAAK,OAAO,kBAAkB,EAAE;YACpD,cAAc,EAAE,UAAU;SAC3B,CAAC,EACF,GAAG,EAAE,GAAG,aAEP,QAAQ,IAAI,gBAAO,OAAO,EAAE,OAAO,YAAG,KAAK,GAAS,EACpD,CAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,WAAW,EAAC,CAAC,CAAC,CAC1B,eACE,SAAS,EAAE,UAAU,CAAC,2BAA2B,EAAE;oBACjD,uBAAuB,EAAE,QAAQ;iBAClC,CAAC,aAEF;wBACE,iDAAiD;wBACjD,SAAS,QACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,EAAE,EAAE,OAAO,IACP,UAAU;wBACd,qEAAqE;wBACrE,SAAS,EAAE,UAAU,CAAC,KAAK,OAAO,EAAE,EAAE,UAAU,CAAC,SAAS,CAAC;wBAC3D,2CAA2C;wBAC3C,KAAK,kBACH,YAAY,EAAE,QAAQ;gCACpB,CAAC,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI;gCAChD,CAAC,CAAC,SAAS,IACV,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC,KAE7B,EACD,QAAQ,IAAI,CACX,MAAC,GAAG,eACF,KAAC,GAAG,CAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,YACtB,KAAC,0BAA0B,mBACb,4BAA4B,gBAC7B,eAAe,EAC1B,KAAK,EAAE;wCACL,KAAK,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,IAAI;wCACvC,MAAM,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,IAAI;qCACzC,EACD,SAAS,EAAC,4BAA4B,GACtC,GACU,EACd,KAAC,GAAG,CAAC,OAAO,cAAE,iBAAiB,GAAe,IAC1C,CACP,EACD,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,UAAU,mBACG,oBAAoB,gBACrB,6BAA6B,EACxC,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAC,OAAO,EACZ,QAAQ,kBAER,KAAC,gBAAgB,KAAG,GACT,EACb,KAAC,UAAU,mBACG,mBAAmB,gBACpB,6BAA6B,EACxC,OAAO,EAAE,eAAe,EACxB,IAAI,EAAC,OAAO,EACZ,QAAQ,kBAER,KAAC,gBAAgB,KAAG,GACT,IACT,IACF,CACP,CAAC,CAAC,CAAC,CACF,kBACE,SAAS,EAAE,UAAU,CAAC,2BAA2B,EAAE;oBACjD,oCAAoC,EAAE,UAAU;iBACjD,CAAC,EACF,KAAK,EAAE;oBACL,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC;iBACjC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,WAAW,CAAC,CAAC,WAAW,CAAC,aAEvD,KAAC,UAAU,kBACT,SAAS,EAAE,UAAU,CAAC,eAAe,CAAC,SAAS,EAAE,EAAE,CAAC,IAChD,eAAe,IACnB,OAAO,EAAE,OAAO,YAEf,YAAY,IACF,EACZ,WAAW,IAAI,CACd,KAAC,iBAAiB,IAChB,KAAK,EAAE;4BACL,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,QAAQ;yBACjB,GACD,CACH,IACM,CACV,MA9FI,YAAY,CA+Fb,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -0,0 +1,22 @@
1
+ /**
2
+ *
3
+ * Copyright (c) "Neo4j"
4
+ * Neo4j Sweden AB [http://neo4j.com]
5
+ *
6
+ * This file is part of Neo4j.
7
+ *
8
+ * Neo4j is free software: you can redistribute it and/or modify
9
+ * it under the terms of the GNU General Public License as published by
10
+ * the Free Software Foundation, either version 3 of the License, or
11
+ * (at your option) any later version.
12
+ *
13
+ * This program is distributed in the hope that it will be useful,
14
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
15
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16
+ * GNU General Public License for more details.
17
+ *
18
+ * You should have received a copy of the GNU General Public License
19
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
20
+ */
21
+ export { default as InlineEdit } from './InlineEdit';
22
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/inline-edit/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
@@ -60,3 +60,4 @@ export * from './avatar';
60
60
  export * from './logo';
61
61
  export * from './clipboard-copier';
62
62
  export * from './slider';
63
+ export * from './inline-edit';
@@ -0,0 +1,83 @@
1
+ /**
2
+ *
3
+ * Copyright (c) "Neo4j"
4
+ * Neo4j Sweden AB [http://neo4j.com]
5
+ *
6
+ * This file is part of Neo4j.
7
+ *
8
+ * Neo4j is free software: you can redistribute it and/or modify
9
+ * it under the terms of the GNU General Public License as published by
10
+ * the Free Software Foundation, either version 3 of the License, or
11
+ * (at your option) any later version.
12
+ *
13
+ * This program is distributed in the hope that it will be useful,
14
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
15
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16
+ * GNU General Public License for more details.
17
+ *
18
+ * You should have received a copy of the GNU General Public License
19
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
20
+ */
21
+ import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode } from 'react';
22
+ import { type TooltipObjectProps } from '../_common/input/types';
23
+ import { Typography } from '../typography';
24
+ import { type TypographyVariants } from '../typography/types';
25
+ export interface InlineEditProps {
26
+ /** Label text */
27
+ label?: ReactNode;
28
+ /**
29
+ * The variant of the typography component
30
+ * @default subheading-medium
31
+ */
32
+ variant?: TypographyVariants;
33
+ /**
34
+ * The default user input/value.
35
+ * This value is updated and saved by onConfirm.
36
+ */
37
+ defaultValue: string;
38
+ /**
39
+ * @default false
40
+ */
41
+ isDisabled?: boolean;
42
+ /**
43
+ * Error message to be displayed
44
+ * This can also be provided by the validation callback
45
+ * @default undefined
46
+ */
47
+ errorText?: ReactNode;
48
+ /**
49
+ * If edit pencil icon will be visible
50
+ * @default false
51
+ */
52
+ hasEditIcon?: boolean;
53
+ /**
54
+ * If the input is in editing mode
55
+ * Used in a stateless inline edit
56
+ * @default undefined
57
+ */
58
+ isEditing?: boolean;
59
+ /** Callback when confirm icon button is pressed */
60
+ onConfirm?: (value: string) => void;
61
+ /** Callback when cancel icon button is pressed */
62
+ onCancel?: () => void;
63
+ /**
64
+ * If the input should close on blur
65
+ * @default false
66
+ */
67
+ isCancellingOnBlur?: boolean;
68
+ /**
69
+ * Custom validation callback.
70
+ * If provided:
71
+ * 2. The string value will be displayed if the callback returns a string
72
+ * 3. The onConfirm callback will not be called if the callback returns `true`
73
+ */
74
+ validate?: (value: string) => Promise<true | string> | true | string;
75
+ /** Pass props to the underlying Tip component in error states (use with caution) */
76
+ tooltipProps?: TooltipObjectProps;
77
+ /** Edit's input props */
78
+ inputProps?: InputHTMLAttributes<HTMLInputElement>;
79
+ /** View mode Typography's props */
80
+ typographyProps?: ComponentPropsWithoutRef<typeof Typography>;
81
+ }
82
+ declare const InlineEdit: import("react").ForwardRefExoticComponent<InlineEditProps & import("react").RefAttributes<HTMLDivElement>>;
83
+ export default InlineEdit;
@@ -0,0 +1,21 @@
1
+ /**
2
+ *
3
+ * Copyright (c) "Neo4j"
4
+ * Neo4j Sweden AB [http://neo4j.com]
5
+ *
6
+ * This file is part of Neo4j.
7
+ *
8
+ * Neo4j is free software: you can redistribute it and/or modify
9
+ * it under the terms of the GNU General Public License as published by
10
+ * the Free Software Foundation, either version 3 of the License, or
11
+ * (at your option) any later version.
12
+ *
13
+ * This program is distributed in the hope that it will be useful,
14
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
15
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16
+ * GNU General Public License for more details.
17
+ *
18
+ * You should have received a copy of the GNU General Public License
19
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
20
+ */
21
+ export { default as InlineEdit } from './InlineEdit';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/react",
3
- "version": "2.7.2",
3
+ "version": "2.8.0",
4
4
  "sideEffects": false,
5
5
  "description": "React implementation of Neo4j Design System",
6
6
  "keywords": [
@@ -93,7 +93,7 @@
93
93
  "@floating-ui/react": "0.25.1",
94
94
  "@heroicons/react": "2.0.13",
95
95
  "@neo4j-cypher/react-codemirror": "^1.0.1",
96
- "@neo4j-ndl/base": "^2.6.1",
96
+ "@neo4j-ndl/base": "^2.7.0",
97
97
  "@table-nav/core": "0.0.7",
98
98
  "@table-nav/react": "0.0.7",
99
99
  "@tanstack/react-table": "^8.9.3",