@carbon/ibm-products 2.44.0 → 2.45.0-rc.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.
Files changed (195) hide show
  1. package/css/index-full-carbon.css +118 -15
  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-released-only.css +203 -5
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +118 -15
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +118 -15
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Coachmark/Coachmark.js +12 -7
  18. package/es/components/CoachmarkFixed/CoachmarkFixed.js +13 -11
  19. package/es/components/CoachmarkStack/CoachmarkStack.js +7 -3
  20. package/es/components/CoachmarkStack/CoachmarkStackHome.js +8 -4
  21. package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +35 -22
  22. package/es/components/ConditionBuilder/ConditionBuilder.js +17 -7
  23. package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.d.ts +2 -2
  24. package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +58 -36
  25. package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.d.ts +3 -1
  26. package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +23 -11
  27. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +4 -1
  28. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +14 -4
  29. package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +8 -4
  30. package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +17 -9
  31. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +29 -16
  32. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +12 -6
  33. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +20 -7
  34. package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +2 -1
  35. package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +23 -20
  36. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +37 -39
  37. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +37 -38
  38. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +3 -1
  39. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +49 -23
  40. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.d.ts +3 -1
  41. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +24 -9
  42. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +12 -9
  43. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +9 -4
  44. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +10 -5
  45. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts +5 -1
  46. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +19 -7
  47. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +1 -1
  48. package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +70 -17
  49. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts +3 -1
  50. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +31 -14
  51. package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -1
  52. package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +120 -28
  53. package/es/components/ConditionBuilder/utils/useTranslations.d.ts +1 -0
  54. package/es/components/ConditionBuilder/utils/useTranslations.js +26 -0
  55. package/es/components/ConditionBuilder/utils/util.js +1 -9
  56. package/es/components/CreateFullPage/CreateFullPage.js +2 -2
  57. package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts +8 -0
  58. package/es/components/DataSpreadsheet/DataSpreadsheet.js +25 -7
  59. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +8 -0
  60. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +13 -3
  61. package/es/components/Datagrid/Datagrid/Datagrid.d.ts +0 -4
  62. package/es/components/Datagrid/Datagrid/Datagrid.js +2 -8
  63. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +12 -7
  64. package/es/components/Datagrid/Datagrid/DatagridRow.js +8 -6
  65. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +2 -1
  66. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -2
  67. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +1 -1
  68. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +1 -2
  69. package/es/components/Datagrid/types/index.d.ts +28 -6
  70. package/es/components/Datagrid/useCustomizeColumns.d.ts +8 -1
  71. package/es/components/Datagrid/useCustomizeColumns.js +4 -3
  72. package/es/components/Datagrid/useDefaultStringRenderer.js +0 -1
  73. package/es/components/Datagrid/useNestedRowExpander.js +1 -3
  74. package/es/components/Datagrid/useRowExpander.js +1 -3
  75. package/es/components/Datagrid/useSelectRows.js +2 -1
  76. package/es/components/Datagrid/useStickyColumn.d.ts +8 -1
  77. package/es/components/Datagrid/useStickyColumn.js +12 -9
  78. package/es/components/EditInPlace/EditInPlace.d.ts +4 -0
  79. package/es/components/EditInPlace/EditInPlace.js +21 -10
  80. package/es/components/EditTearsheet/EditTearsheet.d.ts +2 -1
  81. package/es/components/EditTearsheet/EditTearsheet.js +44 -9
  82. package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +204 -200
  83. package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +116 -112
  84. package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +110 -106
  85. package/es/components/Nav/NavItem.js +12 -3
  86. package/es/components/OptionsTile/OptionsTile.js +11 -6
  87. package/es/components/PageHeader/PageHeader.js +1 -0
  88. package/es/components/SearchBar/SearchBar.d.ts +1 -1
  89. package/es/components/SearchBar/SearchBar.js +2 -2
  90. package/es/components/SidePanel/SidePanel.js +17 -21
  91. package/es/components/SidePanel/motion/variants.d.ts +4 -6
  92. package/es/components/SidePanel/motion/variants.js +10 -11
  93. package/es/components/Tearsheet/TearsheetShell.js +3 -1
  94. package/es/components/WebTerminal/WebTerminal.js +10 -12
  95. package/es/global/js/hooks/usePrefersReducedMotion.js +14 -8
  96. package/es/global/js/package-settings.d.ts +1 -1
  97. package/es/global/js/package-settings.js +1 -1
  98. package/es/settings.d.ts +1 -1
  99. package/lib/components/Coachmark/Coachmark.js +12 -7
  100. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +13 -11
  101. package/lib/components/CoachmarkStack/CoachmarkStack.js +7 -3
  102. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +8 -4
  103. package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +34 -21
  104. package/lib/components/ConditionBuilder/ConditionBuilder.js +17 -7
  105. package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.d.ts +2 -2
  106. package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +56 -33
  107. package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.d.ts +3 -1
  108. package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +22 -10
  109. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +4 -1
  110. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +13 -3
  111. package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +6 -2
  112. package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +16 -8
  113. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +28 -15
  114. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +12 -6
  115. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +20 -7
  116. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +2 -1
  117. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +22 -20
  118. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +37 -39
  119. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +37 -38
  120. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +3 -1
  121. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +48 -22
  122. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.d.ts +3 -1
  123. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js +24 -9
  124. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +11 -8
  125. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +8 -3
  126. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js +9 -4
  127. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts +5 -1
  128. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js +18 -6
  129. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js +1 -1
  130. package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +68 -15
  131. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts +3 -1
  132. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +30 -13
  133. package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts +1 -1
  134. package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +119 -27
  135. package/lib/components/ConditionBuilder/utils/useTranslations.d.ts +1 -0
  136. package/lib/components/ConditionBuilder/utils/useTranslations.js +30 -0
  137. package/lib/components/ConditionBuilder/utils/util.js +0 -9
  138. package/lib/components/CreateFullPage/CreateFullPage.js +2 -2
  139. package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts +8 -0
  140. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +25 -7
  141. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +8 -0
  142. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +13 -3
  143. package/lib/components/Datagrid/Datagrid/Datagrid.d.ts +0 -4
  144. package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -8
  145. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +12 -7
  146. package/lib/components/Datagrid/Datagrid/DatagridRow.js +8 -6
  147. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +2 -1
  148. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -2
  149. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +1 -1
  150. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +1 -2
  151. package/lib/components/Datagrid/types/index.d.ts +28 -6
  152. package/lib/components/Datagrid/useCustomizeColumns.d.ts +8 -1
  153. package/lib/components/Datagrid/useCustomizeColumns.js +4 -3
  154. package/lib/components/Datagrid/useDefaultStringRenderer.js +0 -1
  155. package/lib/components/Datagrid/useNestedRowExpander.js +1 -3
  156. package/lib/components/Datagrid/useRowExpander.js +1 -3
  157. package/lib/components/Datagrid/useSelectRows.js +2 -1
  158. package/lib/components/Datagrid/useStickyColumn.d.ts +8 -1
  159. package/lib/components/Datagrid/useStickyColumn.js +12 -9
  160. package/lib/components/EditInPlace/EditInPlace.d.ts +4 -0
  161. package/lib/components/EditInPlace/EditInPlace.js +21 -10
  162. package/lib/components/EditTearsheet/EditTearsheet.d.ts +2 -1
  163. package/lib/components/EditTearsheet/EditTearsheet.js +43 -8
  164. package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +204 -200
  165. package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +116 -112
  166. package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +110 -106
  167. package/lib/components/Nav/NavItem.js +10 -1
  168. package/lib/components/OptionsTile/OptionsTile.js +11 -6
  169. package/lib/components/PageHeader/PageHeader.js +1 -0
  170. package/lib/components/SearchBar/SearchBar.d.ts +1 -1
  171. package/lib/components/SearchBar/SearchBar.js +2 -2
  172. package/lib/components/SidePanel/SidePanel.js +16 -20
  173. package/lib/components/SidePanel/motion/variants.d.ts +4 -6
  174. package/lib/components/SidePanel/motion/variants.js +10 -11
  175. package/lib/components/Tearsheet/TearsheetShell.js +3 -1
  176. package/lib/components/WebTerminal/WebTerminal.js +10 -12
  177. package/lib/global/js/hooks/usePrefersReducedMotion.js +13 -7
  178. package/lib/global/js/package-settings.d.ts +1 -1
  179. package/lib/global/js/package-settings.js +1 -1
  180. package/lib/settings.d.ts +1 -1
  181. package/package.json +4 -4
  182. package/scss/components/ConditionBuilder/_condition-builder.scss +1 -1
  183. package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +5 -1
  184. package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +8 -4
  185. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +9 -2
  186. package/scss/components/Datagrid/_datagrid.scss +0 -4
  187. package/scss/components/HTTPErrors/_http-errors.scss +77 -0
  188. package/scss/components/OptionsTile/_options-tile.scss +6 -6
  189. package/scss/components/SidePanel/_side-panel.scss +1 -1
  190. package/scss/components/_index-released-only.scss +1 -0
  191. package/telemetry.yml +12 -2
  192. package/es/global/js/utils/window.d.ts +0 -2
  193. package/es/global/js/utils/window.js +0 -12
  194. package/lib/global/js/utils/window.d.ts +0 -2
  195. package/lib/global/js/utils/window.js +0 -16
@@ -23,6 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
23
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
24
24
 
25
25
  var _WarningAltFilled;
26
+ var _excluded = ["className", "label", "hideLabel", "tooltipAlign", "renderIcon", "onClick", "showToolTip", "wrapperProps", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "isInvalid", "wrapperClassName", "tabIndex"];
26
27
  var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
27
28
  var _Icon, _span;
28
29
  var className = _ref.className,
@@ -38,18 +39,23 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
38
39
  onMouseEnter = _ref.onMouseEnter,
39
40
  onMouseLeave = _ref.onMouseLeave,
40
41
  isInvalid = _ref.isInvalid,
41
- wrapperClassName = _ref.wrapperClassName;
42
+ wrapperClassName = _ref.wrapperClassName,
43
+ tabIndex = _ref.tabIndex,
44
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
42
45
  var Button = function Button() {
46
+ var _rest$dataName;
47
+ var dataName = (_rest$dataName = rest['data-name']) !== null && _rest$dataName !== void 0 ? _rest$dataName : '';
43
48
  return /*#__PURE__*/React__default["default"].createElement("button", {
44
49
  // role={'gridcell'}
45
- tabIndex: -1,
50
+ tabIndex: tabIndex != undefined ? tabIndex : -1,
46
51
  className: cx__default["default"]([className, "".concat(DataConfigs.blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__text-ellipsis"), showToolTip && !hideLabel && !isInvalid), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__invalid-input"), isInvalid)]),
47
52
  type: "button",
48
53
  onClick: onClick,
49
54
  onBlur: onBlur,
50
55
  onFocus: onFocus,
51
56
  onMouseEnter: onMouseEnter,
52
- onMouseLeave: onMouseLeave
57
+ onMouseLeave: onMouseLeave,
58
+ "data-name": dataName
53
59
  }, Icon && (_Icon || (_Icon = /*#__PURE__*/React__default["default"].createElement(Icon, null))), !hideLabel && (_span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null, label))), isInvalid && (_WarningAltFilled || (_WarningAltFilled = /*#__PURE__*/React__default["default"].createElement(icons.WarningAltFilled, null))));
54
60
  };
55
61
  return hideLabel || showToolTip ? /*#__PURE__*/React__default["default"].createElement(react.Tooltip, _rollupPluginBabelHelpers["extends"]({
@@ -96,6 +102,10 @@ ConditionBuilderButton.propTypes = {
96
102
  *decides if tooltip to be shown
97
103
  */
98
104
  showToolTip: index["default"].bool,
105
+ /**
106
+ * Tab index
107
+ */
108
+ tabIndex: index["default"].number,
99
109
  /**
100
110
  * tooltip position
101
111
  */
@@ -17,6 +17,7 @@ var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
17
17
  var index = require('../../../node_modules/prop-types/index.js');
18
18
  var util = require('../utils/util.js');
19
19
  var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
20
+ var useTranslations = require('../utils/useTranslations.js');
20
21
 
21
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
23
 
@@ -30,6 +31,9 @@ var ConditionConnector = function ConditionConnector(_ref) {
30
31
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
31
32
  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
32
33
  variant = _useContext.variant;
34
+ var _useTranslations = useTranslations.useTranslations(['connectorText']),
35
+ _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
36
+ connectorText = _useTranslations2[0];
33
37
  var handleConnectorHover = React.useCallback(function (parentGroup, isHover) {
34
38
  if (isHover) {
35
39
  parentGroup.classList.add('hoveredConnector');
@@ -56,7 +60,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
56
60
  // <div className={className} {...rest}>
57
61
  React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers["extends"]({
58
62
  label: operator,
59
- title: DataConfigs.translateWithId('connector'),
63
+ title: connectorText,
60
64
  "data-name": "connectorField",
61
65
  onMouseEnter: activeConnectorHandler,
62
66
  onMouseLeave: inActiveConnectorHandler,
@@ -71,7 +75,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
71
75
  },
72
76
  conditionState: {
73
77
  value: operator,
74
- label: DataConfigs.translateWithId('connector')
78
+ label: connectorText
75
79
  },
76
80
  onChange: onChangeHandler
77
81
  }))
@@ -9,12 +9,13 @@
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');
13
14
  var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
14
15
  var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
15
16
  var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
16
- var util = require('../utils/util.js');
17
17
  var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
18
+ var useTranslations = require('../utils/useTranslations.js');
18
19
 
19
20
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
21
 
@@ -22,26 +23,33 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
23
 
23
24
  var GroupConnector = function GroupConnector() {
24
25
  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
25
- rootState = _useContext.rootState;
26
+ rootState = _useContext.rootState,
27
+ setRootState = _useContext.setRootState;
28
+ var _useTranslations = useTranslations.useTranslations(['conditionText']),
29
+ _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
30
+ conditionText = _useTranslations2[0];
31
+ var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
32
+ setRootState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rootState), {}, {
33
+ operator: updatedStatement
34
+ }));
35
+ };
26
36
  return /*#__PURE__*/React__default["default"].createElement("div", {
27
- className: "".concat(DataConfigs.blockClass, "__group-separator"),
37
+ className: "".concat(DataConfigs.blockClass, "__group-separator ").concat(DataConfigs.blockClass, "__group-separator-row"),
28
38
  role: "row",
29
39
  tabIndex: -1,
30
40
  "aria-level": 1
31
41
  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
32
42
  label: rootState.operator,
33
- title: DataConfigs.translateWithId('condition'),
43
+ title: conditionText,
34
44
  "data-name": "connectorField",
35
45
  popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
36
46
  className: "".concat(DataConfigs.blockClass, "__statement-button")
37
47
  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
38
48
  conditionState: {
39
49
  value: rootState.operator,
40
- label: DataConfigs.translateWithId('condition')
41
- },
42
- onChange: function onChange(v, e) {
43
- util.focusThisField(e);
50
+ label: conditionText
44
51
  },
52
+ onChange: onStatementChangeHandler,
45
53
  config: {
46
54
  options: DataConfigs.connectorConfig
47
55
  }
@@ -22,12 +22,13 @@ var uuidv4 = require('../../../global/js/utils/uuidv4.js');
22
22
  var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
23
23
  var GroupConnector = require('../ConditionBuilderConnector/GroupConnector.js');
24
24
  var ConditionBuilderActions = require('../ConditionBuilderActions/ConditionBuilderActions.js');
25
+ var useTranslations = require('../utils/useTranslations.js');
25
26
 
26
27
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
28
 
28
29
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
30
 
30
- var _Heading, _GroupConnector, _ConditionPreview;
31
+ var _Heading, _GroupConnector;
31
32
  var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
32
33
  var _rootState$groups2;
33
34
  var startConditionLabel = _ref.startConditionLabel,
@@ -49,6 +50,15 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
49
50
  _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
50
51
  showConditionGroupPreview = _useState4[0],
51
52
  setShowConditionGroupPreview = _useState4[1];
53
+ var _useTranslations = useTranslations.useTranslations(['addConditionGroupText']),
54
+ _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
55
+ addConditionGroupText = _useTranslations2[0];
56
+ var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
57
+ setShowConditionGroupPreview(true);
58
+ };
59
+ var hideConditionGroupPreviewHandler = function hideConditionGroupPreviewHandler() {
60
+ setShowConditionGroupPreview(false);
61
+ };
52
62
  React.useEffect(function () {
53
63
  var _rootState$groups;
54
64
  if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
@@ -109,7 +119,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
109
119
  }));
110
120
  };
111
121
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
112
- className: "".concat(DataConfigs.blockClass, "__add_condition-button"),
122
+ className: "".concat(DataConfigs.blockClass, "__addConditionText-button"),
113
123
  renderIcon: function renderIcon(props) {
114
124
  return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
115
125
  size: 16
@@ -153,24 +163,27 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
153
163
  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
154
164
  renderIcon: icons.TextNewLine,
155
165
  onClick: addConditionGroupHandler,
156
- onMouseEnter: function onMouseEnter() {
157
- setShowConditionGroupPreview(true);
158
- },
159
- onMouseLeave: function onMouseLeave() {
160
- setShowConditionGroupPreview(false);
161
- },
162
- className: "".concat(DataConfigs.blockClass, "__add_condition_group "),
166
+ onMouseEnter: showConditionGroupPreviewHandler,
167
+ onMouseLeave: hideConditionGroupPreviewHandler,
168
+ onFocus: showConditionGroupPreviewHandler,
169
+ onBlur: hideConditionGroupPreviewHandler,
170
+ className: "".concat(DataConfigs.blockClass, "__add-condition-group "),
163
171
  hideLabel: true,
164
- label: DataConfigs.translateWithId('add_condition_group'),
172
+ label: addConditionGroupText,
165
173
  wrapperProps: {
166
174
  role: 'gridcell',
167
- 'aria-label': DataConfigs.translateWithId('add_condition_group')
175
+ 'aria-label': addConditionGroupText
176
+ }
177
+ })), showConditionGroupPreview && /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
178
+ previewType: "newGroup",
179
+ group: {
180
+ groupOperator: rootState.operator
168
181
  }
169
- })), showConditionGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
170
- previewType: "newGroup"
171
- }))))), isConditionBuilderActive && actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
182
+ }))), isConditionBuilderActive && actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
172
183
  actions: actions,
173
- className: "".concat(DataConfigs.blockClass, "__actions-container")
184
+ className: "".concat(DataConfigs.blockClass, "__actions-container"),
185
+ variant: variant,
186
+ conditionBuilderRef: conditionBuilderRef
174
187
  }));
175
188
  };
176
189
  var ConditionBuilderContent$1 = ConditionBuilderContent;
@@ -21,21 +21,27 @@ export namespace ConditionBuilderProvider {
21
21
  let getOptions: PropTypes.Requireable<(...args: any[]) => any>;
22
22
  let inputConfig: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
23
23
  properties: PropTypes.Requireable<(PropTypes.InferProps<{
24
- id: PropTypes.Requireable<string>;
25
- label: PropTypes.Requireable<string>;
24
+ id: PropTypes.Validator<string>;
25
+ label: PropTypes.Validator<string>;
26
26
  icon: PropTypes.Requireable<object>;
27
- type: PropTypes.Requireable<string>;
27
+ type: PropTypes.Validator<string>;
28
28
  config: PropTypes.Requireable<PropTypes.InferProps<{
29
29
  options: PropTypes.Requireable<(PropTypes.InferProps<{
30
- id: PropTypes.Requireable<string>;
31
- label: PropTypes.Requireable<string>;
30
+ id: PropTypes.Validator<string>;
31
+ label: PropTypes.Validator<string>;
32
32
  icon: PropTypes.Requireable<object>;
33
33
  }> | null | undefined)[]>;
34
- includeSearch: PropTypes.Requireable<boolean>;
34
+ component: PropTypes.Requireable<(...args: any[]) => any>;
35
+ operators: PropTypes.Requireable<(PropTypes.InferProps<{
36
+ id: PropTypes.Validator<string>;
37
+ label: PropTypes.Validator<string>;
38
+ }> | null | undefined)[]>;
39
+ long: PropTypes.Requireable<boolean>;
35
40
  }>>;
36
41
  }> | null | undefined)[]>;
37
42
  }>>>;
38
43
  let popOverSearchThreshold: PropTypes.Validator<number>;
44
+ let translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
39
45
  let variant: PropTypes.Validator<string>;
40
46
  }
41
47
  }
@@ -70,7 +70,8 @@ var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
70
70
  inputConfig: props.inputConfig,
71
71
  popOverSearchThreshold: props.popOverSearchThreshold,
72
72
  getOptions: props.getOptions,
73
- variant: props.variant
73
+ variant: props.variant,
74
+ translateWithId: props.translateWithId
74
75
  }
75
76
  },
76
77
  // eslint-disable-next-line react/prop-types
@@ -97,17 +98,22 @@ ConditionBuilderProvider.propTypes = {
97
98
  */
98
99
  inputConfig: index["default"].shape({
99
100
  properties: index["default"].arrayOf(index["default"].shape({
100
- id: index["default"].string,
101
- label: index["default"].string,
101
+ id: index["default"].string.isRequired,
102
+ label: index["default"].string.isRequired,
102
103
  icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
103
- type: index["default"].oneOf(['text', 'number', 'date', 'option', 'time', 'custom']),
104
+ type: index["default"].oneOf(['text', 'textarea', 'number', 'date', 'option', 'time', 'custom']).isRequired,
104
105
  config: index["default"].shape({
105
106
  options: index["default"].arrayOf(index["default"].shape({
106
- id: index["default"].string,
107
- label: index["default"].string,
107
+ id: index["default"].string.isRequired,
108
+ label: index["default"].string.isRequired,
108
109
  icon: index["default"].oneOfType([index["default"].func, index["default"].object])
109
110
  })),
110
- includeSearch: index["default"].bool
111
+ component: index["default"].func,
112
+ operators: index["default"].arrayOf(index["default"].shape({
113
+ id: index["default"].string.isRequired,
114
+ label: index["default"].string.isRequired
115
+ })),
116
+ long: index["default"].bool
111
117
  })
112
118
  }))
113
119
  }).isRequired,
@@ -115,6 +121,13 @@ ConditionBuilderProvider.propTypes = {
115
121
  * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
116
122
  */
117
123
  popOverSearchThreshold: index["default"].number.isRequired,
124
+ /**
125
+ * Optional prop if you want to pass translation to the texts used . Otherwise this will the defined defaults.
126
+ * This callback function will receive the message id and you need to return the corresponding text for that id.
127
+ * The message key will be one of [ "ifText", "addConditionText", "addConditionGroupText", "addSubgroupText", "conditionText", "propertyText", "operatorText", "valueText", "connectorText", "conditionRowText", "removeConditionText", "addConditionRowText", "startText", "endText", "clearSearchText", "actionsText", "then", "removeActionText", "addActionText", "invalidText", "invalidNumberWarnText"
128
+ ]
129
+ */
130
+ translateWithId: index["default"].func,
118
131
  /**
119
132
  * Provide the condition builder variant: sentence/ tree
120
133
  */
@@ -1,6 +1,7 @@
1
1
  export const statementConfig: {
2
2
  label: string;
3
3
  id: string;
4
+ connector: string;
4
5
  }[];
5
6
  export const connectorConfig: {
6
7
  label: string;
@@ -16,9 +17,9 @@ export const operatorConfig: {
16
17
  type: string;
17
18
  }[];
18
19
  export const blockClass: string;
19
- export function translateWithId(key: any): any;
20
20
  export namespace valueRenderers {
21
21
  function text(val: any): any;
22
+ function textarea(val: any): any;
22
23
  function time(val: any): any;
23
24
  function number(val: any): any;
24
25
  function option(value: any): any;
@@ -10,14 +10,15 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var settings = require('../../../settings.js');
13
- var translationObject = require('./translationObject.js');
14
13
 
15
14
  var statementConfig = [{
16
15
  label: 'if',
17
- id: 'if'
16
+ id: 'if',
17
+ connector: 'and'
18
18
  }, {
19
19
  label: 'excl.if',
20
- id: 'excl_if'
20
+ id: 'excl_if',
21
+ connector: 'or'
21
22
  }];
22
23
  var connectorConfig = [{
23
24
  label: 'and',
@@ -36,7 +37,7 @@ var operatorConfig = [{
36
37
  type: 'number'
37
38
  }, {
38
39
  label: 'is greater than or equal to',
39
- id: 'greater_equal',
40
+ id: 'greaterEqual',
40
41
  type: 'number'
41
42
  }, {
42
43
  label: 'is lower than',
@@ -44,23 +45,23 @@ var operatorConfig = [{
44
45
  type: 'number'
45
46
  }, {
46
47
  label: 'is lower than or equal to',
47
- id: 'lower_equal',
48
+ id: 'lowerEqual',
48
49
  type: 'number'
49
50
  }, {
50
51
  label: 'starts with',
51
- id: 'starts_with',
52
- type: 'text'
52
+ id: 'startsWith',
53
+ type: 'text,textarea'
53
54
  }, {
54
55
  label: 'ends with',
55
- id: 'ends_with',
56
- type: 'text'
56
+ id: 'endsWith',
57
+ type: 'text,textarea'
57
58
  }, {
58
59
  label: 'contains',
59
60
  id: 'contains',
60
- type: 'text'
61
+ type: 'text,textarea'
61
62
  }, {
62
63
  label: 'is one of',
63
- id: 'one_of',
64
+ id: 'oneOf',
64
65
  type: 'option'
65
66
  }, {
66
67
  label: 'is before',
@@ -83,15 +84,15 @@ var formatDate = function formatDate(date) {
83
84
  var year = date.getFullYear();
84
85
  return "".concat(day, "/").concat(month, "/").concat(year);
85
86
  };
86
- var translationsObjectCurrent = translationObject.translationsObject['en']; // TO DO: need to discuss if language is to be passed as prop
87
- var translateWithId = function translateWithId(key) {
88
- var _translationsObjectCu;
89
- return (_translationsObjectCu = translationsObjectCurrent[key]) !== null && _translationsObjectCu !== void 0 ? _translationsObjectCu : key;
90
- };
87
+ //const translationsObjectCurrent = translationsObject['en']; // TO DO: need to discuss if language is to be passed as prop
88
+
91
89
  var valueRenderers = {
92
90
  text: function text(val) {
93
91
  return val;
94
92
  },
93
+ textarea: function textarea(val) {
94
+ return val;
95
+ },
95
96
  time: function time(val) {
96
97
  return val;
97
98
  },
@@ -109,11 +110,13 @@ var valueRenderers = {
109
110
  },
110
111
  date: function date(value) {
111
112
  if (Array.isArray(value) && value.length > 1) {
112
- var start = value !== null && value !== void 0 && value[0] ? formatDate(new Date(value[0])) : '';
113
- var end = value !== null && value !== void 0 && value[1] ? formatDate(new Date(value[1])) : '';
113
+ var start = value !== null && value !== void 0 && value[0] && !isNaN(new Date(value[0])) ? formatDate(new Date(value[0])) : '';
114
+ var end = value !== null && value !== void 0 && value[1] && !isNaN(new Date(value[1])) ? formatDate(new Date(value[1])) : '';
114
115
  return "".concat(start, " To ").concat(end);
116
+ } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
117
+ return formatDate(new Date(value[0]));
115
118
  } else {
116
- return value && new Date(value) ? formatDate(new Date(value)) : value;
119
+ return value;
117
120
  }
118
121
  },
119
122
  custom: function custom(value) {
@@ -125,5 +128,4 @@ exports.blockClass = blockClass;
125
128
  exports.connectorConfig = connectorConfig;
126
129
  exports.operatorConfig = operatorConfig;
127
130
  exports.statementConfig = statementConfig;
128
- exports.translateWithId = translateWithId;
129
131
  exports.valueRenderers = valueRenderers;
@@ -1,41 +1,39 @@
1
1
  export namespace translationsObject {
2
- namespace en {
3
- let _if: string;
4
- export { _if as if };
5
- export let excl_if: string;
6
- export let and: string;
7
- export let or: string;
8
- export let is: string;
9
- export let greater: string;
10
- export let greater_equal: string;
11
- export let lower: string;
12
- export let lower_equal: string;
13
- export let starts_with: string;
14
- export let ends_with: string;
15
- export let contains: string;
16
- export let one_of: string;
17
- export let before: string;
18
- export let after: string;
19
- export let between: string;
20
- export let add_condition: string;
21
- export let add_condition_group: string;
22
- export let add_subgroup: string;
23
- export let condition: string;
24
- export let property: string;
25
- export let operator: string;
26
- export let value: string;
27
- export let connector: string;
28
- export let condition_row: string;
29
- export let remove_condition: string;
30
- export let add_condition_row: string;
31
- export let start: string;
32
- export let end: string;
33
- export let clear_search: string;
34
- export let actions: string;
35
- export let then: string;
36
- export let remove_action: string;
37
- export let add_action: string;
38
- export let invalid_text: string;
39
- export let text_invalid_number: string;
40
- }
2
+ let ifText: string;
3
+ let excl_if: string;
4
+ let and: string;
5
+ let or: string;
6
+ let is: string;
7
+ let greater: string;
8
+ let greaterEqual: string;
9
+ let lower: string;
10
+ let lowerEqual: string;
11
+ let startsWith: string;
12
+ let endsWith: string;
13
+ let contains: string;
14
+ let oneOf: string;
15
+ let before: string;
16
+ let after: string;
17
+ let between: string;
18
+ let addConditionText: string;
19
+ let addConditionGroupText: string;
20
+ let addSubgroupText: string;
21
+ let conditionText: string;
22
+ let propertyText: string;
23
+ let operatorText: string;
24
+ let valueText: string;
25
+ let connectorText: string;
26
+ let conditionRowText: string;
27
+ let removeConditionText: string;
28
+ let addConditionRowText: string;
29
+ let startText: string;
30
+ let endText: string;
31
+ let clearSearchText: string;
32
+ let actionsText: string;
33
+ let then: string;
34
+ let removeActionText: string;
35
+ let addActionText: string;
36
+ let invalidText: string;
37
+ let invalidDateText: string;
38
+ let invalidNumberWarnText: string;
41
39
  }
@@ -10,44 +10,43 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var translationsObject = {
13
- en: {
14
- if: 'if',
15
- excl_if: 'excl.if',
16
- and: 'and',
17
- or: 'or',
18
- is: 'is',
19
- greater: 'is greater than',
20
- greater_equal: 'is greater than or equal to',
21
- lower: 'is lower than',
22
- lower_equal: 'is lower than or equal to',
23
- starts_with: 'starts with',
24
- ends_with: 'ends with',
25
- contains: 'contains',
26
- one_of: 'is one of',
27
- before: 'is before',
28
- after: 'is after',
29
- between: 'is between',
30
- add_condition: 'Add condition',
31
- add_condition_group: 'Add condition group',
32
- add_subgroup: 'Add subgroup',
33
- condition: 'Condition',
34
- property: 'Property',
35
- operator: 'Operator',
36
- value: 'Value',
37
- connector: 'Connector',
38
- condition_row: 'Condition row',
39
- remove_condition: 'Remove condition',
40
- add_condition_row: 'Add condition row',
41
- start: 'Start',
42
- end: 'End',
43
- clear_search: 'Clear search input',
44
- actions: 'Actions',
45
- then: 'then',
46
- remove_action: 'Remove Action',
47
- add_action: 'Add action',
48
- invalid_text: 'Incomplete',
49
- text_invalid_number: 'Invalid number, must be 0 or greater'
50
- }
13
+ ifText: 'if',
14
+ excl_if: 'excl.if',
15
+ and: 'and',
16
+ or: 'or',
17
+ is: 'is',
18
+ greater: 'is greater than',
19
+ greaterEqual: 'is greater than or equal to',
20
+ lower: 'is lower than',
21
+ lowerEqual: 'is lower than or equal to',
22
+ startsWith: 'starts with',
23
+ endsWith: 'ends with',
24
+ contains: 'contains',
25
+ oneOf: 'is one of',
26
+ before: 'is before',
27
+ after: 'is after',
28
+ between: 'is between',
29
+ addConditionText: 'Add condition',
30
+ addConditionGroupText: 'Add condition group',
31
+ addSubgroupText: 'Add subgroup',
32
+ conditionText: 'Condition',
33
+ propertyText: 'Property',
34
+ operatorText: 'Operator',
35
+ valueText: 'Value',
36
+ connectorText: 'Connector',
37
+ conditionRowText: 'Condition row',
38
+ removeConditionText: 'Remove condition',
39
+ addConditionRowText: 'Add condition row',
40
+ startText: 'Start',
41
+ endText: 'End',
42
+ clearSearchText: 'Clear search input',
43
+ actionsText: 'Actions',
44
+ then: 'then',
45
+ removeActionText: 'Remove Action',
46
+ addActionText: 'Add action',
47
+ invalidText: 'Incomplete',
48
+ invalidDateText: 'Invalid Date',
49
+ invalidNumberWarnText: 'Invalid number, must be 0 or greater'
51
50
  };
52
51
 
53
52
  exports.translationsObject = translationsObject;
@@ -1,4 +1,4 @@
1
- export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, condition, popOverClassName, config, ...rest }: {
1
+ export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, condition, popOverClassName, config, renderChildren, ...rest }: {
2
2
  [x: string]: any;
3
3
  children: any;
4
4
  className: any;
@@ -10,6 +10,7 @@ export function ConditionBuilderItem({ children, className, label, renderIcon, t
10
10
  condition: any;
11
11
  popOverClassName: any;
12
12
  config: any;
13
+ renderChildren: any;
13
14
  }): import("react/jsx-runtime").JSX.Element;
14
15
  export namespace ConditionBuilderItem {
15
16
  namespace propTypes {
@@ -19,6 +20,7 @@ export namespace ConditionBuilderItem {
19
20
  let config: PropTypes.Requireable<object>;
20
21
  let label: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
21
22
  let popOverClassName: PropTypes.Requireable<string>;
23
+ let renderChildren: PropTypes.Requireable<(...args: any[]) => any>;
22
24
  let renderIcon: PropTypes.Requireable<object>;
23
25
  let showToolTip: PropTypes.Requireable<boolean>;
24
26
  let title: PropTypes.Requireable<string>;