@carbon/ibm-products 2.43.2-canary.2 → 2.43.2-canary.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (160) hide show
  1. package/css/index-full-carbon.css +35 -3
  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.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css.map +1 -1
  7. package/css/index-without-carbon.css +35 -3
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +1 -1
  10. package/css/index-without-carbon.min.css.map +1 -1
  11. package/css/index.css +35 -3
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +1 -1
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +23 -21
  16. package/es/components/ConditionBuilder/ConditionBuilder.js +67 -20
  17. package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.d.ts +15 -0
  18. package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +129 -0
  19. package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +6 -4
  20. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +5 -1
  21. package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +16 -4
  22. package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +2 -2
  23. package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +2 -2
  24. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +9 -11
  25. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +36 -32
  26. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +0 -1
  27. package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +7 -2
  28. package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +6 -1
  29. package/es/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +18 -10
  30. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +39 -36
  31. package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +12 -10
  32. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +1 -1
  33. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +24 -16
  34. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +19 -4
  35. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +13 -0
  36. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +109 -0
  37. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.d.ts → ItemOptionForValueField.d.ts} +2 -2
  38. package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js} +58 -33
  39. package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +4 -6
  40. package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +14 -5
  41. package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
  42. package/es/components/ConditionBuilder/utils/util.d.ts +1 -0
  43. package/es/components/ConditionBuilder/utils/util.js +16 -1
  44. package/es/components/DataSpreadsheet/DataSpreadsheet.js +29 -16
  45. package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +9 -1
  46. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +18 -2
  47. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +8 -0
  48. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +17 -6
  49. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +4 -1
  50. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +3 -1
  51. package/es/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +15 -3
  52. package/es/components/DataSpreadsheet/types/index.d.ts +1 -1
  53. package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -2
  54. package/es/components/Datagrid/Datagrid/Datagrid.js +2 -1
  55. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  56. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -1
  57. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -1
  58. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts +3 -1
  59. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +6 -3
  60. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.d.ts +1 -1
  61. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +21 -16
  62. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +21 -3
  63. package/es/components/Datagrid/types/index.d.ts +18 -4
  64. package/es/components/Datagrid/useActionsColumn.d.ts +8 -1
  65. package/es/components/Datagrid/useActionsColumn.js +7 -6
  66. package/es/components/Datagrid/useColumnRightAlign.d.ts +8 -1
  67. package/es/components/Datagrid/useColumnRightAlign.js +4 -3
  68. package/es/components/Datagrid/useInlineEdit.d.ts +8 -1
  69. package/es/components/Datagrid/useInlineEdit.js +13 -3
  70. package/es/components/Datagrid/useNestedRows.js +27 -9
  71. package/es/components/Decorator/Decorator.js +2 -1
  72. package/es/components/DecoratorBase/DecoratorBase.js +3 -5
  73. package/es/components/DecoratorDualButton/DecoratorDualButton.js +2 -1
  74. package/es/components/DecoratorLink/DecoratorLink.js +2 -1
  75. package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +2 -1
  76. package/es/components/Tearsheet/Tearsheet.d.ts +8 -1
  77. package/es/components/Tearsheet/Tearsheet.js +9 -1
  78. package/es/components/Tearsheet/TearsheetNarrow.d.ts +11 -0
  79. package/es/components/Tearsheet/TearsheetNarrow.js +12 -0
  80. package/es/components/Tearsheet/TearsheetShell.d.ts +10 -0
  81. package/es/components/Tearsheet/TearsheetShell.js +17 -3
  82. package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js +23 -21
  83. package/lib/components/ConditionBuilder/ConditionBuilder.js +67 -20
  84. package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.d.ts +15 -0
  85. package/lib/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js +137 -0
  86. package/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js +6 -3
  87. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.d.ts +5 -1
  88. package/lib/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js +16 -4
  89. package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js +2 -2
  90. package/lib/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js +2 -2
  91. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +9 -11
  92. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +36 -32
  93. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.d.ts +0 -1
  94. package/lib/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js +7 -2
  95. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.d.ts +6 -1
  96. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js +18 -10
  97. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.d.ts +39 -36
  98. package/lib/components/ConditionBuilder/ConditionBuilderContext/translationObject.js +12 -10
  99. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.d.ts +1 -1
  100. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js +23 -15
  101. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js +20 -5
  102. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts +13 -0
  103. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js +117 -0
  104. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.d.ts → ItemOptionForValueField.d.ts} +2 -2
  105. package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js} +56 -31
  106. package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js +4 -6
  107. package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js +14 -4
  108. package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.js +1 -2
  109. package/lib/components/ConditionBuilder/utils/util.d.ts +1 -0
  110. package/lib/components/ConditionBuilder/utils/util.js +17 -0
  111. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +29 -16
  112. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +9 -1
  113. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +18 -2
  114. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +8 -0
  115. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +17 -6
  116. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js +4 -1
  117. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.d.ts +3 -1
  118. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseUp.js +15 -3
  119. package/lib/components/DataSpreadsheet/types/index.d.ts +1 -1
  120. package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js +34 -2
  121. package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -1
  122. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  123. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -1
  124. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -1
  125. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.d.ts +3 -1
  126. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +6 -3
  127. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.d.ts +1 -1
  128. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +21 -16
  129. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +21 -3
  130. package/lib/components/Datagrid/types/index.d.ts +18 -4
  131. package/lib/components/Datagrid/useActionsColumn.d.ts +8 -1
  132. package/lib/components/Datagrid/useActionsColumn.js +7 -6
  133. package/lib/components/Datagrid/useColumnRightAlign.d.ts +8 -1
  134. package/lib/components/Datagrid/useColumnRightAlign.js +4 -3
  135. package/lib/components/Datagrid/useInlineEdit.d.ts +8 -1
  136. package/lib/components/Datagrid/useInlineEdit.js +13 -3
  137. package/lib/components/Datagrid/useNestedRows.js +27 -9
  138. package/lib/components/Decorator/Decorator.js +2 -1
  139. package/lib/components/DecoratorBase/DecoratorBase.js +3 -5
  140. package/lib/components/DecoratorDualButton/DecoratorDualButton.js +2 -1
  141. package/lib/components/DecoratorLink/DecoratorLink.js +2 -1
  142. package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +2 -1
  143. package/lib/components/Tearsheet/Tearsheet.d.ts +8 -1
  144. package/lib/components/Tearsheet/Tearsheet.js +9 -1
  145. package/lib/components/Tearsheet/TearsheetNarrow.d.ts +11 -0
  146. package/lib/components/Tearsheet/TearsheetNarrow.js +12 -0
  147. package/lib/components/Tearsheet/TearsheetShell.d.ts +10 -0
  148. package/lib/components/Tearsheet/TearsheetShell.js +16 -2
  149. package/package.json +3 -3
  150. package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +9 -1
  151. package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss +26 -1
  152. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -0
  153. package/scss/components/StatusIcon/_status-icon.scss +4 -4
  154. package/scss/components/StringFormatter/_string-formatter.scss +2 -2
  155. package/scss/components/UserProfileImage/_user-profile-image.scss +6 -2
  156. package/telemetry.yml +1 -0
  157. package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +0 -1
  158. package/es/components/ConditionBuilder/utils/checkForHoldingKey.js +0 -16
  159. package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts +0 -1
  160. package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js +0 -20
@@ -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
+ }
@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
98
98
  position: sticky;
99
99
  z-index: 4;
100
100
  left: 0;
101
+ background-color: $background;
101
102
  }
102
103
  .#{$block-class}__td-th.#{$block-class}__td {
103
104
  @include font-family.font-weight('semibold');
@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
73
73
 
74
74
  $block-class: #{$pkg-prefix}--status-icon;
75
75
 
76
- @function --clr($name, $theme: light) {
76
+ @function carbon-clr($name, $theme: light) {
77
77
  // stylelint-disable-next-line carbon/theme-token-use
78
78
  $color: map-get(map-get($colors, $name), $theme);
79
79
  @return $color;
@@ -125,13 +125,13 @@ $block-class: #{$pkg-prefix}--status-icon;
125
125
  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
126
126
  animation: rotating 8000ms infinite linear;
127
127
  // stylelint-disable-next-line carbon/theme-token-use
128
- fill: --clr($icon, $theme);
128
+ fill: carbon-clr($icon, $theme);
129
129
  } @else if $icon == running {
130
130
  // stylelint-disable-next-line carbon/theme-token-use
131
- fill: --clr($icon, $theme);
131
+ fill: carbon-clr($icon, $theme);
132
132
  } @else {
133
133
  // stylelint-disable-next-line carbon/theme-token-use
134
- fill: --clr($icon, $theme);
134
+ fill: carbon-clr($icon, $theme);
135
135
  @media (prefers-reduced-motion) {
136
136
  .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
137
137
  animation: none;
@@ -79,7 +79,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
79
79
  .#{$block-class}
80
80
  .#{$popover-block-class}--top-right
81
81
  .#{$popover-block-class}-caret {
82
- /* stylelint-disable-next-line declaration-no-important */
82
+ /* stylelint-disable-next-line */
83
83
  inset-block-start: -1px !important;
84
84
  }
85
85
 
@@ -92,6 +92,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
92
92
  .#{$block-class}
93
93
  .#{$popover-block-class}--bottom-right
94
94
  .#{$popover-block-class}-caret {
95
- /* stylelint-disable-next-line declaration-no-important */
95
+ /* stylelint-disable-next-line */
96
96
  inset-block-end: -1px !important;
97
97
  }
@@ -44,7 +44,7 @@ $themes: (
44
44
 
45
45
  $theme-keys: map-keys($themes);
46
46
 
47
- @function --get-background-color($color, $key, $contrast-key) {
47
+ @function carbon-get-background-color($color, $key, $contrast-key) {
48
48
  @return map-get(
49
49
  $carbon-colors,
50
50
  #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -59,7 +59,11 @@ $theme-keys: map-keys($themes);
59
59
  @each $contrast-key in $theme-keys {
60
60
  .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
61
61
  // stylelint-disable-next-line carbon/theme-token-use
62
- background-color: --get-background-color($color, $key, $contrast-key);
62
+ background-color: carbon-get-background-color(
63
+ $color,
64
+ $key,
65
+ $contrast-key
66
+ );
63
67
  }
64
68
  }
65
69
  }
package/telemetry.yml CHANGED
@@ -288,6 +288,7 @@ collect:
288
288
  - selectionAreas
289
289
  - selectorPageContent
290
290
  - selectorPrimaryFocus
291
+ - selectorsFloatingMenus
291
292
  - sequence
292
293
  - setActiveCellCoordinates
293
294
  - setAllFilters
@@ -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;