@carbon/ibm-products 2.43.2-canary.19 → 2.43.2-canary.20

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. package/css/index-full-carbon.css +32 -1
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +32 -1
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +32 -1
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +23 -21
  14. package/es/components/ConditionBuilder/ConditionBuilder.js +67 -20
  15. package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.d.ts +15 -0
  16. package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +129 -0
  17. package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +6 -4
  18. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +5 -1
  19. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +16 -4
  20. package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +2 -2
  21. package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +2 -2
  22. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +9 -11
  23. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +36 -32
  24. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +0 -1
  25. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +7 -2
  26. package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +6 -1
  27. package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +18 -10
  28. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +39 -36
  29. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +12 -10
  30. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +1 -1
  31. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +24 -16
  32. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +19 -4
  33. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +13 -0
  34. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +109 -0
  35. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.d.ts → ItemOptionForValueField.d.ts} +2 -2
  36. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js} +58 -33
  37. package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +4 -6
  38. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +14 -5
  39. package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
  40. package/es/components/ConditionBuilder/utils/util.d.ts +1 -0
  41. package/es/components/ConditionBuilder/utils/util.js +16 -1
  42. package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +23 -21
  43. package/lib/components/ConditionBuilder/ConditionBuilder.js +67 -20
  44. package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.d.ts +15 -0
  45. package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +137 -0
  46. package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +6 -3
  47. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +5 -1
  48. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +16 -4
  49. package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +2 -2
  50. package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +2 -2
  51. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +9 -11
  52. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +36 -32
  53. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +0 -1
  54. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +7 -2
  55. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +6 -1
  56. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +18 -10
  57. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +39 -36
  58. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +12 -10
  59. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +1 -1
  60. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +23 -15
  61. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +20 -5
  62. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +13 -0
  63. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +117 -0
  64. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.d.ts → ItemOptionForValueField.d.ts} +2 -2
  65. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js} +56 -31
  66. package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +4 -6
  67. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +14 -4
  68. package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
  69. package/lib/components/ConditionBuilder/utils/util.d.ts +1 -0
  70. package/lib/components/ConditionBuilder/utils/util.js +17 -0
  71. package/package.json +3 -3
  72. package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +9 -1
  73. package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +26 -1
  74. package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +0 -1
  75. package/es/components/ConditionBuilder/utils/checkForHoldingKey.js +0 -16
  76. package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +0 -1
  77. package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js +0 -20
@@ -21,28 +21,51 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
21
21
 
22
22
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
23
 
24
- var _CheckboxCheckedFille, _Checkbox, _SelectSkeleton;
25
- var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
24
+ var _SelectSkeleton, _CheckboxCheckedFille, _Checkbox;
25
+ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
26
26
  var _ref$conditionState = _ref.conditionState,
27
27
  conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
28
28
  _ref$config = _ref.config,
29
29
  config = _ref$config === void 0 ? {} : _ref$config,
30
30
  onChange = _ref.onChange;
31
- var multiSelectable = conditionState.operator === 'one-of';
31
+ var multiSelectable = conditionState.operator === 'one_of';
32
32
  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
33
33
  popOverSearchThreshold = _useContext.popOverSearchThreshold,
34
- getOptions = _useContext.getOptions;
34
+ getOptions = _useContext.getOptions,
35
+ rootState = _useContext.rootState;
36
+ var contentRef = React.useRef();
35
37
  var _useState = React.useState(config.options),
36
38
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
37
39
  allOptions = _useState2[0],
38
40
  setAllOptions = _useState2[1];
39
- var _useState3 = React.useState(config.options),
41
+ var _useState3 = React.useState(''),
40
42
  _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
41
- filteredItems = _useState4[0],
42
- setFilteredItems = _useState4[1];
43
+ searchValue = _useState4[0],
44
+ setSearchValue = _useState4[1];
45
+ var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
46
+ return opt.label.toLowerCase().includes(searchValue.toLowerCase());
47
+ });
43
48
  var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
44
- var contentRef = React.useRef();
45
49
  React.useEffect(function () {
50
+ // if(rest['data-name'] == 'valueField'){
51
+ // const fetchData = async () => {
52
+ // const response = await config.options(conditionState);
53
+ // if (
54
+ // response?.length > 0 &&
55
+ // Object.keys(response[0]).includes('label') &&
56
+ // Object.keys(response[0]).includes('id')
57
+ // ) {
58
+ // setAllOptions(response);
59
+ // setFilteredItems(response);
60
+ // }
61
+ // };
62
+
63
+ // fetchData(); // Call the async method
64
+ // }else{
65
+ // setAllOptions(config.options);
66
+ // setFilteredItems(config.options);
67
+ // }
68
+
46
69
  if (!allOptions && getOptions) {
47
70
  var fetchData = /*#__PURE__*/function () {
48
71
  var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
@@ -51,12 +74,11 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
51
74
  while (1) switch (_context.prev = _context.next) {
52
75
  case 0:
53
76
  _context.next = 2;
54
- return getOptions(conditionState);
77
+ return getOptions(rootState, conditionState);
55
78
  case 2:
56
79
  response = _context.sent;
57
80
  if ((response === null || response === void 0 ? void 0 : response.length) > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
58
81
  setAllOptions(response);
59
- setFilteredItems(response);
60
82
  }
61
83
  case 4:
62
84
  case "end":
@@ -76,46 +98,47 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
76
98
  //this will focus the first input field in the popover
77
99
 
78
100
  if (contentRef.current) {
79
- var _contentRef$current;
80
- var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
81
- firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
101
+ var firstFocusableElement = contentRef.current.querySelector('input, button,li');
102
+ if (firstFocusableElement) {
103
+ firstFocusableElement.focus();
104
+ }
82
105
  }
83
- // eslint-disable-next-line react-hooks/exhaustive-deps
84
106
  }, [allOptions]);
85
107
  var handleSelectAll = function handleSelectAll(evt) {
86
108
  if (evt.currentTarget.dataset.selectedAll == 'false') {
87
109
  onChange(undefined);
88
110
  } else {
89
- onChange(allOptions.map(function (op) {
90
- return op.id;
91
- }));
111
+ onChange(allOptions);
92
112
  }
93
113
  };
94
114
  var onSearchChangeHandler = function onSearchChangeHandler(evt) {
95
115
  var value = evt.target.value;
96
- var _filteredItems = allOptions.filter(function (opt) {
97
- return opt.label.toLowerCase().includes(value.toLowerCase());
98
- });
99
- setFilteredItems(_filteredItems);
116
+ setSearchValue(value);
100
117
  };
101
118
  var onClickHandler = function onClickHandler(evt, option, isSelected) {
102
119
  if (multiSelectable) {
103
120
  if (isSelected) {
104
121
  var items = selection.filter(function (v) {
105
- return v !== option.id;
122
+ return v.id !== option.id;
106
123
  });
107
124
  onChange(items.length > 0 ? items : undefined, evt);
108
125
  } else {
109
- onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), evt);
126
+ onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option]), evt);
110
127
  }
111
128
  } else {
112
- onChange(option.id, evt);
129
+ onChange(option, evt);
113
130
  }
114
131
  };
115
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, allOptions && /*#__PURE__*/React__default["default"].createElement("div", {
132
+ var getAriaLabel = function getAriaLabel() {
133
+ return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property');
134
+ };
135
+ if (!allOptions) {
136
+ return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null));
137
+ }
138
+ return /*#__PURE__*/React__default["default"].createElement("div", {
116
139
  className: "".concat(DataConfigs.blockClass, "__item-option"),
117
140
  ref: contentRef
118
- }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default["default"].createElement("div", {
141
+ }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default["default"].createElement("div", {
119
142
  className: "".concat(DataConfigs.blockClass, "__item-option__search")
120
143
  }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
121
144
  size: "sm",
@@ -131,11 +154,13 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
131
154
  onClick: handleSelectAll,
132
155
  className: "".concat(DataConfigs.blockClass, "__selectAll-button")
133
156
  }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default["default"].createElement("ul", {
134
- "aria-label": conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property'),
157
+ "aria-label": getAriaLabel(),
135
158
  role: "listbox",
136
159
  "data-multi-select": multiSelectable
137
160
  }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
138
- var isSelected = selection.includes(option.id);
161
+ var isSelected = selection.map(function (option) {
162
+ return option.id;
163
+ }).includes(option.id);
139
164
  var Icon = option.icon;
140
165
  return /*#__PURE__*/React__default["default"].createElement("li", {
141
166
  tabIndex: 0,
@@ -162,9 +187,9 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
162
187
  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
163
188
  className: "".concat(DataConfigs.blockClass, "__checkmark")
164
189
  }))));
165
- }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null))));
190
+ })));
166
191
  };
167
- ConditionBuilderItemOption.propTypes = {
192
+ ItemOptionForValueField.propTypes = {
168
193
  /**
169
194
  * current condition object
170
195
  */
@@ -179,4 +204,4 @@ ConditionBuilderItemOption.propTypes = {
179
204
  onChange: index["default"].func
180
205
  };
181
206
 
182
- exports.ConditionBuilderItemOption = ConditionBuilderItemOption;
207
+ exports.ItemOptionForValueField = ItemOptionForValueField;
@@ -16,12 +16,12 @@ var index = require('../../../node_modules/prop-types/index.js');
16
16
  var cx = require('classnames');
17
17
  var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
18
18
  var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
19
- var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
20
19
  var util = require('../utils/util.js');
21
20
  var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
22
21
  var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
23
22
  var uuidv4 = require('../../../global/js/utils/uuidv4.js');
24
23
  var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
24
+ var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
25
25
 
26
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
27
 
@@ -29,7 +29,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
29
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
30
30
 
31
31
  var _ConditionPreview, _ConditionPreview2;
32
-
33
32
  /**
34
33
  *
35
34
  * state - this is the current group that is being rendered . This can be a inner group or outer group
@@ -94,7 +93,6 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
94
93
  var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
95
94
  onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
96
95
  conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
97
- groupSeparateOperator: null,
98
96
  groupOperator: 'and',
99
97
  statement: 'if',
100
98
  conditions: [{
@@ -187,7 +185,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
187
185
  "data-name": "connectorField",
188
186
  popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
189
187
  className: "".concat(DataConfigs.blockClass, "__statement-button")
190
- }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
188
+ }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
191
189
  conditionState: {
192
190
  value: group.statement,
193
191
  label: DataConfigs.translateWithId('condition')
@@ -223,7 +221,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
223
221
  onRemoveHandler(eachCondition.id, e);
224
222
  },
225
223
  conditionBuilderRef: conditionBuilderRef
226
- })) : /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
224
+ })) : /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
227
225
  conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
228
226
  aria: {
229
227
  level: aria.level + 1,
@@ -253,7 +251,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
253
251
  },
254
252
  hideConditionPreviewHandler: hideConditionPreviewHandler,
255
253
  isLastCondition: isLastCondition
256
- }), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
254
+ })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
257
255
  previewType: "subGroup"
258
256
  }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
259
257
  previewType: "condition"
@@ -9,7 +9,9 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
+ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
12
13
  var React = require('react');
14
+ var cx = require('classnames');
13
15
  var index = require('../../../node_modules/prop-types/index.js');
14
16
  var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
15
17
  var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
@@ -18,9 +20,17 @@ var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnecto
18
20
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
21
 
20
22
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
21
24
 
22
25
  var ConditionPreview = function ConditionPreview(_ref) {
23
26
  var previewType = _ref.previewType;
27
+ var _useState = React.useState(false),
28
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
29
+ animate = _useState2[0],
30
+ setAnimate = _useState2[1];
31
+ React.useEffect(function () {
32
+ setAnimate(true);
33
+ }, []);
24
34
  var getConditionSection = function getConditionSection() {
25
35
  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
26
36
  label: DataConfigs.translateWithId('property')
@@ -31,20 +41,20 @@ var ConditionPreview = function ConditionPreview(_ref) {
31
41
  }));
32
42
  };
33
43
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
34
- className: "".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview ")
44
+ className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
35
45
  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
36
46
  className: "".concat(DataConfigs.blockClass, "__statement-button"),
37
47
  label: DataConfigs.translateWithId('and')
38
48
  })), /*#__PURE__*/React__default["default"].createElement("div", {
39
49
  "aria-hidden": true,
40
- className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper")
50
+ className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
41
51
  }, /*#__PURE__*/React__default["default"].createElement("div", {
42
52
  className: "".concat(DataConfigs.blockClass, "__gap")
43
53
  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
44
54
  className: "".concat(DataConfigs.blockClass, "__statement-button"),
45
55
  label: DataConfigs.translateWithId('if')
46
56
  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
47
- className: "".concat(DataConfigs.blockClass, "__group-preview")
57
+ className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
48
58
  }, /*#__PURE__*/React__default["default"].createElement("div", {
49
59
  className: "".concat(DataConfigs.blockClass, "__condition-block ").concat(DataConfigs.blockClass, "__gap")
50
60
  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -57,7 +67,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
57
67
  className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
58
68
  operator: DataConfigs.translateWithId('if')
59
69
  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
60
- className: "".concat(DataConfigs.blockClass, "__group-preview")
70
+ className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
61
71
  }, /*#__PURE__*/React__default["default"].createElement("div", {
62
72
  className: "".concat(DataConfigs.blockClass, "__condition-block ").concat(DataConfigs.blockClass, "__gap")
63
73
  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -11,7 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
13
13
  var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
14
- var checkForHoldingKey = require('./checkForHoldingKey.js');
15
14
  var util = require('./util.js');
16
15
 
17
16
  var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
@@ -25,7 +24,7 @@ var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
25
24
  var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
26
25
  var _parentContainer$quer;
27
26
  var key = evt.key;
28
- var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(evt, 'shiftKey');
27
+ var isHoldingShiftKey = util.checkForHoldingKey(evt, 'shiftKey');
29
28
  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
30
29
  var allItems = [];
31
30
  switch (key) {
@@ -3,3 +3,4 @@ export function focusThisItem(currentElement: any): void;
3
3
  export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
4
4
  export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
5
5
  export function checkForHoldingKey(evt: any, key: any): any;
6
+ export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;
@@ -45,7 +45,24 @@ var traverseReverse = function traverseReverse(eachElem, index, allElements, rot
45
45
  focusThisItem(allElements[allElements.length - 1]);
46
46
  }
47
47
  };
48
+ var checkForHoldingKey = function checkForHoldingKey(evt, key) {
49
+ // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
50
+ if (key === 'cmd') {
51
+ return evt.metaKey || evt.ctrlKey;
52
+ }
53
+ return evt[key];
54
+ };
55
+ var checkDuplicateAction = function checkDuplicateAction(actionState, selectedId, currentActionId) {
56
+ if (selectedId !== currentActionId && actionState.find(function (eachAction) {
57
+ return eachAction.id === selectedId;
58
+ })) {
59
+ return true;
60
+ }
61
+ return false;
62
+ };
48
63
 
64
+ exports.checkDuplicateAction = checkDuplicateAction;
65
+ exports.checkForHoldingKey = checkForHoldingKey;
49
66
  exports.focusThisField = focusThisField;
50
67
  exports.focusThisItem = focusThisItem;
51
68
  exports.traverseClockVise = traverseClockVise;
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.19+648571ed7",
4
+ "version": "2.43.2-canary.20+bd909f77c",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -95,7 +95,7 @@
95
95
  "dependencies": {
96
96
  "@babel/runtime": "^7.23.9",
97
97
  "@carbon/feature-flags": "^0.20.0",
98
- "@carbon/ibm-products-styles": "^2.39.0",
98
+ "@carbon/ibm-products-styles": "^2.39.1-canary.30+bd909f77c",
99
99
  "@carbon/telemetry": "^0.1.0",
100
100
  "@dnd-kit/core": "^6.0.8",
101
101
  "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +119,5 @@
119
119
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
120
120
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
121
121
  },
122
- "gitHead": "648571ed78f6418eae53d3ff10ea7fd89fb8ea45"
122
+ "gitHead": "bd909f77c703d93bfc82eadf96c088b4e10ab5df"
123
123
  }
@@ -1,6 +1,6 @@
1
1
  @use '@carbon/react/scss/theme' as *;
2
2
  @use '@carbon/react/scss/spacing' as *;
3
- @use '@carbon/react/scss/motion';
3
+ @use '@carbon/react/scss/motion' as *;
4
4
  @use '@carbon/styles/scss/components/tag' as *;
5
5
  @use '@carbon/styles/scss/utilities/focus-outline';
6
6
  @use '../../../global/styles/project-settings' as c4p-settings;
@@ -52,8 +52,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
52
52
  text-wrap: nowrap;
53
53
  }
54
54
  .#{$block-class}__group-preview {
55
+ height: 0;
56
+ opacity: 0;
57
+ pointer-events: none;
58
+ transition: all $duration-moderate-02 motion(exit, expressive);
59
+ }
60
+ .#{$block-class}__group-preview-animate {
61
+ height: auto;
55
62
  opacity: 0.5;
56
63
  pointer-events: none;
64
+ transition: all $duration-moderate-02 motion(exit, expressive);
57
65
  }
58
66
  .#{$block-class}__connector-disabled {
59
67
  display: flex;
@@ -212,7 +212,12 @@ $colors: (
212
212
  background-color: $layer;
213
213
  }
214
214
  .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
215
- .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
215
+ .#{$block-class}__condition-wrapper
216
+ > :nth-child(2)
217
+ .#{$block-class}__button:not(
218
+ .#{$block-class}__add-button,
219
+ .#{$block-class}__add_condition_group
220
+ ) {
216
221
  /* stylelint-disable-next-line carbon/theme-token-use */
217
222
  box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
218
223
  }
@@ -229,3 +234,23 @@ $colors: (
229
234
  align-self: center;
230
235
  margin-left: auto;
231
236
  }
237
+ .#{$block-class}__add_condition_group-wrapper {
238
+ z-index: -1;
239
+ margin-left: -50%;
240
+ opacity: 0;
241
+ pointer-events: none;
242
+ // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
243
+ transition: all linear $duration-fast-02;
244
+ }
245
+ .#{$block-class}__add_condition_group-wrapper--show {
246
+ z-index: 0;
247
+ margin-left: 0;
248
+ opacity: 1;
249
+ pointer-events: all;
250
+ // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
251
+ transition: all linear $duration-fast-02;
252
+ }
253
+ .#{$block-class}__invalid-input {
254
+ display: flex;
255
+ color: $support-warning;
256
+ }
@@ -1 +0,0 @@
1
- export function checkForHoldingKey(evt: any, key: any): any;
@@ -1,16 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 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
-
8
- var checkForHoldingKey = function checkForHoldingKey(evt, key) {
9
- // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
10
- if (key === 'cmd') {
11
- return evt.metaKey || evt.ctrlKey;
12
- }
13
- return evt[key];
14
- };
15
-
16
- export { checkForHoldingKey };
@@ -1 +0,0 @@
1
- export function checkForHoldingKey(evt: any, key: any): any;
@@ -1,20 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2020, 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
-
8
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var checkForHoldingKey = function checkForHoldingKey(evt, key) {
13
- // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
14
- if (key === 'cmd') {
15
- return evt.metaKey || evt.ctrlKey;
16
- }
17
- return evt[key];
18
- };
19
-
20
- exports.checkForHoldingKey = checkForHoldingKey;