@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.
@@ -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, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
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 _Heading, _GroupConnector;
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, 1),
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
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
113
- className: "".concat(blockClass, "__addConditionText-button"),
114
- renderIcon: function renderIcon(props) {
115
- return /*#__PURE__*/React__default.createElement(Add, _extends({
116
- size: 16
117
- }, props));
118
- },
119
- iconDescription: startConditionLabel,
120
- kind: "ghost",
121
- size: "sm",
122
- onClick: onStartConditionBuilder
123
- }, startConditionLabel), isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Section, {
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
- }, _Heading || (_Heading = /*#__PURE__*/React__default.createElement(Heading, null, "Condition"))), /*#__PURE__*/React__default.createElement("div", {
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
- })), isConditionBuilderActive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == 'tree' && /*#__PURE__*/React__default.createElement("div", {
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
- }))), isConditionBuilderActive && actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
175
+ })), actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
174
176
  actions: actions,
175
177
  className: "".concat(blockClass, "__actions-container"),
176
178
  variant: variant
@@ -38,4 +38,5 @@ export namespace translationsObject {
38
38
  let invalidNumberWarnText: string;
39
39
  let conditionBuilderText: string;
40
40
  let actionSectionText: string;
41
+ let conditionHeadingText: string;
41
42
  }
@@ -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
- manageTabIndexAndFocus(nextRow, conditionBuilderRef);
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
- var _nextRow$querySelecto;
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 _Heading, _GroupConnector;
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, 1),
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
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
121
- className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
122
- renderIcon: function renderIcon(props) {
123
- return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
124
- size: 16
125
- }, props));
126
- },
127
- iconDescription: startConditionLabel,
128
- kind: "ghost",
129
- size: "sm",
130
- onClick: onStartConditionBuilder
131
- }, startConditionLabel), isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Section, {
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
- }, _Heading || (_Heading = /*#__PURE__*/React__default["default"].createElement(react.Heading, null, "Condition"))), /*#__PURE__*/React__default["default"].createElement("div", {
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
- })), isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == 'tree' && /*#__PURE__*/React__default["default"].createElement("div", {
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
- }))), isConditionBuilderActive && actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
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
@@ -38,4 +38,5 @@ export namespace translationsObject {
38
38
  let invalidNumberWarnText: string;
39
39
  let conditionBuilderText: string;
40
40
  let actionSectionText: string;
41
+ let conditionHeadingText: string;
41
42
  }
@@ -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
- util.manageTabIndexAndFocus(nextRow, conditionBuilderRef);
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
- var _nextRow$querySelecto;
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.81+1b5cdaf01",
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.39.1-canary.91+1b5cdaf01",
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": "1b5cdaf01d8c95acfed93d1c3dee03af7afa093f"
123
+ "gitHead": "9b0d58d318e27eb456613a6d1843edb60fba19a0"
124
124
  }