@carbon/ibm-products 2.70.1 → 2.71.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/css/carbon.css +317 -216
- package/css/carbon.css.map +1 -1
- package/css/index-full-carbon.css +546 -270
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +387 -43
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +229 -54
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +242 -56
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/_virtual/_commonjsHelpers.js +1 -3
- package/es/_virtual/index2.js +2 -6
- package/es/components/APIKeyModal/APIKeyDownloader.d.ts +61 -19
- package/es/components/APIKeyModal/APIKeyDownloader.js +3 -3
- package/es/components/APIKeyModal/APIKeyModal.js +1 -1
- package/es/components/ActionSet/ActionSet.d.ts +4 -0
- package/es/components/ActionSet/ActionSet.js +46 -44
- package/es/components/AddSelect/AddSelectBody.js +1 -1
- package/es/components/Card/Card.d.ts +1 -0
- package/es/components/Coachmark/CoachmarkOverlay.js +5 -5
- package/es/components/Coachmark/CoachmarkTagline.js +2 -2
- package/es/components/Coachmark/utils/context.d.ts +28 -2
- package/es/components/Coachmark/utils/context.js +1 -1
- package/es/components/CoachmarkStack/CoachmarkStack.js +11 -8
- package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +18 -12
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +1 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +5 -3
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +2 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +5 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.d.ts +2 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +5 -2
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.d.ts +9 -1
- package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +24 -5
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -1
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +6 -4
- package/es/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/es/components/ConditionBuilder/utils/util.js +11 -4
- package/es/components/CreateModal/CreateModal.d.ts +4 -7
- package/es/components/CreateModal/CreateModal.js +4 -19
- package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +6 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +12 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts +43 -18
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.d.ts +7 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +11 -3
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +15 -19
- package/es/components/EditTearsheet/EditTearsheetForm.d.ts +2 -0
- package/es/components/EditTearsheet/EditTearsheetForm.js +16 -4
- package/es/components/EmptyStates/EmptyState.js +0 -1
- package/es/components/FilterSummary/FilterSummary.d.ts +1 -0
- package/es/components/FilterSummary/FilterSummary.js +2 -1
- package/es/components/Guidebanner/Guidebanner.js +4 -20
- package/es/components/InterstitialScreen/InterstitialScreen.d.ts +4 -3
- package/es/components/InterstitialScreen/InterstitialScreen.js +21 -21
- package/es/components/InterstitialScreen/InterstitialScreenBody.d.ts +9 -3
- package/es/components/InterstitialScreen/InterstitialScreenBody.js +16 -11
- package/es/components/InterstitialScreen/InterstitialScreenFooter.js +15 -13
- package/es/components/InterstitialScreen/InterstitialScreenHeader.js +13 -8
- package/es/components/InterstitialScreen/index.d.ts +4 -1
- package/es/components/Nav/NavItemLink.js +1 -4
- package/es/components/PageHeader/PageHeaderTitle.js +1 -1
- package/es/components/PageHeader/next/PageHeader.d.ts +277 -0
- package/es/components/PageHeader/next/PageHeader.js +475 -0
- package/es/components/PageHeader/next/index.d.ts +8 -0
- package/es/components/ScrollGradient/ScrollGradient.js +4 -4
- package/es/components/SidePanel/SidePanel.js +25 -20
- package/es/components/StringFormatter/StringFormatter.js +3 -0
- package/es/components/Tearsheet/Tearsheet.js +4 -7
- package/es/components/Tearsheet/TearsheetNarrow.js +1 -4
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/es/components/UserAvatar/UserAvatar.js +5 -7
- package/es/components/UserProfileImage/UserProfileImage.d.ts +1 -0
- package/es/components/UserProfileImage/UserProfileImage.js +12 -6
- package/es/components/index.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -1
- package/es/index.js +3 -0
- package/es/node_modules/@carbon/icons-react/es/Icon.js +1 -1
- package/es/node_modules/prop-types/index.js +1 -1
- package/lib/_virtual/_commonjsHelpers.js +0 -3
- package/lib/_virtual/index2.js +2 -8
- package/lib/components/APIKeyModal/APIKeyDownloader.d.ts +61 -19
- package/lib/components/APIKeyModal/APIKeyDownloader.js +3 -3
- package/lib/components/APIKeyModal/APIKeyModal.js +1 -1
- package/lib/components/ActionSet/ActionSet.d.ts +4 -0
- package/lib/components/ActionSet/ActionSet.js +46 -43
- package/lib/components/AddSelect/AddSelectBody.js +1 -1
- package/lib/components/Card/Card.d.ts +1 -0
- package/lib/components/Coachmark/CoachmarkOverlay.js +5 -5
- package/lib/components/Coachmark/CoachmarkTagline.js +2 -2
- package/lib/components/Coachmark/utils/context.d.ts +28 -2
- package/lib/components/Coachmark/utils/context.js +1 -1
- package/lib/components/CoachmarkStack/CoachmarkStack.js +11 -8
- package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +18 -12
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +1 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +5 -3
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +2 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +5 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.d.ts +2 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +5 -2
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.d.ts +9 -1
- package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +24 -5
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -1
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +6 -4
- package/lib/components/ConditionBuilder/utils/util.d.ts +1 -1
- package/lib/components/ConditionBuilder/utils/util.js +11 -4
- package/lib/components/CreateModal/CreateModal.d.ts +4 -7
- package/lib/components/CreateModal/CreateModal.js +4 -19
- package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +6 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +12 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts +43 -18
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.d.ts +7 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +11 -3
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +15 -19
- package/lib/components/EditTearsheet/EditTearsheetForm.d.ts +2 -0
- package/lib/components/EditTearsheet/EditTearsheetForm.js +16 -4
- package/lib/components/EmptyStates/EmptyState.js +0 -1
- package/lib/components/FilterSummary/FilterSummary.d.ts +1 -0
- package/lib/components/FilterSummary/FilterSummary.js +2 -1
- package/lib/components/Guidebanner/Guidebanner.js +4 -20
- package/lib/components/InterstitialScreen/InterstitialScreen.d.ts +4 -3
- package/lib/components/InterstitialScreen/InterstitialScreen.js +21 -20
- package/lib/components/InterstitialScreen/InterstitialScreenBody.d.ts +9 -3
- package/lib/components/InterstitialScreen/InterstitialScreenBody.js +19 -14
- package/lib/components/InterstitialScreen/InterstitialScreenFooter.js +20 -18
- package/lib/components/InterstitialScreen/InterstitialScreenHeader.js +15 -10
- package/lib/components/InterstitialScreen/index.d.ts +4 -1
- package/lib/components/Nav/NavItemLink.js +1 -4
- package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
- package/lib/components/PageHeader/next/PageHeader.d.ts +277 -0
- package/lib/components/PageHeader/next/PageHeader.js +490 -0
- package/lib/components/PageHeader/next/index.d.ts +8 -0
- package/lib/components/ScrollGradient/ScrollGradient.js +4 -4
- package/lib/components/SidePanel/SidePanel.js +26 -21
- package/lib/components/StringFormatter/StringFormatter.js +3 -0
- package/lib/components/Tearsheet/Tearsheet.js +4 -7
- package/lib/components/Tearsheet/TearsheetNarrow.js +1 -4
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/components/UserAvatar/UserAvatar.js +5 -7
- package/lib/components/UserProfileImage/UserProfileImage.d.ts +1 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +12 -6
- package/lib/components/index.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -1
- package/lib/index.js +5 -2
- package/lib/node_modules/@carbon/icons-react/es/Icon.js +1 -1
- package/lib/node_modules/prop-types/index.js +1 -1
- package/package.json +22 -30
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +12 -1
- package/scss/components/InterstitialScreen/_interstitial-screen.scss +7 -11
- package/scss/components/PageHeader/_page-header.scss +198 -0
- package/scss/components/SidePanel/_side-panel.scss +2 -52
- package/scss/components/_index-released-only.scss +1 -0
- package/telemetry.yml +12 -13
- package/es/_virtual/index3.js +0 -10
- package/es/components/SidePanel/resizer/Resizer.d.ts +0 -21
- package/es/components/SidePanel/resizer/Resizer.js +0 -271
- package/es/node_modules/lodash.debounce/index.js +0 -367
- package/lib/_virtual/index3.js +0 -12
- package/lib/components/SidePanel/resizer/Resizer.d.ts +0 -21
- package/lib/components/SidePanel/resizer/Resizer.js +0 -277
- package/lib/node_modules/lodash.debounce/index.js +0 -369
- /package/es/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js +0 -0
- /package/lib/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js +0 -0
package/es/_virtual/index2.js
CHANGED
@@ -5,10 +5,6 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
|
9
|
-
import { __require as requireLodash_debounce } from '../node_modules/lodash.debounce/index.js';
|
8
|
+
var propTypes = {exports: {}};
|
10
9
|
|
11
|
-
|
12
|
-
var debounce = /*@__PURE__*/getDefaultExportFromCjs(lodash_debounceExports);
|
13
|
-
|
14
|
-
export { debounce as default };
|
10
|
+
export { propTypes as __module };
|
@@ -1,22 +1,64 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
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 from 'react';
|
8
|
+
interface APIKeyDownloaderProps {
|
9
|
+
/**
|
10
|
+
* the api key that's displayed to the user when a request to create is fulfilled.
|
11
|
+
*/
|
12
|
+
apiKey?: string;
|
13
|
+
/**
|
14
|
+
* the content that appears that indicates the key is downloadable
|
15
|
+
*/
|
16
|
+
body?: string;
|
17
|
+
/**
|
18
|
+
* designates the name of downloadable json file with the key. if not specified will default to 'apikey'
|
19
|
+
*/
|
20
|
+
fileName?: string;
|
21
|
+
/**
|
22
|
+
* designates the file type for the downloadable key
|
23
|
+
*/
|
24
|
+
fileType: 'txt' | 'json';
|
25
|
+
/**
|
26
|
+
* anchor text for the download link
|
27
|
+
*/
|
28
|
+
linkText: string;
|
29
|
+
/**
|
30
|
+
* Aria-label for the download link
|
31
|
+
*/
|
7
32
|
downloadLinkLabel: any;
|
8
|
-
}): React.JSX.Element;
|
9
|
-
export namespace APIKeyDownloader {
|
10
|
-
export { componentName as displayName };
|
11
|
-
export namespace propTypes {
|
12
|
-
let apiKey: any;
|
13
|
-
let body: any;
|
14
|
-
let downloadLinkLabel: any;
|
15
|
-
let fileName: any;
|
16
|
-
let fileType: any;
|
17
|
-
let linkText: any;
|
18
|
-
}
|
19
33
|
}
|
20
|
-
|
21
|
-
|
34
|
+
export declare const APIKeyDownloader: {
|
35
|
+
(props: APIKeyDownloaderProps): React.JSX.Element;
|
36
|
+
displayName: string;
|
37
|
+
propTypes: {
|
38
|
+
/**
|
39
|
+
* the api key that's displayed to the user when a request to create is fulfilled.
|
40
|
+
*/
|
41
|
+
apiKey: any;
|
42
|
+
/**
|
43
|
+
* body content for the downloader
|
44
|
+
*/
|
45
|
+
body: any;
|
46
|
+
/**
|
47
|
+
* aria-label for the download link
|
48
|
+
*/
|
49
|
+
downloadLinkLabel: any;
|
50
|
+
/**
|
51
|
+
* designates the name of downloadable json file with the key. if not specified will default to 'apikey'
|
52
|
+
*/
|
53
|
+
fileName: any;
|
54
|
+
/**
|
55
|
+
* designates the file type for the downloadable key
|
56
|
+
*/
|
57
|
+
fileType: any;
|
58
|
+
/**
|
59
|
+
* anchor text for the download link
|
60
|
+
*/
|
61
|
+
linkText: any;
|
62
|
+
};
|
63
|
+
};
|
22
64
|
export {};
|
@@ -11,15 +11,15 @@ import PropTypes from '../../_virtual/index.js';
|
|
11
11
|
import { pkg } from '../../settings.js';
|
12
12
|
|
13
13
|
const componentName = 'APIKeyDownloader';
|
14
|
-
const APIKeyDownloader =
|
15
|
-
|
14
|
+
const APIKeyDownloader = props => {
|
15
|
+
const {
|
16
16
|
apiKey,
|
17
17
|
body,
|
18
18
|
fileName,
|
19
19
|
fileType,
|
20
20
|
linkText,
|
21
21
|
downloadLinkLabel
|
22
|
-
} =
|
22
|
+
} = props;
|
23
23
|
const [linkProps, setLinkProps] = useState({});
|
24
24
|
useEffect(() => {
|
25
25
|
const generateLinkProps = async () => {
|
@@ -123,7 +123,7 @@ let APIKeyModal = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
123
123
|
useEffect(() => {
|
124
124
|
if (open) {
|
125
125
|
// Focusing the first element or selectorPrimaryFocus element
|
126
|
-
claimFocus();
|
126
|
+
setTimeout(() => claimFocus(), 0);
|
127
127
|
}
|
128
128
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
129
129
|
}, [modalRef, open, firstElement]);
|
@@ -33,6 +33,10 @@ export interface ActionSetProps {
|
|
33
33
|
*/
|
34
34
|
size?: ButtonSize;
|
35
35
|
}
|
36
|
+
export declare const validateActionSetProps: ({ actions, size }: {
|
37
|
+
actions: any;
|
38
|
+
size: any;
|
39
|
+
}) => any;
|
36
40
|
/**
|
37
41
|
* An ActionSet presents a set of action buttons, constructed from bundles
|
38
42
|
* of prop values and applying some layout rules. When the size is 'sm'
|
@@ -12,6 +12,7 @@ import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper.j
|
|
12
12
|
import PropTypes from '../../_virtual/index.js';
|
13
13
|
import cx from 'classnames';
|
14
14
|
import { pkg } from '../../settings.js';
|
15
|
+
import pconsole from '../../global/js/utils/pconsole.js';
|
15
16
|
|
16
17
|
var _InlineLoading;
|
17
18
|
const blockClass = `${pkg.prefix}--action-set`;
|
@@ -54,6 +55,41 @@ const willStack = (size, numberOfActions) => size === 'sm' || size === 'md' && n
|
|
54
55
|
const defaults = {
|
55
56
|
size: 'md'
|
56
57
|
};
|
58
|
+
const validateActionSetProps = _ref2 => {
|
59
|
+
let {
|
60
|
+
actions,
|
61
|
+
size
|
62
|
+
} = _ref2;
|
63
|
+
if (actions && actions.length) {
|
64
|
+
const problems = [];
|
65
|
+
const stacking = willStack(size, actions.length);
|
66
|
+
const countActions = kind => actions.filter(action => (action.kind || defaultKind) === kind).length;
|
67
|
+
const primaryActions = countActions('primary');
|
68
|
+
const secondaryActions = countActions('secondary');
|
69
|
+
const dangerActions = countActions('danger');
|
70
|
+
const ghostActions = countActions('ghost') + countActions('danger--ghost');
|
71
|
+
if (stacking && actions.length > 3) {
|
72
|
+
problems.push(`you cannot have more than three actions in this size of ${componentName}`);
|
73
|
+
}
|
74
|
+
if (actions.length > 4) {
|
75
|
+
problems.push(`you cannot have more than four actions in a ${componentName}`);
|
76
|
+
}
|
77
|
+
if (primaryActions > 1) {
|
78
|
+
problems.push(`you cannot have more than one 'primary' action in a ${componentName}`);
|
79
|
+
}
|
80
|
+
if (ghostActions > 1) {
|
81
|
+
problems.push(`you cannot have more than one 'ghost' action in a ${componentName}`);
|
82
|
+
}
|
83
|
+
if (stacking && actions.length > 1 && ghostActions > 0) {
|
84
|
+
problems.push(`you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}`);
|
85
|
+
}
|
86
|
+
if (actions.length > primaryActions + secondaryActions + dangerActions + ghostActions) {
|
87
|
+
problems.push(`you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
|
88
|
+
}
|
89
|
+
return problems.length > 0 ? pconsole.error(`Invalid prop \`actions\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
|
90
|
+
}
|
91
|
+
};
|
92
|
+
|
57
93
|
/**
|
58
94
|
* An ActionSet presents a set of action buttons, constructed from bundles
|
59
95
|
* of prop values and applying some layout rules. When the size is 'sm'
|
@@ -66,17 +102,18 @@ const defaults = {
|
|
66
102
|
* it appears at the left side. If there is a primary button it appears at the
|
67
103
|
* right.
|
68
104
|
*/
|
69
|
-
const ActionSet = /*#__PURE__*/React__default.forwardRef((
|
70
|
-
|
71
|
-
// The component props, in alphabetical order (for consistency).
|
72
|
-
|
105
|
+
const ActionSet = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
106
|
+
const {
|
73
107
|
actions,
|
74
108
|
buttonSize,
|
75
109
|
className,
|
76
110
|
size = defaults.size,
|
77
|
-
// Collect any other property values passed in.
|
78
111
|
...rest
|
79
|
-
} =
|
112
|
+
} = props;
|
113
|
+
validateActionSetProps({
|
114
|
+
actions,
|
115
|
+
size
|
116
|
+
});
|
80
117
|
const buttons = actions && actions.slice?.(0) || [];
|
81
118
|
|
82
119
|
// We stack the buttons in a sm set, or if there are three or more in a md set.
|
@@ -129,41 +166,7 @@ ActionSet.displayName = componentName;
|
|
129
166
|
* @returns null if the actions meet the requirements, or an Error object with
|
130
167
|
* an explanatory message.
|
131
168
|
*/
|
132
|
-
|
133
|
-
ActionSet.validateActions = sizeFn => (props, propName, componentName, location, propFullName) => {
|
134
|
-
const name = propFullName || propName;
|
135
|
-
const prop = props[name];
|
136
|
-
const actions = prop && prop?.length;
|
137
|
-
const problems = [];
|
138
|
-
if (actions > 0) {
|
139
|
-
const size = sizeFn ? sizeFn(props) : props.size || defaults.size;
|
140
|
-
const stacking = willStack(size, actions);
|
141
|
-
const countActions = kind => prop.filter(action => (action.kind || defaultKind) === kind).length;
|
142
|
-
const primaryActions = countActions('primary');
|
143
|
-
const secondaryActions = countActions('secondary');
|
144
|
-
const dangerActions = countActions('danger');
|
145
|
-
const ghostActions = countActions('ghost') + countActions('danger--ghost');
|
146
|
-
if (stacking && actions > 3) {
|
147
|
-
problems.push(`you cannot have more than three actions in this size of ${componentName}`);
|
148
|
-
}
|
149
|
-
if (actions > 4) {
|
150
|
-
problems.push(`you cannot have more than four actions in a ${componentName}`);
|
151
|
-
}
|
152
|
-
if (primaryActions > 1) {
|
153
|
-
problems.push(`you cannot have more than one 'primary' action in a ${componentName}`);
|
154
|
-
}
|
155
|
-
if (ghostActions > 1) {
|
156
|
-
problems.push(`you cannot have more than one 'ghost' action in a ${componentName}`);
|
157
|
-
}
|
158
|
-
if (stacking && actions > 1 && ghostActions > 0) {
|
159
|
-
problems.push(`you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}`);
|
160
|
-
}
|
161
|
-
if (actions > primaryActions + secondaryActions + dangerActions + ghostActions) {
|
162
|
-
problems.push(`you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
|
163
|
-
}
|
164
|
-
}
|
165
|
-
return problems.length > 0 ? new Error(`Invalid ${location} \`${name}\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
|
166
|
-
};
|
169
|
+
|
167
170
|
ActionSet.propTypes = {
|
168
171
|
/**
|
169
172
|
* The action buttons to show. Each action is specified as an
|
@@ -177,8 +180,7 @@ ActionSet.propTypes = {
|
|
177
180
|
*
|
178
181
|
* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
179
182
|
*/
|
180
|
-
actions: allPropTypes([
|
181
|
-
ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape({
|
183
|
+
actions: allPropTypes([PropTypes.arrayOf(PropTypes.shape({
|
182
184
|
/**@ts-ignore*/
|
183
185
|
...Button.propTypes,
|
184
186
|
kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
@@ -207,4 +209,4 @@ ActionSet.propTypes = {
|
|
207
209
|
size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
|
208
210
|
};
|
209
211
|
|
210
|
-
export { ActionSet };
|
212
|
+
export { ActionSet, validateActionSetProps };
|
@@ -33,8 +33,8 @@ const defaults = {
|
|
33
33
|
* DO NOT USE. This component is for the exclusive use
|
34
34
|
* of other Onboarding components.
|
35
35
|
*/
|
36
|
-
let CoachmarkOverlay = /*#__PURE__*/forwardRef((
|
37
|
-
|
36
|
+
let CoachmarkOverlay = /*#__PURE__*/forwardRef((props, ref) => {
|
37
|
+
const {
|
38
38
|
children,
|
39
39
|
onClose,
|
40
40
|
fixedIsVisible,
|
@@ -42,7 +42,7 @@ let CoachmarkOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
42
42
|
kind = defaults.kind,
|
43
43
|
theme = defaults.theme,
|
44
44
|
...rest
|
45
|
-
} =
|
45
|
+
} = props;
|
46
46
|
const {
|
47
47
|
winHeight,
|
48
48
|
winWidth
|
@@ -82,7 +82,7 @@ let CoachmarkOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
82
82
|
const styledTune = useMemo(() => {
|
83
83
|
const style = {};
|
84
84
|
if (isBeacon || isDraggable) {
|
85
|
-
if (coachmark
|
85
|
+
if (coachmark?.targetRect) {
|
86
86
|
style.left = coachmark.targetRect.x + window.scrollX;
|
87
87
|
style.top = coachmark.targetRect.y + window.scrollY;
|
88
88
|
}
|
@@ -152,7 +152,7 @@ let CoachmarkOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
152
152
|
}
|
153
153
|
}, [styledTune, overlayRef]);
|
154
154
|
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
155
|
-
className: cx(blockClass, `${blockClass}--${kind}`, `${blockClass}__${theme}`, (isBeacon || isDraggable) && `${blockClass}--${coachmark.align}`, fixedIsVisible && `${blockClass}--is-visible`, a11yDragMode && `${blockClass}--is-dragmode`, className),
|
155
|
+
className: cx(blockClass, `${blockClass}--${kind}`, `${blockClass}__${theme}`, (isBeacon || isDraggable) && coachmark?.align && `${blockClass}--${coachmark.align}`, fixedIsVisible && `${blockClass}--is-visible`, a11yDragMode && `${blockClass}--is-dragmode`, className),
|
156
156
|
ref: overlayRef,
|
157
157
|
"aria-labelledby": contentId,
|
158
158
|
tabIndex: -1
|
@@ -39,13 +39,13 @@ let CoachmarkTagline = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
39
39
|
} = _ref;
|
40
40
|
const coachmark = useCoachmark();
|
41
41
|
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
42
|
-
className: cx(blockClass, `${blockClass}__${theme}`, coachmark
|
42
|
+
className: cx(blockClass, `${blockClass}__${theme}`, coachmark?.isOpen && `${blockClass}--is-open`),
|
43
43
|
ref: ref
|
44
44
|
}, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("button", _extends({
|
45
45
|
// {...rest}
|
46
46
|
className: `${blockClass}__cta`,
|
47
47
|
type: "button"
|
48
|
-
}, coachmark
|
48
|
+
}, coachmark?.buttonProps), /*#__PURE__*/React__default.createElement("div", {
|
49
49
|
className: `${blockClass}__idea`
|
50
50
|
}, _Idea || (_Idea = /*#__PURE__*/React__default.createElement(Idea, {
|
51
51
|
size: 16
|
@@ -1,2 +1,28 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2024
|
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 { PopoverAlignment } from '@carbon/react';
|
8
|
+
import { ButtonProps } from '@carbon/react';
|
9
|
+
interface CoachmarkContextType {
|
10
|
+
buttonProps: ButtonProps<React.ElementType>;
|
11
|
+
closeButtonProps: {
|
12
|
+
onClick: () => void;
|
13
|
+
};
|
14
|
+
targetRect?: DOMRect;
|
15
|
+
targetOffset?: {
|
16
|
+
x: number;
|
17
|
+
y: number;
|
18
|
+
};
|
19
|
+
align?: PopoverAlignment;
|
20
|
+
positionTune?: {
|
21
|
+
x: number;
|
22
|
+
y: number;
|
23
|
+
};
|
24
|
+
isOpen: boolean;
|
25
|
+
}
|
26
|
+
export declare const CoachmarkContext: import("react").Context<CoachmarkContextType | null>;
|
27
|
+
export declare const useCoachmark: () => CoachmarkContextType | null;
|
28
|
+
export {};
|
@@ -141,16 +141,15 @@ let CoachmarkStack = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
141
141
|
mountedRef.current = false;
|
142
142
|
};
|
143
143
|
}, []);
|
144
|
-
useEffect(() => {
|
145
|
-
setTimeout(() => {
|
146
|
-
if (stackHomeRef.current) {
|
147
|
-
setParentHeight(stackHomeRef.current.clientHeight + 16);
|
148
|
-
}
|
149
|
-
}, 0);
|
150
|
-
}, [stackHomeRef]);
|
151
144
|
useEffect(() => {
|
152
145
|
const targetSelectedItem = selectedItemNumber - 1;
|
153
146
|
if (!parentHeight) {
|
147
|
+
if (stackHomeRef.current) {
|
148
|
+
const height = stackHomeRef.current.clientHeight;
|
149
|
+
if (height > 0) {
|
150
|
+
setParentHeight(height);
|
151
|
+
}
|
152
|
+
}
|
154
153
|
return;
|
155
154
|
}
|
156
155
|
if (stackHomeRef.current) {
|
@@ -158,14 +157,18 @@ let CoachmarkStack = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
158
157
|
}
|
159
158
|
if (!isOpen || targetSelectedItem < 0) {
|
160
159
|
if (stackHomeRef.current) {
|
160
|
+
stackHomeRef.current.classList.remove(`${blockClass}--scaled-home`);
|
161
|
+
stackHomeRef.current.classList.add(`${blockClass}--unscaled-home`);
|
161
162
|
stackHomeRef.current.focus();
|
162
163
|
}
|
163
164
|
return;
|
164
165
|
}
|
165
166
|
const targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
|
166
167
|
if (stackHomeRef.current) {
|
167
|
-
stackHomeRef.current.style.height =
|
168
|
+
stackHomeRef.current.style.height = `calc(${targetHomeHeight}px + 3rem)`;
|
168
169
|
stackedCoachmarkRefs.current[targetSelectedItem].focus();
|
170
|
+
stackHomeRef.current.classList.remove(`${blockClass}--unscaled-home`);
|
171
|
+
stackHomeRef.current.classList.add(`${blockClass}--scaled-home`);
|
169
172
|
}
|
170
173
|
}, [selectedItemNumber, isOpen, parentHeight]);
|
171
174
|
const wrappedChildren = Children.map(childArray, (child, idx) => {
|
@@ -152,7 +152,7 @@ const ConditionBlock = props => {
|
|
152
152
|
'aria-setsize': aria.setsize
|
153
153
|
} : {};
|
154
154
|
};
|
155
|
-
const renderChildren = popoverRef => {
|
155
|
+
const renderChildren = (popoverRef, closePopover) => {
|
156
156
|
return /*#__PURE__*/React__default.createElement(ItemComponent, {
|
157
157
|
conditionState: {
|
158
158
|
property,
|
@@ -163,7 +163,21 @@ const ConditionBlock = props => {
|
|
163
163
|
config: config,
|
164
164
|
"data-name": "valueField",
|
165
165
|
parentRef: popoverRef,
|
166
|
-
type: type
|
166
|
+
type: type,
|
167
|
+
closePopover: closePopover
|
168
|
+
});
|
169
|
+
};
|
170
|
+
const renderItemOption = (popoverRef, closePopover) => {
|
171
|
+
return /*#__PURE__*/React__default.createElement(ItemOption, {
|
172
|
+
conditionState: {
|
173
|
+
value: property,
|
174
|
+
label: propertyText
|
175
|
+
},
|
176
|
+
onChange: onPropertyChangeHandler,
|
177
|
+
config: {
|
178
|
+
options: inputConfig?.properties
|
179
|
+
},
|
180
|
+
closePopover: closePopover
|
167
181
|
});
|
168
182
|
};
|
169
183
|
return /*#__PURE__*/React__default.createElement("div", _extends({
|
@@ -213,17 +227,9 @@ const ConditionBlock = props => {
|
|
213
227
|
condition: condition,
|
214
228
|
type: type,
|
215
229
|
description: description,
|
216
|
-
onChange: onPropertyChangeHandler
|
217
|
-
}, /*#__PURE__*/React__default.createElement(ItemOption, {
|
218
|
-
conditionState: {
|
219
|
-
value: property,
|
220
|
-
label: propertyText
|
221
|
-
},
|
222
230
|
onChange: onPropertyChangeHandler,
|
223
|
-
|
224
|
-
|
225
|
-
}
|
226
|
-
})), checkIsValid(property) && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
|
231
|
+
renderChildren: renderItemOption
|
232
|
+
}), checkIsValid(property) && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
|
227
233
|
label: operator,
|
228
234
|
title: operatorText,
|
229
235
|
"data-name": "operatorField",
|
@@ -18,7 +18,7 @@ interface ConditionBuilderItemProps extends PropsWithChildren {
|
|
18
18
|
description?: string;
|
19
19
|
condition?: Action & Condition;
|
20
20
|
config?: ConfigType;
|
21
|
-
renderChildren?: (ref: Ref<HTMLDivElement
|
21
|
+
renderChildren?: (ref: Ref<HTMLDivElement | null>, closePopover: () => void) => ReactNode;
|
22
22
|
onChange?: (val: string) => void;
|
23
23
|
tabIndex?: number;
|
24
24
|
onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
@@ -89,7 +89,9 @@ const ConditionBuilderItem = _ref => {
|
|
89
89
|
}
|
90
90
|
if (condition.popoverToOpen == currentField) {
|
91
91
|
//current popover need to be opened
|
92
|
-
|
92
|
+
setTimeout(() => {
|
93
|
+
openPopOver();
|
94
|
+
});
|
93
95
|
}
|
94
96
|
} else {
|
95
97
|
// when we change any statement(if/ excl.if) which is not part of condition state, label change is triggered.
|
@@ -126,7 +128,7 @@ const ConditionBuilderItem = _ref => {
|
|
126
128
|
}
|
127
129
|
};
|
128
130
|
const handleKeyDownHandler = evt => {
|
129
|
-
handleKeyDownForPopover(evt, conditionBuilderRef, popoverRef);
|
131
|
+
handleKeyDownForPopover(evt, conditionBuilderRef, popoverRef, closePopover);
|
130
132
|
if (evt.key === 'Escape') {
|
131
133
|
manageInvalidSelection();
|
132
134
|
}
|
@@ -178,7 +180,7 @@ const ConditionBuilderItem = _ref => {
|
|
178
180
|
className: `${blockClass}__item__title`
|
179
181
|
}, title), /*#__PURE__*/React__default.createElement("div", {
|
180
182
|
className: `${blockClass}__popover-content`
|
181
|
-
}, renderChildren ? renderChildren(popoverRef) : children)))));
|
183
|
+
}, renderChildren ? renderChildren(popoverRef, closePopover) : children)))));
|
182
184
|
};
|
183
185
|
ConditionBuilderItem.propTypes = {
|
184
186
|
/**
|
@@ -17,9 +17,10 @@ interface ItemOptionProps {
|
|
17
17
|
isStatement?: boolean;
|
18
18
|
};
|
19
19
|
onChange: (value: string, e: Event) => void;
|
20
|
+
closePopover?: () => void;
|
20
21
|
}
|
21
22
|
export declare const ItemOption: {
|
22
|
-
({ conditionState, config, onChange, }: ItemOptionProps): React.JSX.Element | undefined;
|
23
|
+
({ conditionState, config, onChange, closePopover, }: ItemOptionProps): React.JSX.Element | undefined;
|
23
24
|
propTypes: {
|
24
25
|
/**
|
25
26
|
* current condition object
|
package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js
CHANGED
@@ -17,7 +17,8 @@ const ItemOption = _ref => {
|
|
17
17
|
let {
|
18
18
|
conditionState = {},
|
19
19
|
config = {},
|
20
|
-
onChange
|
20
|
+
onChange,
|
21
|
+
closePopover
|
21
22
|
} = _ref;
|
22
23
|
const {
|
23
24
|
popOverSearchThreshold
|
@@ -71,7 +72,9 @@ const ItemOption = _ref => {
|
|
71
72
|
labelText: clearSearchText,
|
72
73
|
closeButtonLabelText: clearSearchText,
|
73
74
|
onChange: onSearchChangeHandler,
|
74
|
-
onKeyDown: evt =>
|
75
|
+
onKeyDown: evt => {
|
76
|
+
onKeyDownHandlerForSearch(evt, conditionBuilderRef, closePopover);
|
77
|
+
}
|
75
78
|
})), /*#__PURE__*/React__default.createElement("ul", {
|
76
79
|
"aria-label": getAriaLabel(),
|
77
80
|
role: "listbox"
|
@@ -12,9 +12,10 @@ interface ItemOptionForValueFieldProps {
|
|
12
12
|
};
|
13
13
|
config: PropertyConfigOption['config'];
|
14
14
|
onChange: (value: any, e?: Event) => void;
|
15
|
+
closePopover?: () => void;
|
15
16
|
}
|
16
17
|
export declare const ItemOptionForValueField: {
|
17
|
-
({ conditionState, config, onChange, }: ItemOptionForValueFieldProps): React.JSX.Element;
|
18
|
+
({ conditionState, config, onChange, closePopover, }: ItemOptionForValueFieldProps): React.JSX.Element;
|
18
19
|
propTypes: {
|
19
20
|
/**
|
20
21
|
* current condition object
|
@@ -18,7 +18,8 @@ const ItemOptionForValueField = _ref => {
|
|
18
18
|
let {
|
19
19
|
conditionState = {},
|
20
20
|
config = {},
|
21
|
-
onChange
|
21
|
+
onChange,
|
22
|
+
closePopover
|
22
23
|
} = _ref;
|
23
24
|
const multiSelectable = checkForMultiSelectOperator(conditionState, config);
|
24
25
|
const {
|
@@ -123,7 +124,9 @@ const ItemOptionForValueField = _ref => {
|
|
123
124
|
labelText: clearSearchText,
|
124
125
|
closeButtonLabelText: clearSearchText,
|
125
126
|
onChange: onSearchChangeHandler,
|
126
|
-
onKeyDown: evt =>
|
127
|
+
onKeyDown: evt => {
|
128
|
+
onKeyDownHandlerForSearch(evt, conditionBuilderRef, closePopover);
|
129
|
+
}
|
127
130
|
})), multiSelectable && /*#__PURE__*/React__default.createElement("div", {
|
128
131
|
className: `${blockClass}__multiselectSelectionStatusContainer`
|
129
132
|
}, /*#__PURE__*/React__default.createElement("label", null, selection.length, "/", allOptions.length, " Selected"), /*#__PURE__*/React__default.createElement(Button, {
|
@@ -9,10 +9,18 @@ import { PropertyConfigTime } from '../../ConditionBuilder.types';
|
|
9
9
|
interface ConditionBuilderItemTime {
|
10
10
|
onChange: (value: string | undefined) => void;
|
11
11
|
config: PropertyConfigTime['config'];
|
12
|
+
conditionState: {
|
13
|
+
label?: string;
|
14
|
+
value?: string;
|
15
|
+
};
|
12
16
|
}
|
13
17
|
export declare const ConditionBuilderItemTime: {
|
14
|
-
({ onChange, config, }: ConditionBuilderItemTime): React.JSX.Element;
|
18
|
+
({ onChange, config, conditionState, }: ConditionBuilderItemTime): React.JSX.Element;
|
15
19
|
propTypes: {
|
20
|
+
/**
|
21
|
+
* current condition object
|
22
|
+
*/
|
23
|
+
conditionState: any;
|
16
24
|
/**
|
17
25
|
* current config object that this property is part of
|
18
26
|
*/
|