@carbon/ibm-products 2.43.2-canary.81 → 2.43.2-canary.83
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/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +22 -20
- package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +1 -0
- package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +2 -1
- package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +13 -3
- package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
- package/es/components/ConditionBuilder/utils/util.d.ts +0 -1
- package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +21 -19
- package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +1 -0
- package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +2 -1
- package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +13 -3
- package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
- package/lib/components/ConditionBuilder/utils/util.d.ts +0 -1
- package/package.json +3 -3
@@ -5,7 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2,
|
8
|
+
import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import React__default, { useContext, useState, useEffect, useCallback } from 'react';
|
10
10
|
import PropTypes from '../../../node_modules/prop-types/index.js';
|
11
11
|
import { Button, Section, Heading } from '@carbon/react';
|
@@ -20,7 +20,7 @@ import GroupConnector from '../ConditionBuilderConnector/GroupConnector.js';
|
|
20
20
|
import ConditionBuilderActions from '../ConditionBuilderActions/ConditionBuilderActions.js';
|
21
21
|
import { useTranslations } from '../utils/useTranslations.js';
|
22
22
|
|
23
|
-
var
|
23
|
+
var _GroupConnector;
|
24
24
|
var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
25
25
|
var _rootState$groups2;
|
26
26
|
var startConditionLabel = _ref.startConditionLabel,
|
@@ -41,9 +41,10 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
41
41
|
_useState4 = _slicedToArray(_useState3, 2),
|
42
42
|
showConditionGroupPreview = _useState4[0],
|
43
43
|
setShowConditionGroupPreview = _useState4[1];
|
44
|
-
var _useTranslations = useTranslations(['addConditionGroupText']),
|
45
|
-
_useTranslations2 = _slicedToArray(_useTranslations,
|
46
|
-
addConditionGroupText = _useTranslations2[0]
|
44
|
+
var _useTranslations = useTranslations(['addConditionGroupText', 'conditionHeadingText']),
|
45
|
+
_useTranslations2 = _slicedToArray(_useTranslations, 2),
|
46
|
+
addConditionGroupText = _useTranslations2[0],
|
47
|
+
conditionHeadingText = _useTranslations2[1];
|
47
48
|
var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
|
48
49
|
setShowConditionGroupPreview(true);
|
49
50
|
};
|
@@ -109,21 +110,22 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
109
110
|
groups: [].concat(_toConsumableArray(rootState.groups), [newGroup])
|
110
111
|
}));
|
111
112
|
};
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
},
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
}
|
113
|
+
if (!isConditionBuilderActive) {
|
114
|
+
return /*#__PURE__*/React__default.createElement(Button, {
|
115
|
+
className: "".concat(blockClass, "__addConditionText-button"),
|
116
|
+
renderIcon: function renderIcon(props) {
|
117
|
+
return /*#__PURE__*/React__default.createElement(Add, props);
|
118
|
+
},
|
119
|
+
iconDescription: startConditionLabel,
|
120
|
+
kind: "ghost",
|
121
|
+
size: "sm",
|
122
|
+
onClick: onStartConditionBuilder
|
123
|
+
}, startConditionLabel);
|
124
|
+
}
|
125
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Section, {
|
124
126
|
className: "".concat(blockClass, "__heading"),
|
125
127
|
level: 4
|
126
|
-
},
|
128
|
+
}, /*#__PURE__*/React__default.createElement(Heading, null, conditionHeadingText)), /*#__PURE__*/React__default.createElement("div", {
|
127
129
|
className: "".concat(blockClass, "__content-container"),
|
128
130
|
role: "treegrid",
|
129
131
|
"aria-label": "condition builder tree"
|
@@ -146,7 +148,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
146
148
|
onChangeHandler(updatedGroup, groupIndex);
|
147
149
|
}
|
148
150
|
}), groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))));
|
149
|
-
})),
|
151
|
+
})), variant == 'tree' && /*#__PURE__*/React__default.createElement("div", {
|
150
152
|
role: "row",
|
151
153
|
tabIndex: -1,
|
152
154
|
"aria-level": 1,
|
@@ -170,7 +172,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
170
172
|
group: {
|
171
173
|
groupOperator: rootState.operator
|
172
174
|
}
|
173
|
-
}))
|
175
|
+
})), actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
|
174
176
|
actions: actions,
|
175
177
|
className: "".concat(blockClass, "__actions-container"),
|
176
178
|
variant: variant
|
@@ -44,7 +44,8 @@ var translationsObject = {
|
|
44
44
|
invalidText: 'Incomplete',
|
45
45
|
invalidNumberWarnText: 'Invalid number, must be 0 or greater',
|
46
46
|
conditionBuilderText: 'Condition Builder',
|
47
|
-
actionSectionText: 'Action Section'
|
47
|
+
actionSectionText: 'Action Section',
|
48
|
+
conditionHeadingText: 'Condition'
|
48
49
|
};
|
49
50
|
|
50
51
|
export { translationsObject };
|
@@ -54,10 +54,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
|
|
54
54
|
var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
|
55
55
|
if (group.conditions.length > 1) {
|
56
56
|
variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
|
57
|
-
if (group.conditions[1].conditions) {
|
57
|
+
if (group.conditions[1].conditions && group.conditions[1].id !== conditionId) {
|
58
58
|
//when we remove every plain conditions of a group without deleting the subgroup, we need to restructure the group
|
59
59
|
//the inner group become outer group and same level subgroups become plain conditions
|
60
60
|
|
61
|
+
//ensure we are deleting last condition , not the subgroup
|
62
|
+
|
61
63
|
//spreading out the condition inside the subgroup
|
62
64
|
var allConditions = group.conditions.reduce(function (acc, item) {
|
63
65
|
if (item.conditions) {
|
@@ -145,9 +147,17 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
|
|
145
147
|
var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === void 0 ? void 0 : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
|
146
148
|
var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === void 0 ? void 0 : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
|
147
149
|
if (nextRow) {
|
148
|
-
|
150
|
+
//since there are no condition in current group, this group will move one level up
|
151
|
+
|
152
|
+
var rowIdentity = {
|
153
|
+
ariaLevel: Number(nextRow.ariaLevel) - 1,
|
154
|
+
ariaPosInSet: nextRow.ariaPosInSet
|
155
|
+
};
|
156
|
+
setTimeout(function () {
|
157
|
+
var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
|
158
|
+
manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
|
159
|
+
}, 0);
|
149
160
|
} else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
|
150
|
-
// prevRows[prevRows.length - 2].setAttribute('tabindex', '0');
|
151
161
|
manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
|
152
162
|
}
|
153
163
|
}
|
@@ -203,8 +203,7 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
|
|
203
203
|
var nextRow = rows[nextRowIndex];
|
204
204
|
var itemName = evt.target.dataset.name;
|
205
205
|
if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
|
206
|
-
|
207
|
-
nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
|
206
|
+
manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
|
208
207
|
} else if (variant === 'tree') {
|
209
208
|
//when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
|
210
209
|
manageTabIndexAndFocus(nextRow, conditionBuilderRef);
|
@@ -3,6 +3,5 @@ export function focusThisItem(currentElement: any, conditionBuilderRef: any): vo
|
|
3
3
|
export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
|
4
4
|
export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
|
5
5
|
export function checkForHoldingKey(evt: any, key: any): any;
|
6
|
-
export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;
|
7
6
|
export function checkIsValid(item: any): any;
|
8
7
|
export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;
|
@@ -28,7 +28,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
28
28
|
|
29
29
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
30
30
|
|
31
|
-
var
|
31
|
+
var _GroupConnector;
|
32
32
|
var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
33
33
|
var _rootState$groups2;
|
34
34
|
var startConditionLabel = _ref.startConditionLabel,
|
@@ -49,9 +49,10 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
49
49
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
50
50
|
showConditionGroupPreview = _useState4[0],
|
51
51
|
setShowConditionGroupPreview = _useState4[1];
|
52
|
-
var _useTranslations = useTranslations.useTranslations(['addConditionGroupText']),
|
53
|
-
_useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations,
|
54
|
-
addConditionGroupText = _useTranslations2[0]
|
52
|
+
var _useTranslations = useTranslations.useTranslations(['addConditionGroupText', 'conditionHeadingText']),
|
53
|
+
_useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
|
54
|
+
addConditionGroupText = _useTranslations2[0],
|
55
|
+
conditionHeadingText = _useTranslations2[1];
|
55
56
|
var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
|
56
57
|
setShowConditionGroupPreview(true);
|
57
58
|
};
|
@@ -117,21 +118,22 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
117
118
|
groups: [].concat(_rollupPluginBabelHelpers.toConsumableArray(rootState.groups), [newGroup])
|
118
119
|
}));
|
119
120
|
};
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
},
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
}
|
121
|
+
if (!isConditionBuilderActive) {
|
122
|
+
return /*#__PURE__*/React__default["default"].createElement(react.Button, {
|
123
|
+
className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
|
124
|
+
renderIcon: function renderIcon(props) {
|
125
|
+
return /*#__PURE__*/React__default["default"].createElement(icons.Add, props);
|
126
|
+
},
|
127
|
+
iconDescription: startConditionLabel,
|
128
|
+
kind: "ghost",
|
129
|
+
size: "sm",
|
130
|
+
onClick: onStartConditionBuilder
|
131
|
+
}, startConditionLabel);
|
132
|
+
}
|
133
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Section, {
|
132
134
|
className: "".concat(DataConfigs.blockClass, "__heading"),
|
133
135
|
level: 4
|
134
|
-
},
|
136
|
+
}, /*#__PURE__*/React__default["default"].createElement(react.Heading, null, conditionHeadingText)), /*#__PURE__*/React__default["default"].createElement("div", {
|
135
137
|
className: "".concat(DataConfigs.blockClass, "__content-container"),
|
136
138
|
role: "treegrid",
|
137
139
|
"aria-label": "condition builder tree"
|
@@ -154,7 +156,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
154
156
|
onChangeHandler(updatedGroup, groupIndex);
|
155
157
|
}
|
156
158
|
}), groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default["default"].createElement(GroupConnector["default"], null))));
|
157
|
-
})),
|
159
|
+
})), variant == 'tree' && /*#__PURE__*/React__default["default"].createElement("div", {
|
158
160
|
role: "row",
|
159
161
|
tabIndex: -1,
|
160
162
|
"aria-level": 1,
|
@@ -178,7 +180,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
|
|
178
180
|
group: {
|
179
181
|
groupOperator: rootState.operator
|
180
182
|
}
|
181
|
-
}))
|
183
|
+
})), actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
|
182
184
|
actions: actions,
|
183
185
|
className: "".concat(DataConfigs.blockClass, "__actions-container"),
|
184
186
|
variant: variant
|
@@ -48,7 +48,8 @@ var translationsObject = {
|
|
48
48
|
invalidText: 'Incomplete',
|
49
49
|
invalidNumberWarnText: 'Invalid number, must be 0 or greater',
|
50
50
|
conditionBuilderText: 'Condition Builder',
|
51
|
-
actionSectionText: 'Action Section'
|
51
|
+
actionSectionText: 'Action Section',
|
52
|
+
conditionHeadingText: 'Condition'
|
52
53
|
};
|
53
54
|
|
54
55
|
exports.translationsObject = translationsObject;
|
@@ -63,10 +63,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
|
|
63
63
|
var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
|
64
64
|
if (group.conditions.length > 1) {
|
65
65
|
variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
|
66
|
-
if (group.conditions[1].conditions) {
|
66
|
+
if (group.conditions[1].conditions && group.conditions[1].id !== conditionId) {
|
67
67
|
//when we remove every plain conditions of a group without deleting the subgroup, we need to restructure the group
|
68
68
|
//the inner group become outer group and same level subgroups become plain conditions
|
69
69
|
|
70
|
+
//ensure we are deleting last condition , not the subgroup
|
71
|
+
|
70
72
|
//spreading out the condition inside the subgroup
|
71
73
|
var allConditions = group.conditions.reduce(function (acc, item) {
|
72
74
|
if (item.conditions) {
|
@@ -154,9 +156,17 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
|
|
154
156
|
var prevRows = (_conditionBuilderCont3 = conditionBuilderContentRef.current) === null || _conditionBuilderCont3 === void 0 ? void 0 : _conditionBuilderCont3.querySelectorAll("[aria-level=\"".concat(Number(currentLevel) - 1, "\"][role=\"row\"]"));
|
155
157
|
var nextRow = (_conditionBuilderCont4 = conditionBuilderContentRef.current) === null || _conditionBuilderCont4 === void 0 ? void 0 : _conditionBuilderCont4.querySelector("[aria-level=\"".concat(Number(currentLevel) + 1, "\"][role=\"row\"]"));
|
156
158
|
if (nextRow) {
|
157
|
-
|
159
|
+
//since there are no condition in current group, this group will move one level up
|
160
|
+
|
161
|
+
var rowIdentity = {
|
162
|
+
ariaLevel: Number(nextRow.ariaLevel) - 1,
|
163
|
+
ariaPosInSet: nextRow.ariaPosInSet
|
164
|
+
};
|
165
|
+
setTimeout(function () {
|
166
|
+
var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
|
167
|
+
util.manageTabIndexAndFocus(currentRowToFocus, conditionBuilderRef);
|
168
|
+
}, 0);
|
158
169
|
} else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
|
159
|
-
// prevRows[prevRows.length - 2].setAttribute('tabindex', '0');
|
160
170
|
util.manageTabIndexAndFocus(prevRows[prevRows.length - 2], conditionBuilderRef);
|
161
171
|
}
|
162
172
|
}
|
@@ -207,8 +207,7 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
|
|
207
207
|
var nextRow = rows[nextRowIndex];
|
208
208
|
var itemName = evt.target.dataset.name;
|
209
209
|
if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
|
210
|
-
|
211
|
-
nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
|
210
|
+
util.manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
|
212
211
|
} else if (variant === 'tree') {
|
213
212
|
//when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
|
214
213
|
util.manageTabIndexAndFocus(nextRow, conditionBuilderRef);
|
@@ -3,6 +3,5 @@ export function focusThisItem(currentElement: any, conditionBuilderRef: any): vo
|
|
3
3
|
export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
|
4
4
|
export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
|
5
5
|
export function checkForHoldingKey(evt: any, key: any): any;
|
6
|
-
export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;
|
7
6
|
export function checkIsValid(item: any): any;
|
8
7
|
export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;
|
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.83+9b0d58d31",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -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.41.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": "9b0d58d318e27eb456613a6d1843edb60fba19a0"
|
124
124
|
}
|