@carbon/ibm-products 2.43.2-canary.90 → 2.43.2-canary.93
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/es/components/EmptyStates/EmptyStateV2.d.ts +63 -2
- package/es/components/EmptyStates/EmptyStateV2.js +2 -1
- package/es/components/Tearsheet/TearsheetShell.js +4 -1
- package/lib/components/EmptyStates/EmptyStateV2.d.ts +63 -2
- package/lib/components/EmptyStates/EmptyStateV2.js +2 -1
- package/lib/components/Tearsheet/TearsheetShell.js +4 -1
- package/package.json +4 -4
|
@@ -1,6 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2023, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode } from 'react';
|
|
8
|
+
import '../../global/js/utils/props-helper';
|
|
9
|
+
interface EmptyStateV2Props {
|
|
10
|
+
/**
|
|
11
|
+
* Props for the action button. Refer to the Carbon Components button documentation for full list of props.
|
|
12
|
+
*/
|
|
13
|
+
action?: {
|
|
14
|
+
text?: string;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Provide an optional class to be applied to the containing node.
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Source for the illustration image if you choose to use your own custom image. Passing an illustration prop will supersede the kind option.
|
|
22
|
+
*/
|
|
23
|
+
illustration?: string;
|
|
24
|
+
/**
|
|
25
|
+
* The alt text for the illustration
|
|
26
|
+
*/
|
|
27
|
+
illustrationDescription?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Designates the position of the illustration relative to the content
|
|
30
|
+
*/
|
|
31
|
+
illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
|
|
32
|
+
/**
|
|
33
|
+
* Empty state illustration theme variations.
|
|
34
|
+
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
|
35
|
+
* based on your app's current theme value. Example:
|
|
36
|
+
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
|
|
37
|
+
*/
|
|
38
|
+
illustrationTheme?: 'light' | 'dark';
|
|
39
|
+
/**
|
|
40
|
+
* Determines which predefined illustration will be displayed
|
|
41
|
+
*/
|
|
42
|
+
kind?: 'error' | 'noData' | 'noTags' | 'notFound' | 'notifications' | 'unauthorized';
|
|
43
|
+
/**
|
|
44
|
+
* Props for the link. Refer to the Carbon Components link documentation for full list of props.
|
|
45
|
+
*/
|
|
46
|
+
link?: {
|
|
47
|
+
text?: string;
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
50
|
+
* Empty state size
|
|
51
|
+
*/
|
|
52
|
+
size?: 'sm' | 'lg';
|
|
53
|
+
/**
|
|
54
|
+
* Empty state subtext
|
|
55
|
+
*/
|
|
56
|
+
subtitle?: string | ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* Empty state heading
|
|
59
|
+
*/
|
|
60
|
+
title: string | ReactNode;
|
|
61
|
+
}
|
|
1
62
|
/**
|
|
2
63
|
* This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
|
|
3
64
|
* In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
|
|
4
65
|
*/
|
|
5
|
-
export let EmptyStateV2: React.ForwardRefExoticComponent<React.RefAttributes<
|
|
6
|
-
|
|
66
|
+
export declare let EmptyStateV2: React.ForwardRefExoticComponent<EmptyStateV2Props & React.RefAttributes<HTMLDivElement>>;
|
|
67
|
+
export {};
|
|
@@ -18,7 +18,6 @@ import EmptyStateIllustration from './EmptyStateIllustration.js';
|
|
|
18
18
|
var _excluded = ["action", "className", "illustration", "illustrationDescription", "illustrationPosition", "illustrationTheme", "kind", "link", "size", "subtitle", "title"];
|
|
19
19
|
var blockClass = "".concat(pkg.prefix, "--empty-state");
|
|
20
20
|
var componentName = 'EmptyStateV2';
|
|
21
|
-
|
|
22
21
|
/**
|
|
23
22
|
* This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
|
|
24
23
|
* In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
|
|
@@ -72,6 +71,7 @@ EmptyStateV2.propTypes = {
|
|
|
72
71
|
/**
|
|
73
72
|
* Props for the action button. Refer to the Carbon Components button documentation for full list of props.
|
|
74
73
|
*/
|
|
74
|
+
/**@ts-ignore*/
|
|
75
75
|
action: PropTypes.PropTypes.shape({
|
|
76
76
|
text: PropTypes.string
|
|
77
77
|
}),
|
|
@@ -105,6 +105,7 @@ EmptyStateV2.propTypes = {
|
|
|
105
105
|
/**
|
|
106
106
|
* Props for the link. Refer to the Carbon Components link documentation for full list of props.
|
|
107
107
|
*/
|
|
108
|
+
/**@ts-ignore*/
|
|
108
109
|
link: PropTypes.shape({
|
|
109
110
|
text: PropTypes.string
|
|
110
111
|
}),
|
|
@@ -167,10 +167,13 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
|
167
167
|
useEffect(function () {
|
|
168
168
|
if (open && position !== depth) {
|
|
169
169
|
setTimeout(function () {
|
|
170
|
+
if (selectorPrimaryFocus) {
|
|
171
|
+
return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
|
|
172
|
+
}
|
|
170
173
|
firstElement === null || firstElement === void 0 || firstElement.focus();
|
|
171
174
|
}, 0);
|
|
172
175
|
}
|
|
173
|
-
}, [position, depth, firstElement, open]);
|
|
176
|
+
}, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
|
|
174
177
|
useEffect(function () {
|
|
175
178
|
var notify = function notify() {
|
|
176
179
|
return stack.all.forEach(function (handler) {
|
|
@@ -1,6 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2023, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode } from 'react';
|
|
8
|
+
import '../../global/js/utils/props-helper';
|
|
9
|
+
interface EmptyStateV2Props {
|
|
10
|
+
/**
|
|
11
|
+
* Props for the action button. Refer to the Carbon Components button documentation for full list of props.
|
|
12
|
+
*/
|
|
13
|
+
action?: {
|
|
14
|
+
text?: string;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Provide an optional class to be applied to the containing node.
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Source for the illustration image if you choose to use your own custom image. Passing an illustration prop will supersede the kind option.
|
|
22
|
+
*/
|
|
23
|
+
illustration?: string;
|
|
24
|
+
/**
|
|
25
|
+
* The alt text for the illustration
|
|
26
|
+
*/
|
|
27
|
+
illustrationDescription?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Designates the position of the illustration relative to the content
|
|
30
|
+
*/
|
|
31
|
+
illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
|
|
32
|
+
/**
|
|
33
|
+
* Empty state illustration theme variations.
|
|
34
|
+
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
|
|
35
|
+
* based on your app's current theme value. Example:
|
|
36
|
+
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
|
|
37
|
+
*/
|
|
38
|
+
illustrationTheme?: 'light' | 'dark';
|
|
39
|
+
/**
|
|
40
|
+
* Determines which predefined illustration will be displayed
|
|
41
|
+
*/
|
|
42
|
+
kind?: 'error' | 'noData' | 'noTags' | 'notFound' | 'notifications' | 'unauthorized';
|
|
43
|
+
/**
|
|
44
|
+
* Props for the link. Refer to the Carbon Components link documentation for full list of props.
|
|
45
|
+
*/
|
|
46
|
+
link?: {
|
|
47
|
+
text?: string;
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
50
|
+
* Empty state size
|
|
51
|
+
*/
|
|
52
|
+
size?: 'sm' | 'lg';
|
|
53
|
+
/**
|
|
54
|
+
* Empty state subtext
|
|
55
|
+
*/
|
|
56
|
+
subtitle?: string | ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* Empty state heading
|
|
59
|
+
*/
|
|
60
|
+
title: string | ReactNode;
|
|
61
|
+
}
|
|
1
62
|
/**
|
|
2
63
|
* This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
|
|
3
64
|
* In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
|
|
4
65
|
*/
|
|
5
|
-
export let EmptyStateV2: React.ForwardRefExoticComponent<React.RefAttributes<
|
|
6
|
-
|
|
66
|
+
export declare let EmptyStateV2: React.ForwardRefExoticComponent<EmptyStateV2Props & React.RefAttributes<HTMLDivElement>>;
|
|
67
|
+
export {};
|
|
@@ -27,7 +27,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
27
27
|
var _excluded = ["action", "className", "illustration", "illustrationDescription", "illustrationPosition", "illustrationTheme", "kind", "link", "size", "subtitle", "title"];
|
|
28
28
|
var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
|
|
29
29
|
var componentName = 'EmptyStateV2';
|
|
30
|
-
|
|
31
30
|
/**
|
|
32
31
|
* This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
|
|
33
32
|
* In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
|
|
@@ -81,6 +80,7 @@ exports.EmptyStateV2.propTypes = {
|
|
|
81
80
|
/**
|
|
82
81
|
* Props for the action button. Refer to the Carbon Components button documentation for full list of props.
|
|
83
82
|
*/
|
|
83
|
+
/**@ts-ignore*/
|
|
84
84
|
action: index["default"].PropTypes.shape({
|
|
85
85
|
text: index["default"].string
|
|
86
86
|
}),
|
|
@@ -114,6 +114,7 @@ exports.EmptyStateV2.propTypes = {
|
|
|
114
114
|
/**
|
|
115
115
|
* Props for the link. Refer to the Carbon Components link documentation for full list of props.
|
|
116
116
|
*/
|
|
117
|
+
/**@ts-ignore*/
|
|
117
118
|
link: index["default"].shape({
|
|
118
119
|
text: index["default"].string
|
|
119
120
|
}),
|
|
@@ -176,10 +176,13 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
176
176
|
React.useEffect(function () {
|
|
177
177
|
if (open && position !== depth) {
|
|
178
178
|
setTimeout(function () {
|
|
179
|
+
if (selectorPrimaryFocus) {
|
|
180
|
+
return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
|
|
181
|
+
}
|
|
179
182
|
firstElement === null || firstElement === void 0 || firstElement.focus();
|
|
180
183
|
}, 0);
|
|
181
184
|
}
|
|
182
|
-
}, [position, depth, firstElement, open]);
|
|
185
|
+
}, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
|
|
183
186
|
React.useEffect(function () {
|
|
184
187
|
var notify = function notify() {
|
|
185
188
|
return stack.all.forEach(function (handler) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/ibm-products",
|
|
3
3
|
"description": "Carbon for IBM Products",
|
|
4
|
-
"version": "2.43.2-canary.
|
|
4
|
+
"version": "2.43.2-canary.93+3f121496f",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"fs-extra": "^11.2.0",
|
|
82
82
|
"glob": "^10.3.10",
|
|
83
83
|
"jest": "^29.7.0",
|
|
84
|
-
"jest-config-ibm-cloud-cognitive": "^1.
|
|
84
|
+
"jest-config-ibm-cloud-cognitive": "^1.5.0-rc.0",
|
|
85
85
|
"jest-environment-jsdom": "^29.7.0",
|
|
86
86
|
"namor": "^1.1.2",
|
|
87
87
|
"npm-check-updates": "^16.14.12",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"dependencies": {
|
|
97
97
|
"@babel/runtime": "^7.23.9",
|
|
98
98
|
"@carbon/feature-flags": "^0.20.0",
|
|
99
|
-
"@carbon/ibm-products-styles": "^2.
|
|
99
|
+
"@carbon/ibm-products-styles": "^2.42.0-rc.0",
|
|
100
100
|
"@carbon/telemetry": "^0.1.0",
|
|
101
101
|
"@dnd-kit/core": "^6.0.8",
|
|
102
102
|
"@dnd-kit/modifiers": "^7.0.0",
|
|
@@ -120,5 +120,5 @@
|
|
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
|
122
122
|
},
|
|
123
|
-
"gitHead": "
|
|
123
|
+
"gitHead": "3f121496f6b749212e422586570cee743f757ad4"
|
|
124
124
|
}
|