@atlaskit/inline-edit 12.2.2 → 12.2.4
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 +12 -0
- package/codemods/migrates/lift-InlineEditStateless-to-default.ts +44 -46
- package/codemods/migrates/lift-InlineEditableTextField-to-its-entry-point.ts +35 -37
- package/dist/cjs/inline-edit.js +1 -1
- package/dist/cjs/internal/read-view.js +4 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/inline-edit.js +1 -1
- package/dist/es2019/internal/read-view.js +4 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/inline-edit.js +1 -1
- package/dist/esm/internal/read-view.js +4 -2
- package/dist/esm/version.json +1 -1
- package/package.json +11 -16
- package/report.api.md +30 -52
- package/dist/types-ts4.0/entry-points/inline-edit.d.ts +0 -1
- package/dist/types-ts4.0/entry-points/inline-editable-textfield.d.ts +0 -1
- package/dist/types-ts4.0/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.0/index.d.ts +0 -3
- package/dist/types-ts4.0/inline-edit.d.ts +0 -4
- package/dist/types-ts4.0/inline-editable-textfield.d.ts +0 -5
- package/dist/types-ts4.0/internal/buttons.d.ts +0 -13
- package/dist/types-ts4.0/internal/constants.d.ts +0 -3
- package/dist/types-ts4.0/internal/hooks/use-button-focus-hook.d.ts +0 -8
- package/dist/types-ts4.0/internal/read-view.d.ts +0 -13
- package/dist/types-ts4.0/types.d.ts +0 -68
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/inline-edit
|
|
2
2
|
|
|
3
|
+
## 12.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 12.2.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
|
|
14
|
+
|
|
3
15
|
## 12.2.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -12,58 +12,56 @@ const commentMessage = `We could not automatically convert this code to the new
|
|
|
12
12
|
This file uses \`InlineEdit\` and \`InlineEditStateless\` at the same time. We've merged these two types since version 12.0.0, and please use the merged version instead.
|
|
13
13
|
`;
|
|
14
14
|
|
|
15
|
-
const elevateComponentToDefault =
|
|
16
|
-
pkg: string,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
(path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
|
|
24
|
-
);
|
|
15
|
+
const elevateComponentToDefault =
|
|
16
|
+
(pkg: string, toPkg: string, innerElementName: string) =>
|
|
17
|
+
(j: core.JSCodeshift, root: any) => {
|
|
18
|
+
const importDeclarations = root
|
|
19
|
+
.find(j.ImportDeclaration)
|
|
20
|
+
.filter(
|
|
21
|
+
(path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
|
|
22
|
+
);
|
|
25
23
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
const defaultSpecifier = importDeclarations
|
|
25
|
+
.find(j.ImportDefaultSpecifier)
|
|
26
|
+
.nodes();
|
|
27
|
+
const otherSpecifier = importDeclarations.find(j.ImportSpecifier).nodes();
|
|
30
28
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
const isImportingStateless =
|
|
30
|
+
otherSpecifier.filter(
|
|
31
|
+
(s: ImportSpecifier) =>
|
|
32
|
+
s.imported && s.imported.name === innerElementName,
|
|
33
|
+
).length > 0;
|
|
36
34
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
if (defaultSpecifier.length > 0 && isImportingStateless) {
|
|
36
|
+
addCommentToStartOfFile({ j, base: root, message: commentMessage });
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
41
39
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
const newDefaultSpecifier = defaultSpecifier.map(
|
|
41
|
+
(s: ImportDefaultSpecifier) => {
|
|
42
|
+
return j.importDeclaration(
|
|
43
|
+
[j.importDefaultSpecifier(s.local)],
|
|
44
|
+
j.literal(pkg),
|
|
45
|
+
);
|
|
46
|
+
},
|
|
47
|
+
);
|
|
50
48
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
49
|
+
const newOtherSpecifiers = otherSpecifier.map((s: ImportSpecifier) => {
|
|
50
|
+
if (s.imported.name === innerElementName) {
|
|
51
|
+
return j.importDeclaration(
|
|
52
|
+
[j.importDefaultSpecifier(s.local)],
|
|
53
|
+
j.literal(toPkg),
|
|
54
|
+
);
|
|
55
|
+
} else {
|
|
56
|
+
return j.importDeclaration([s], j.literal(pkg));
|
|
57
|
+
}
|
|
58
|
+
});
|
|
61
59
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
};
|
|
60
|
+
importDeclarations.forEach((path: ASTPath<ImportDeclaration>) => {
|
|
61
|
+
j(path).replaceWith(newDefaultSpecifier);
|
|
62
|
+
j(path).insertBefore(newOtherSpecifiers);
|
|
63
|
+
});
|
|
64
|
+
};
|
|
67
65
|
|
|
68
66
|
export default elevateComponentToDefault(
|
|
69
67
|
'@atlaskit/inline-edit',
|
|
@@ -5,47 +5,45 @@ import core, {
|
|
|
5
5
|
ImportSpecifier,
|
|
6
6
|
} from 'jscodeshift';
|
|
7
7
|
|
|
8
|
-
const elevateComponentToNewEntryPoint =
|
|
9
|
-
pkg: string,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
(path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
|
|
17
|
-
);
|
|
8
|
+
const elevateComponentToNewEntryPoint =
|
|
9
|
+
(pkg: string, toPkg: string, innerElementName: string) =>
|
|
10
|
+
(j: core.JSCodeshift, root: any) => {
|
|
11
|
+
const importDeclarations = root
|
|
12
|
+
.find(j.ImportDeclaration)
|
|
13
|
+
.filter(
|
|
14
|
+
(path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
|
|
15
|
+
);
|
|
18
16
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
const defaultSpecifier = importDeclarations
|
|
18
|
+
.find(j.ImportDefaultSpecifier)
|
|
19
|
+
.nodes();
|
|
20
|
+
const otherSpecifier = importDeclarations.find(j.ImportSpecifier).nodes();
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
const newDefaultSpecifier = defaultSpecifier.map(
|
|
23
|
+
(s: ImportDefaultSpecifier) => {
|
|
24
|
+
return j.importDeclaration(
|
|
25
|
+
[j.importDefaultSpecifier(s.local)],
|
|
26
|
+
j.literal(pkg),
|
|
27
|
+
);
|
|
28
|
+
},
|
|
29
|
+
);
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
const newOtherSpecifiers = otherSpecifier.map((s: ImportSpecifier) => {
|
|
32
|
+
if (s.imported.name === innerElementName) {
|
|
33
|
+
return j.importDeclaration(
|
|
34
|
+
[j.importDefaultSpecifier(s.local)],
|
|
35
|
+
j.literal(toPkg),
|
|
36
|
+
);
|
|
37
|
+
} else {
|
|
38
|
+
return j.importDeclaration([s], j.literal(pkg));
|
|
39
|
+
}
|
|
40
|
+
});
|
|
43
41
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
};
|
|
42
|
+
importDeclarations.forEach((path: ASTPath<ImportDeclaration>) => {
|
|
43
|
+
j(path).replaceWith(newDefaultSpecifier);
|
|
44
|
+
j(path).insertBefore(newOtherSpecifiers);
|
|
45
|
+
});
|
|
46
|
+
};
|
|
49
47
|
|
|
50
48
|
export default elevateComponentToNewEntryPoint(
|
|
51
49
|
'@atlaskit/inline-edit',
|
package/dist/cjs/inline-edit.js
CHANGED
|
@@ -25,8 +25,10 @@ var readViewContainerStyles = (0, _react2.css)({
|
|
|
25
25
|
});
|
|
26
26
|
var editButtonStyles = (0, _react2.css)({
|
|
27
27
|
display: 'block',
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
// TODO Delete this comment after verifying spacing token -> previous value `'0'`
|
|
29
|
+
margin: "var(--ds-scale-0, 0px)",
|
|
30
|
+
// TODO Delete this comment after verifying spacing token -> previous value `'0'`
|
|
31
|
+
padding: "var(--ds-scale-0, 0px)",
|
|
30
32
|
appearance: 'none',
|
|
31
33
|
background: 'transparent',
|
|
32
34
|
border: 0,
|
package/dist/cjs/version.json
CHANGED
|
@@ -8,8 +8,10 @@ const readViewContainerStyles = css({
|
|
|
8
8
|
});
|
|
9
9
|
const editButtonStyles = css({
|
|
10
10
|
display: 'block',
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
// TODO Delete this comment after verifying spacing token -> previous value `'0'`
|
|
12
|
+
margin: "var(--ds-scale-0, 0px)",
|
|
13
|
+
// TODO Delete this comment after verifying spacing token -> previous value `'0'`
|
|
14
|
+
padding: "var(--ds-scale-0, 0px)",
|
|
13
15
|
appearance: 'none',
|
|
14
16
|
background: 'transparent',
|
|
15
17
|
border: 0,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/inline-edit.js
CHANGED
|
@@ -8,8 +8,10 @@ var readViewContainerStyles = css({
|
|
|
8
8
|
});
|
|
9
9
|
var editButtonStyles = css({
|
|
10
10
|
display: 'block',
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
// TODO Delete this comment after verifying spacing token -> previous value `'0'`
|
|
12
|
+
margin: "var(--ds-scale-0, 0px)",
|
|
13
|
+
// TODO Delete this comment after verifying spacing token -> previous value `'0'`
|
|
14
|
+
padding: "var(--ds-scale-0, 0px)",
|
|
13
15
|
appearance: 'none',
|
|
14
16
|
background: 'transparent',
|
|
15
17
|
border: 0,
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/inline-edit",
|
|
3
|
-
"version": "12.2.
|
|
3
|
+
"version": "12.2.4",
|
|
4
4
|
"description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,17 +12,11 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
">=4.0 <4.5": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.0/*"
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
15
|
"sideEffects": false,
|
|
23
16
|
"atlaskit:src": "src/index.ts",
|
|
24
17
|
"homepage": "https://atlassian.design/components/inline-edit/",
|
|
25
18
|
"atlassian": {
|
|
19
|
+
"disableProductCI": true,
|
|
26
20
|
"team": "Design System Team",
|
|
27
21
|
"releaseModel": "scheduled",
|
|
28
22
|
"website": {
|
|
@@ -32,14 +26,14 @@
|
|
|
32
26
|
},
|
|
33
27
|
"dependencies": {
|
|
34
28
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
35
|
-
"@atlaskit/button": "^16.
|
|
29
|
+
"@atlaskit/button": "^16.4.0",
|
|
36
30
|
"@atlaskit/codemod-utils": "^4.1.0",
|
|
37
|
-
"@atlaskit/form": "^8.
|
|
38
|
-
"@atlaskit/icon": "^21.
|
|
31
|
+
"@atlaskit/form": "^8.7.0",
|
|
32
|
+
"@atlaskit/icon": "^21.11.0",
|
|
39
33
|
"@atlaskit/inline-dialog": "^13.4.0",
|
|
40
|
-
"@atlaskit/textfield": "^5.
|
|
34
|
+
"@atlaskit/textfield": "^5.3.0",
|
|
41
35
|
"@atlaskit/theme": "^12.2.0",
|
|
42
|
-
"@atlaskit/tokens": "^0.
|
|
36
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
43
37
|
"@babel/runtime": "^7.0.0",
|
|
44
38
|
"@emotion/react": "^11.7.1"
|
|
45
39
|
},
|
|
@@ -47,14 +41,14 @@
|
|
|
47
41
|
"react": "^16.8.0"
|
|
48
42
|
},
|
|
49
43
|
"devDependencies": {
|
|
50
|
-
"@atlaskit/datetime-picker": "^12.
|
|
44
|
+
"@atlaskit/datetime-picker": "^12.3.0",
|
|
51
45
|
"@atlaskit/docs": "*",
|
|
52
|
-
"@atlaskit/section-message": "^6.
|
|
46
|
+
"@atlaskit/section-message": "^6.3.0",
|
|
53
47
|
"@atlaskit/select": "^15.7.0",
|
|
54
48
|
"@atlaskit/ssr": "*",
|
|
55
49
|
"@atlaskit/tag": "^11.4.0",
|
|
56
50
|
"@atlaskit/tag-group": "^10.1.0",
|
|
57
|
-
"@atlaskit/textarea": "^4.
|
|
51
|
+
"@atlaskit/textarea": "^4.5.0",
|
|
58
52
|
"@atlaskit/visual-regression": "*",
|
|
59
53
|
"@atlaskit/webdriver-runner": "*",
|
|
60
54
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
@@ -81,6 +75,7 @@
|
|
|
81
75
|
"dom-events": "use-bind-event-listener",
|
|
82
76
|
"ui-components": "lite-mode",
|
|
83
77
|
"analytics": "analytics-next",
|
|
78
|
+
"design-tokens": "spacing",
|
|
84
79
|
"theming": "tokens",
|
|
85
80
|
"deprecation": "no-deprecated-imports",
|
|
86
81
|
"styling": [
|
package/report.api.md
CHANGED
|
@@ -2,98 +2,76 @@
|
|
|
2
2
|
|
|
3
3
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
8
|
+
|
|
9
|
+
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
10
|
|
|
11
|
+
```ts
|
|
8
12
|
import { FieldProps } from '@atlaskit/form';
|
|
13
|
+
import { jsx } from '@emotion/react';
|
|
9
14
|
import { default as React_2 } from 'react';
|
|
10
15
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
11
16
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
12
17
|
|
|
13
|
-
|
|
14
|
-
|
|
18
|
+
// @public (undocumented)
|
|
19
|
+
interface CommonProps extends WithAnalyticsEventsProps {
|
|
15
20
|
analyticsContext?: Record<string, any>;
|
|
16
|
-
/** Accessibility label for the cancel action button. */
|
|
17
21
|
cancelButtonLabel?: string;
|
|
18
|
-
/** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
|
|
19
22
|
confirmButtonLabel?: string;
|
|
20
|
-
/** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
|
|
21
23
|
defaultValue: any;
|
|
22
|
-
|
|
24
|
+
editButtonLabel?: string;
|
|
25
|
+
hideActionButtons?: boolean;
|
|
26
|
+
isRequired?: boolean;
|
|
27
|
+
keepEditViewOpenOnBlur?: boolean;
|
|
23
28
|
label?: string;
|
|
24
|
-
|
|
29
|
+
onCancel?: () => void;
|
|
30
|
+
readViewFitContainerWidth?: boolean;
|
|
31
|
+
startWithEditViewOpen?: boolean;
|
|
25
32
|
validate?: (
|
|
26
33
|
value: any,
|
|
27
34
|
formState: {},
|
|
28
35
|
fieldState: {},
|
|
29
36
|
) => string | void | Promise<string | void>;
|
|
30
|
-
/**
|
|
31
|
-
* Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
|
|
32
|
-
* When set to true, inline edit stays in `editView` when blurred. */
|
|
33
|
-
keepEditViewOpenOnBlur?: boolean;
|
|
34
|
-
/** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
|
|
35
|
-
hideActionButtons?: boolean;
|
|
36
|
-
/** Determines whether the input value can be confirmed as empty. */
|
|
37
|
-
isRequired?: boolean;
|
|
38
|
-
/** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
|
|
39
|
-
readViewFitContainerWidth?: boolean;
|
|
40
|
-
/** Accessibility label for button, which is used to enter `editView` from keyboard. */
|
|
41
|
-
editButtonLabel?: string;
|
|
42
|
-
/** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
|
|
43
|
-
onCancel?: () => void;
|
|
44
|
-
/**
|
|
45
|
-
* Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
|
|
46
|
-
* starts in `editView`.
|
|
47
|
-
*/
|
|
48
|
-
startWithEditViewOpen?: boolean;
|
|
49
37
|
}
|
|
50
38
|
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
// @public (undocumented)
|
|
40
|
+
interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
|
|
41
|
+
// (undocumented)
|
|
53
42
|
errorMessage?: string | undefined;
|
|
54
43
|
}
|
|
55
44
|
|
|
56
|
-
|
|
45
|
+
// @public (undocumented)
|
|
46
|
+
const InlineEdit: <FieldValue extends unknown = string>(
|
|
57
47
|
props: InlineEditProps<FieldValue>,
|
|
58
|
-
) => JSX.Element;
|
|
48
|
+
) => jsx.JSX.Element;
|
|
59
49
|
export default InlineEdit;
|
|
60
50
|
|
|
61
|
-
|
|
51
|
+
// @public (undocumented)
|
|
52
|
+
export const InlineEditableTextfield: (
|
|
62
53
|
props: InlineEditableTextfieldProps,
|
|
63
|
-
) => JSX.Element;
|
|
54
|
+
) => jsx.JSX.Element;
|
|
64
55
|
|
|
65
|
-
|
|
66
|
-
|
|
56
|
+
// @public (undocumented)
|
|
57
|
+
export interface InlineEditableTextfieldProps extends CommonProps {
|
|
67
58
|
isCompact?: boolean;
|
|
68
|
-
/**
|
|
69
|
-
* Calls the `editView` handler. It confirms the changes.
|
|
70
|
-
* The field value is passed as an argument to this function.
|
|
71
|
-
*/
|
|
72
59
|
onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
73
|
-
/** Text shown in `readView` when the field value is an empty string. */
|
|
74
60
|
placeholder: string;
|
|
75
|
-
/** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
|
|
76
|
-
*/
|
|
77
61
|
testId?: string;
|
|
78
62
|
}
|
|
79
63
|
|
|
80
|
-
|
|
81
|
-
|
|
64
|
+
// @public (undocumented)
|
|
65
|
+
export interface InlineEditProps<FieldValue> extends CommonProps {
|
|
82
66
|
editView: (
|
|
83
67
|
fieldProps: ExtendedFieldProps<FieldValue>,
|
|
84
68
|
ref: React_2.RefObject<any>,
|
|
85
69
|
) => React_2.ReactNode;
|
|
86
|
-
/** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
|
|
87
70
|
isEditing?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
|
|
90
|
-
*/
|
|
91
71
|
onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
|
|
92
|
-
/** Handler called when readView is clicked. */
|
|
93
72
|
onEdit?: () => void;
|
|
94
|
-
/** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
|
|
95
73
|
readView: () => React_2.ReactNode;
|
|
96
74
|
}
|
|
97
75
|
|
|
98
|
-
|
|
76
|
+
// (No @packageDocumentation comment for this package)
|
|
99
77
|
```
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '../inline-edit';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '../inline-editable-textfield';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { InlineEditableTextfieldProps, InlineEditProps } from '../types';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
/** @jsx jsx */
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import { ThemeModes } from '@atlaskit/theme/types';
|
|
5
|
-
interface ButtonsProp {
|
|
6
|
-
mode: ThemeModes;
|
|
7
|
-
confirmButtonLabel: string;
|
|
8
|
-
cancelButtonLabel: string;
|
|
9
|
-
onMouseDown: () => void;
|
|
10
|
-
onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
11
|
-
}
|
|
12
|
-
declare const Buttons: ({ mode, confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
|
|
13
|
-
export default Buttons;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const useButtonFocusHook: (isEditing: boolean | undefined, isEditingState: boolean) => {
|
|
3
|
-
editButtonRef: import("react").RefObject<HTMLButtonElement>;
|
|
4
|
-
editViewRef: import("react").MutableRefObject<HTMLElement | undefined>;
|
|
5
|
-
shouldBeEditing: boolean;
|
|
6
|
-
doNotFocusOnEditButton: () => boolean;
|
|
7
|
-
};
|
|
8
|
-
export default useButtonFocusHook;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
interface ReadViewProps {
|
|
5
|
-
editButtonLabel: string;
|
|
6
|
-
onEditRequested: () => void;
|
|
7
|
-
postReadViewClick: () => void;
|
|
8
|
-
editButtonRef: React.RefObject<HTMLButtonElement>;
|
|
9
|
-
readViewFitContainerWidth?: boolean;
|
|
10
|
-
readView: () => React.ReactNode;
|
|
11
|
-
}
|
|
12
|
-
declare const ReadView: ({ editButtonLabel, onEditRequested, postReadViewClick, editButtonRef, readViewFitContainerWidth, readView, }: ReadViewProps) => jsx.JSX.Element;
|
|
13
|
-
export default ReadView;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
import { FieldProps } from '@atlaskit/form';
|
|
4
|
-
interface CommonProps extends WithAnalyticsEventsProps {
|
|
5
|
-
/** Additional information to be included in the `context` of analytics events that come from button. */
|
|
6
|
-
analyticsContext?: Record<string, any>;
|
|
7
|
-
/** Accessibility label for the cancel action button. */
|
|
8
|
-
cancelButtonLabel?: string;
|
|
9
|
-
/** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
|
|
10
|
-
confirmButtonLabel?: string;
|
|
11
|
-
/** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
|
|
12
|
-
defaultValue: any;
|
|
13
|
-
/** Label above the input field that communicates what value should be entered. */
|
|
14
|
-
label?: string;
|
|
15
|
-
/** Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`. */
|
|
16
|
-
validate?: (value: any, formState: {}, fieldState: {}) => string | void | Promise<string | void>;
|
|
17
|
-
/**
|
|
18
|
-
* Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
|
|
19
|
-
* When set to true, inline edit stays in `editView` when blurred. */
|
|
20
|
-
keepEditViewOpenOnBlur?: boolean;
|
|
21
|
-
/** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
|
|
22
|
-
hideActionButtons?: boolean;
|
|
23
|
-
/** Determines whether the input value can be confirmed as empty. */
|
|
24
|
-
isRequired?: boolean;
|
|
25
|
-
/** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
|
|
26
|
-
readViewFitContainerWidth?: boolean;
|
|
27
|
-
/** Accessibility label for button, which is used to enter `editView` from keyboard. */
|
|
28
|
-
editButtonLabel?: string;
|
|
29
|
-
/** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
|
|
30
|
-
onCancel?: () => void;
|
|
31
|
-
/**
|
|
32
|
-
* Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
|
|
33
|
-
* starts in `editView`.
|
|
34
|
-
*/
|
|
35
|
-
startWithEditViewOpen?: boolean;
|
|
36
|
-
}
|
|
37
|
-
export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
|
|
38
|
-
errorMessage?: string | undefined;
|
|
39
|
-
}
|
|
40
|
-
export interface InlineEditProps<FieldValue> extends CommonProps {
|
|
41
|
-
/** The component shown when user is editing (when the inline edit is not in `readView`). */
|
|
42
|
-
editView: (fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode;
|
|
43
|
-
/** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
|
|
44
|
-
isEditing?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
|
|
47
|
-
*/
|
|
48
|
-
onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
|
|
49
|
-
/** Handler called when readView is clicked. */
|
|
50
|
-
onEdit?: () => void;
|
|
51
|
-
/** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
|
|
52
|
-
readView: () => React.ReactNode;
|
|
53
|
-
}
|
|
54
|
-
export interface InlineEditableTextfieldProps extends CommonProps {
|
|
55
|
-
/** Sets height of the text field to compact. The top and bottom padding is decreased. */
|
|
56
|
-
isCompact?: boolean;
|
|
57
|
-
/**
|
|
58
|
-
* Calls the `editView` handler. It confirms the changes.
|
|
59
|
-
* The field value is passed as an argument to this function.
|
|
60
|
-
*/
|
|
61
|
-
onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
62
|
-
/** Text shown in `readView` when the field value is an empty string. */
|
|
63
|
-
placeholder: string;
|
|
64
|
-
/** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
|
|
65
|
-
*/
|
|
66
|
-
testId?: string;
|
|
67
|
-
}
|
|
68
|
-
export {};
|