@carbon/ibm-products 2.34.0 → 2.35.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (180) hide show
  1. package/css/index-full-carbon.css +31910 -32273
  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 +38 -17
  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 +568 -24320
  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 +2145 -17925
  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/ActionSet/ActionSet.d.ts +38 -2
  18. package/es/components/ActionSet/ActionSet.js +3 -5
  19. package/es/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
  20. package/es/components/ConditionBuilder/ConditionBuilder.d.ts +5 -0
  21. package/es/components/ConditionBuilder/ConditionBuilder.js +125 -0
  22. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +10 -0
  23. package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +92 -0
  24. package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts +38 -0
  25. package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js +88 -0
  26. package/es/components/ConditionBuilder/assets/sampleInput.d.ts +58 -0
  27. package/es/components/ConditionBuilder/index.d.ts +1 -0
  28. package/es/components/CreateFullPage/CreateFullPage.js +3 -19
  29. package/es/components/CreateFullPage/CreateFullPageStep.js +22 -7
  30. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts +82 -2
  31. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +2 -1
  32. package/es/components/Datagrid/useEditableCell.js +15 -0
  33. package/es/components/DelimitedList/DelimitedList.d.ts +27 -2
  34. package/es/components/DelimitedList/DelimitedList.js +0 -1
  35. package/es/components/EditInPlace/EditInPlace.d.ts +97 -5
  36. package/es/components/EditInPlace/EditInPlace.js +10 -6
  37. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +61 -2
  38. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -3
  39. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +61 -2
  40. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -2
  41. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +61 -2
  42. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -3
  43. package/es/components/ExportModal/ExportModal.d.ts +110 -2
  44. package/es/components/ExportModal/ExportModal.js +10 -4
  45. package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +1 -1
  46. package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +2 -2
  47. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  48. package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +5 -9
  49. package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +1 -1
  50. package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +5 -0
  51. package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +92 -0
  52. package/es/components/FilterPanel/index.d.ts +1 -0
  53. package/es/components/HTTPErrors/HTTPError403/HTTPError403.d.ts +40 -2
  54. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  55. package/es/components/HTTPErrors/HTTPError404/HTTPError404.d.ts +40 -2
  56. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  57. package/es/components/ImportModal/ImportModal.d.ts +136 -2
  58. package/es/components/ImportModal/ImportModal.js +3 -2
  59. package/es/components/InlineTip/InlineTip.d.ts +90 -2
  60. package/es/components/InlineTip/InlineTip.js +3 -2
  61. package/es/components/Nav/Nav.js +1 -1
  62. package/es/components/Nav/NavList.js +7 -7
  63. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  64. package/es/components/PageHeader/PageHeader.js +3 -3
  65. package/es/components/PageHeader/PageHeaderUtils.d.ts +1 -1
  66. package/es/components/PageHeader/PageHeaderUtils.js +4 -3
  67. package/es/components/SidePanel/SidePanel.js +52 -36
  68. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts +23 -2
  69. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +6 -5
  70. package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
  71. package/es/components/TagOverflow/TagOverflow.js +209 -0
  72. package/es/components/TagOverflow/constants.d.ts +14 -0
  73. package/es/components/TagOverflow/constants.js +30 -0
  74. package/es/components/TagOverflow/index.d.ts +1 -0
  75. package/es/components/Tearsheet/TearsheetNarrow.d.ts +105 -6
  76. package/es/components/Tearsheet/TearsheetNarrow.js +6 -1
  77. package/es/components/Toolbar/Toolbar.d.ts +23 -5
  78. package/es/components/Toolbar/Toolbar.js +30 -26
  79. package/es/components/UserAvatar/UserAvatar.js +4 -2
  80. package/es/components/index.d.ts +4 -2
  81. package/es/global/js/package-settings.d.ts +3 -0
  82. package/es/global/js/package-settings.js +3 -0
  83. package/es/index.js +4 -0
  84. package/es/settings.d.ts +3 -0
  85. package/lib/components/ActionSet/ActionSet.d.ts +38 -2
  86. package/lib/components/ActionSet/ActionSet.js +3 -5
  87. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
  88. package/lib/components/ConditionBuilder/ConditionBuilder.d.ts +5 -0
  89. package/lib/components/ConditionBuilder/ConditionBuilder.js +132 -0
  90. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts +10 -0
  91. package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js +100 -0
  92. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts +38 -0
  93. package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js +98 -0
  94. package/lib/components/ConditionBuilder/assets/sampleInput.d.ts +58 -0
  95. package/lib/components/ConditionBuilder/index.d.ts +1 -0
  96. package/lib/components/CreateFullPage/CreateFullPage.js +2 -18
  97. package/lib/components/CreateFullPage/CreateFullPageStep.js +20 -5
  98. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts +82 -2
  99. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +2 -1
  100. package/lib/components/Datagrid/useEditableCell.js +19 -0
  101. package/lib/components/DelimitedList/DelimitedList.d.ts +27 -2
  102. package/lib/components/DelimitedList/DelimitedList.js +0 -1
  103. package/lib/components/EditInPlace/EditInPlace.d.ts +97 -5
  104. package/lib/components/EditInPlace/EditInPlace.js +10 -6
  105. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts +61 -2
  106. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -3
  107. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts +61 -2
  108. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -2
  109. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts +61 -2
  110. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -3
  111. package/lib/components/ExportModal/ExportModal.d.ts +110 -2
  112. package/lib/components/ExportModal/ExportModal.js +10 -4
  113. package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js +1 -1
  114. package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js +2 -2
  115. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts +5 -0
  116. package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js +5 -9
  117. package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js +1 -1
  118. package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts +5 -0
  119. package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js +99 -0
  120. package/lib/components/FilterPanel/index.d.ts +1 -0
  121. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.d.ts +40 -2
  122. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  123. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.d.ts +40 -2
  124. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  125. package/lib/components/ImportModal/ImportModal.d.ts +136 -2
  126. package/lib/components/ImportModal/ImportModal.js +3 -2
  127. package/lib/components/InlineTip/InlineTip.d.ts +90 -2
  128. package/lib/components/InlineTip/InlineTip.js +3 -2
  129. package/lib/components/Nav/Nav.js +1 -1
  130. package/lib/components/Nav/NavList.js +7 -7
  131. package/lib/components/NotificationsPanel/NotificationsPanel.js +1 -1
  132. package/lib/components/PageHeader/PageHeader.js +3 -3
  133. package/lib/components/PageHeader/PageHeaderUtils.d.ts +1 -1
  134. package/lib/components/PageHeader/PageHeaderUtils.js +4 -3
  135. package/lib/components/SidePanel/SidePanel.js +52 -36
  136. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts +23 -2
  137. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +6 -5
  138. package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
  139. package/lib/components/TagOverflow/TagOverflow.js +216 -0
  140. package/lib/components/TagOverflow/constants.d.ts +14 -0
  141. package/lib/components/TagOverflow/constants.js +34 -0
  142. package/lib/components/TagOverflow/index.d.ts +1 -0
  143. package/lib/components/Tearsheet/TearsheetNarrow.d.ts +105 -6
  144. package/lib/components/Tearsheet/TearsheetNarrow.js +6 -1
  145. package/lib/components/Toolbar/Toolbar.d.ts +23 -5
  146. package/lib/components/Toolbar/Toolbar.js +30 -26
  147. package/lib/components/UserAvatar/UserAvatar.js +4 -2
  148. package/lib/components/index.d.ts +4 -2
  149. package/lib/global/js/package-settings.d.ts +3 -0
  150. package/lib/global/js/package-settings.js +3 -0
  151. package/lib/index.js +17 -0
  152. package/lib/settings.d.ts +3 -0
  153. package/package.json +3 -3
  154. package/scss/components/Coachmark/_coachmark-dragbar.scss +0 -1
  155. package/scss/components/Coachmark/_coachmark-tagline.scss +2 -2
  156. package/scss/components/ConditionBuilder/_carbon-imports.scss +9 -0
  157. package/scss/components/ConditionBuilder/_condition-builder.scss +25 -0
  158. package/scss/components/ConditionBuilder/_index-with-carbon.scss +9 -0
  159. package/scss/components/ConditionBuilder/_index.scss +8 -0
  160. package/scss/components/CreateFullPage/_create-full-page.scss +10 -10
  161. package/scss/components/Datagrid/styles/_useNestedRows.scss +5 -1
  162. package/scss/components/FilterPanel/_carbon-imports.scss +5 -0
  163. package/scss/components/FilterPanel/_filter-panel-accordion-item.scss +1 -3
  164. package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +0 -2
  165. package/scss/components/FilterPanel/_filter-panel-checkbox.scss +0 -1
  166. package/scss/components/FilterPanel/_filter-panel-search.scss +38 -0
  167. package/scss/components/FilterPanel/_index-with-carbon.scss +1 -0
  168. package/scss/components/FilterPanel/_index.scss +1 -0
  169. package/scss/components/Guidebanner/_guidebanner.scss +1 -1
  170. package/scss/components/InlineTip/_inline-tip.scss +1 -1
  171. package/scss/components/ProductiveCard/_productive-card.scss +13 -0
  172. package/scss/components/SidePanel/_side-panel.scss +9 -9
  173. package/scss/components/TagOverflow/_carbon-imports.scss +9 -0
  174. package/scss/components/TagOverflow/_index-with-carbon.scss +9 -0
  175. package/scss/components/TagOverflow/_index.scss +8 -0
  176. package/scss/components/TagOverflow/_tag-overflow.scss +55 -0
  177. package/scss/components/Tearsheet/_tearsheet.scss +10 -0
  178. package/scss/components/UserAvatar/_user-avatar.scss +1 -0
  179. package/scss/components/_index-with-carbon.scss +2 -0
  180. package/scss/components/_index.scss +2 -0
@@ -0,0 +1,216 @@
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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
+ var React = require('react');
14
+ var index = require('../../node_modules/prop-types/index.js');
15
+ var cx = require('classnames');
16
+ var devtools = require('../../global/js/utils/devtools.js');
17
+ var settings = require('../../settings.js');
18
+ var react = require('@carbon/react');
19
+ var constants = require('./constants.js');
20
+ var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
21
+ var TagSet = require('../TagSet/TagSet.js');
22
+
23
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
24
+
25
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
+ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
27
+
28
+ var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
29
+ _excluded2 = ["className", "id"];
30
+ var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
31
+ var componentName = 'TagOverflow';
32
+
33
+ // Default values for props
34
+ var defaults = {
35
+ items: []
36
+ };
37
+
38
+ /**
39
+ * TODO: A description of the component.
40
+ */
41
+ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
42
+ var className = _ref.className,
43
+ _ref$items = _ref.items,
44
+ items = _ref$items === void 0 ? defaults.items : _ref$items,
45
+ tagComponent = _ref.tagComponent,
46
+ maxVisible = _ref.maxVisible,
47
+ multiline = _ref.multiline,
48
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
49
+ var localContainerRef = React.useRef(null);
50
+ var containerRef = ref || localContainerRef;
51
+ var itemRefs = React.useRef(null);
52
+ var overflowRef = React.useRef(null);
53
+ // measurementOffset is the value of margin applied on each items
54
+ // This value is required for calculating how many items will fit within the container
55
+ var measurementOffset = 4;
56
+ var overflowIndicatorWidth = 40;
57
+ var _useState = React.useState(0),
58
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
59
+ containerWidth = _useState2[0],
60
+ setContainerWidth = _useState2[1];
61
+ var _useState3 = React.useState([]),
62
+ _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
63
+ visibleItems = _useState4[0],
64
+ setVisibleItems = _useState4[1];
65
+ var _useState5 = React.useState([]),
66
+ _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
67
+ overflowItems = _useState6[0],
68
+ setOverflowItems = _useState6[1];
69
+ var handleResize = function handleResize() {
70
+ setContainerWidth(containerRef.current.offsetWidth);
71
+ };
72
+ useResizeObserver.useResizeObserver(containerRef, handleResize);
73
+ var getMap = function getMap() {
74
+ if (!itemRefs.current) {
75
+ itemRefs.current = new Map();
76
+ }
77
+ return itemRefs.current;
78
+ };
79
+ var itemRefHandler = function itemRefHandler(id, node) {
80
+ var map = getMap();
81
+ if (id && node && map.get(id) !== node.offsetWidth) {
82
+ map.set(id, node.offsetWidth);
83
+ }
84
+ };
85
+ var getVisibleItems = React.useCallback(function () {
86
+ if (!itemRefs.current) {
87
+ return items;
88
+ }
89
+ if (multiline) {
90
+ var _visibleItems = maxVisible ? items === null || items === void 0 ? void 0 : items.slice(0, maxVisible) : items;
91
+ return _visibleItems;
92
+ }
93
+ var map = getMap();
94
+ var overflowContainerWidth = overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
95
+ var maxWidth = containerWidth - overflowContainerWidth;
96
+ var childrenWidth = 0;
97
+ var maxReached = false;
98
+ return items.reduce(function (prev, cur) {
99
+ if (!maxReached) {
100
+ var itemWidth = map.get(cur.id) + measurementOffset;
101
+ var fits = itemWidth + childrenWidth < maxWidth;
102
+ if (fits) {
103
+ childrenWidth += itemWidth;
104
+ prev.push(cur);
105
+ } else {
106
+ maxReached = true;
107
+ }
108
+ }
109
+ return prev;
110
+ }, []);
111
+ }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
112
+ var getCustomComponent = function getCustomComponent(item) {
113
+ var className = item.className,
114
+ id = item.id,
115
+ other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded2);
116
+ return /*#__PURE__*/React__default["default"].createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
117
+ className: cx__default["default"]("".concat(blockClass, "__item"), className),
118
+ ref: function ref(node) {
119
+ return itemRefHandler(id, node);
120
+ }
121
+ }));
122
+ };
123
+ React.useEffect(function () {
124
+ var visibleItemsArr = getVisibleItems();
125
+ if (maxVisible && maxVisible < visibleItemsArr.length) {
126
+ var _visibleItemsArr;
127
+ visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
128
+ }
129
+ var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
130
+ var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
131
+ return {
132
+ type: item.tagType,
133
+ label: item.label
134
+ };
135
+ });
136
+ setVisibleItems(visibleItemsArr);
137
+ setOverflowItems(overflowItemsArr);
138
+ }, [containerWidth, items, maxVisible, getVisibleItems]);
139
+ return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
140
+ className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
141
+ ref: containerRef,
142
+ role: "main"
143
+ }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
144
+ // Render custom components
145
+ if (tagComponent) {
146
+ return getCustomComponent(item);
147
+ } else {
148
+ // If there is no template prop, then render items as Tags
149
+ return /*#__PURE__*/React__default["default"].createElement("div", {
150
+ ref: function ref(node) {
151
+ return itemRefHandler(item.id, node);
152
+ },
153
+ key: item.id
154
+ }, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
155
+ align: "bottom",
156
+ label: item.label
157
+ }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
158
+ className: "".concat(blockClass, "__item--tag"),
159
+ type: item.tagType
160
+ }, item.label)));
161
+ }
162
+ }), /*#__PURE__*/React__default["default"].createElement("span", {
163
+ className: "".concat(blockClass, "__indicator"),
164
+ ref: overflowRef
165
+ }, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(TagSet.TagSet, {
166
+ tags: overflowItems,
167
+ allTagsModalTitle: "All tags",
168
+ containingElementRef: overflowRef,
169
+ allTagsModalSearchLabel: "Search all tags",
170
+ allTagsModalSearchPlaceholderText: "Search all tags",
171
+ showAllTagsLabel: "Show all tags"
172
+ })));
173
+ });
174
+
175
+ // Return a placeholder if not released and not enabled by feature flag
176
+ exports.TagOverflow = settings.pkg.checkComponentEnabled(exports.TagOverflow, componentName);
177
+
178
+ // The display name of the component, used by React. Note that displayName
179
+ // is used in preference to relying on function.name.
180
+ exports.TagOverflow.displayName = componentName;
181
+ var tagTypes = Object.keys(constants.TYPES);
182
+
183
+ // The types and DocGen commentary for the component props,
184
+ // in alphabetical order (for consistency).
185
+ // See https://www.npmjs.com/package/prop-types#usage.
186
+ exports.TagOverflow.propTypes = {
187
+ /**
188
+ * Provide an optional class to be applied to the containing node.
189
+ */
190
+ className: index["default"].string,
191
+ /**
192
+ * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
193
+ * **label**\* (required) to supply the item content,
194
+ * **id**\* (required) to uniquely identify the each item.
195
+ * **tagType** the type value to be passed to the Carbon Tag component
196
+ * if you are passing an tagComponent prop for rendering custom components,
197
+ * then pass the props required for your custom component as the properties of item object
198
+ */
199
+ items: index["default"].arrayOf(index["default"].shape({
200
+ id: index["default"].string.isRequired,
201
+ label: index["default"].string.isRequired,
202
+ tagType: index["default"].oneOf(tagTypes)
203
+ }).isRequired),
204
+ /**
205
+ * maximum visible items
206
+ */
207
+ maxVisible: index["default"].number,
208
+ /**
209
+ * display items in multiple lines
210
+ */
211
+ multiline: index["default"].bool,
212
+ /** Component definition of the items to be rendered inside TagOverflow.
213
+ * If this is not passed, items will be rendered as Tag component
214
+ */
215
+ tagComponent: index["default"].elementType
216
+ };
@@ -0,0 +1,14 @@
1
+ export const TYPES: {
2
+ red: string;
3
+ magenta: string;
4
+ purple: string;
5
+ blue: string;
6
+ cyan: string;
7
+ teal: string;
8
+ green: string;
9
+ gray: string;
10
+ 'cool-gray': string;
11
+ 'warm-gray': string;
12
+ 'high-contrast': string;
13
+ outline: string;
14
+ };
@@ -0,0 +1,34 @@
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
+ // Copyright IBM Corp. 2024, 2024
13
+ //
14
+ // This source code is licensed under the Apache-2.0 license found in the
15
+ // LICENSE file in the root directory of this source tree.
16
+ //
17
+
18
+ // Copied from @carbon/react/es/components/Tag/Tag.js
19
+ var TYPES = {
20
+ red: 'Red',
21
+ magenta: 'Magenta',
22
+ purple: 'Purple',
23
+ blue: 'Blue',
24
+ cyan: 'Cyan',
25
+ teal: 'Teal',
26
+ green: 'Green',
27
+ gray: 'Gray',
28
+ 'cool-gray': 'Cool-Gray',
29
+ 'warm-gray': 'Warm-Gray',
30
+ 'high-contrast': 'High-Contrast',
31
+ outline: 'Outline'
32
+ };
33
+
34
+ exports.TYPES = TYPES;
@@ -0,0 +1 @@
1
+ export { TagOverflow } from "./TagOverflow";
@@ -1,3 +1,94 @@
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
+ /// <reference path="../../../src/custom-typings/index.d.ts" />
8
+ import React, { ReactNode, PropsWithChildren } from 'react';
9
+ import PropTypes from 'prop-types';
10
+ import { ButtonProps } from '@carbon/react';
11
+ type closeIconDescriptionTypes = {
12
+ hasCloseIcon: true;
13
+ closeIconDescription: string;
14
+ };
15
+ interface TearsheetNarrowProps extends PropsWithChildren {
16
+ /**
17
+ * The navigation actions to be shown as buttons in the action area at the
18
+ * bottom of the tearsheet. Each action is specified as an object with
19
+ * optional fields: 'label' to supply the button label, 'kind' to select the
20
+ * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
21
+ * display a loading indicator, and 'onClick' to receive notifications when
22
+ * the button is clicked. Additional fields in the object will be passed to
23
+ * the Button component, and these can include 'disabled', 'ref', 'className',
24
+ * and any other Button props. Any other fields in the object will be passed
25
+ * through to the button element as HTML attributes.
26
+ *
27
+ * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
28
+ */
29
+ actions?: ButtonProps[];
30
+ /**
31
+ * The aria-label for the tearsheet, which is optional.
32
+ * if it is not passed, the title will be used as the aria-label.
33
+ */
34
+ ariaLabel?: string;
35
+ /**
36
+ * An optional class or classes to be added to the outermost element.
37
+ */
38
+ className?: string;
39
+ /**
40
+ * The accessibility title for the close icon (if shown).
41
+ *
42
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
43
+ * there are a no navigation actions and/or hasCloseIcon is true.
44
+ */
45
+ closeIconDescription?: closeIconDescriptionTypes;
46
+ /**
47
+ * A description of the flow, displayed in the header area of the tearsheet.
48
+ */
49
+ description?: ReactNode;
50
+ /**
51
+ * Enable a close icon ('x') in the header area of the tearsheet. By default,
52
+ * a tearsheet does not display a close icon, but one should be enabled if
53
+ * the tearsheet is read-only or has no navigation actions (sometimes called
54
+ * a "passive tearsheet").
55
+ */
56
+ hasCloseIcon?: boolean;
57
+ /**
58
+ * A label for the tearsheet, displayed in the header area of the tearsheet
59
+ * to maintain context for the tearsheet (e.g. as the title changes from page
60
+ * to page of a multi-page task).
61
+ */
62
+ label?: ReactNode;
63
+ /**
64
+ * An optional handler that is called when the user closes the tearsheet (by
65
+ * clicking the close button, if enabled, or clicking outside, if enabled).
66
+ * Returning `false` here prevents the modal from closing.
67
+ */
68
+ onClose?: () => boolean | void;
69
+ /**
70
+ * Specifies whether the tearsheet is currently open.
71
+ */
72
+ open?: boolean;
73
+ /**
74
+ * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
75
+ */
76
+ portalTarget?: ReactNode;
77
+ /**
78
+ * The main title of the tearsheet, displayed in the header area.
79
+ */
80
+ title?: ReactNode;
81
+ /**
82
+ * **Deprecated**
83
+ *
84
+ * The position of the top of tearsheet in the viewport. The 'normal'
85
+ * position is a short distance down from the top of the
86
+ * viewport, leaving room at the top for a global header bar to show through
87
+ * from below. The 'lower' position (the default) provides a little extra room at the top
88
+ * to allow an action bar navigation or breadcrumbs to also show through.
89
+ */
90
+ verticalPosition?: 'normal' | 'lower';
91
+ }
1
92
  /**
2
93
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
3
94
  * that keeps users in-context and focused by bringing actionable content front
@@ -6,9 +97,17 @@
6
97
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
7
98
  * main content area, and a set of action buttons.
8
99
  */
9
- export let TearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
10
- export namespace deprecatedProps {
11
- let verticalPosition: PropTypes.Requireable<string>;
12
- }
13
- import React from 'react';
14
- import PropTypes from 'prop-types';
100
+ export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<unknown>>;
101
+ export declare const deprecatedProps: {
102
+ /**
103
+ * **Deprecated**
104
+ *
105
+ * The position of the top of tearsheet in the viewport. The 'normal'
106
+ * position is a short distance down from the top of the
107
+ * viewport, leaving room at the top for a global header bar to show through
108
+ * from below. The 'lower' position (the default) provides a little extra room at the top
109
+ * to allow an action bar navigation or breadcrumbs to also show through.
110
+ */
111
+ verticalPosition: PropTypes.Requireable<string>;
112
+ };
113
+ export {};
@@ -41,6 +41,7 @@ var defaults = {
41
41
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
42
42
  * main content area, and a set of action buttons.
43
43
  */
44
+
44
45
  exports.TearsheetNarrow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
45
46
  var _ref$verticalPosition = _ref.verticalPosition,
46
47
  verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
@@ -91,7 +92,8 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
91
92
  *
92
93
  * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
93
94
  */
94
- actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(function () {
95
+ actions: propsHelper.allPropTypes([/**@ts-ignore */
96
+ ActionSet.ActionSet.validateActions(function () {
95
97
  return 'lg';
96
98
  }), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
97
99
  kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -115,6 +117,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
115
117
  * **Note:** This prop is only required if a close icon is shown, i.e. if
116
118
  * there are a no navigation actions and/or hasCloseIcon is true.
117
119
  */
120
+ /**@ts-ignore */
118
121
  closeIconDescription: index["default"].string.isRequired.if(function (_ref2) {
119
122
  var actions = _ref2.actions,
120
123
  hasCloseIcon = _ref2.hasCloseIcon;
@@ -130,6 +133,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
130
133
  * the tearsheet is read-only or has no navigation actions (sometimes called
131
134
  * a "passive tearsheet").
132
135
  */
136
+ /**@ts-ignore*/
133
137
  hasCloseIcon: index["default"].bool,
134
138
  /**
135
139
  * A label for the tearsheet, displayed in the header area of the tearsheet
@@ -150,6 +154,7 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
150
154
  /**
151
155
  * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
152
156
  */
157
+ /**@ts-ignore */
153
158
  portalTarget: TearsheetShell.portalType,
154
159
  /**
155
160
  * The main title of the tearsheet, displayed in the header area.
@@ -1,6 +1,24 @@
1
- export const blockClass: string;
2
- export const componentName: "Toolbar";
3
- /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
4
- export let Toolbar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
5
- export const ToolbarContext: React.Context<any>;
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2022
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
+ */
6
7
  import React from 'react';
8
+ declare const blockClass: string;
9
+ interface ToolbarProps {
10
+ /** Provide an optional class to be applied to the containing node */
11
+ className?: string;
12
+ /** Determines whether the `Toolbar` is rendered vertically */
13
+ vertical?: boolean;
14
+ }
15
+ interface ToolbarContextType {
16
+ vertical?: boolean;
17
+ }
18
+ declare const ToolbarContext: React.Context<ToolbarContextType>;
19
+ /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
20
+ declare let Toolbar: React.ForwardRefExoticComponent<ToolbarProps & {
21
+ children?: React.ReactNode;
22
+ } & React.RefAttributes<HTMLDivElement>>;
23
+ declare const componentName = "Toolbar";
24
+ export { blockClass, componentName, Toolbar, ToolbarContext };
@@ -26,50 +26,54 @@ var _excluded = ["children", "className", "vertical"];
26
26
  var checkComponentEnabled = settings.pkg.checkComponentEnabled,
27
27
  prefix = settings.pkg.prefix;
28
28
  var blockClass = "".concat(prefix, "--toolbar");
29
- var ToolbarContext = /*#__PURE__*/React.createContext();
29
+ var ToolbarContext = /*#__PURE__*/React.createContext({});
30
30
 
31
31
  /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
32
- exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref2, r) {
33
- var children = _ref2.children,
34
- className = _ref2.className,
35
- vertical = _ref2.vertical,
36
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
32
+ exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
33
+ var children = _ref.children,
34
+ className = _ref.className,
35
+ vertical = _ref.vertical,
36
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
37
37
  var focusableElements = React.useRef();
38
38
  var getFocusableElements$1 = React.useCallback(function () {
39
39
  return focusableElements.current;
40
40
  }, [focusableElements]);
41
- var _ref = React.useRef();
42
- var ref = r || _ref;
43
- var _useState = React.useState(),
41
+ var localRef = React.useRef(null);
42
+ var ref = r || localRef;
43
+ var _useState = React.useState(-1),
44
44
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
45
45
  focus = _useState2[0],
46
46
  setFocus = _useState2[1];
47
47
  React.useEffect(function () {
48
- focusableElements.current = getFocusableElements.getFocusableElements(ref.current);
49
- typeof focus !== 'undefined' && getFocusableElements$1().forEach(function (element, index) {
50
- element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
51
- });
48
+ var _getFocusableElements2;
49
+ focusableElements.current = getFocusableElements.getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
50
+ focus !== -1 && ((_getFocusableElements2 = getFocusableElements$1()) === null || _getFocusableElements2 === void 0 ? void 0 : _getFocusableElements2.forEach(function (element, index) {
51
+ element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
52
+ }));
52
53
  });
53
54
  React.useEffect(function () {
54
- typeof focus !== 'undefined' && getFocusableElements$1()[focus].focus();
55
+ var _getFocusableElements3;
56
+ focus !== -1 && ((_getFocusableElements3 = getFocusableElements$1()) === null || _getFocusableElements3 === void 0 ? void 0 : _getFocusableElements3[focus].focus());
55
57
  }, [focus, getFocusableElements$1]);
56
- var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
57
- _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2),
58
- arrowNext = _ref4[0],
59
- arrowPrevious = _ref4[1];
58
+ var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
59
+ _ref3 = _rollupPluginBabelHelpers.slicedToArray(_ref2, 2),
60
+ arrowNext = _ref3[0],
61
+ arrowPrevious = _ref3[1];
60
62
  function onArrowDown(increment) {
63
+ var _getFocusableElements4;
61
64
  var nextFocus = focus + increment;
62
- getFocusableElements$1()[nextFocus] && setFocus(nextFocus);
65
+ ((_getFocusableElements4 = getFocusableElements$1()) === null || _getFocusableElements4 === void 0 ? void 0 : _getFocusableElements4[nextFocus]) && setFocus(nextFocus);
63
66
  }
64
- function onFocus(_ref5) {
65
- var target = _ref5.target;
67
+ function onFocus(_ref4) {
68
+ var target = _ref4.target;
66
69
  var elements = getFocusableElements$1();
67
- elements.includes(target) && setFocus(elements.indexOf(target));
70
+ (elements === null || elements === void 0 ? void 0 : elements.includes(target)) && setFocus(elements.indexOf(target));
68
71
  }
69
- function onKeyDown(_ref6) {
70
- var key = _ref6.key,
71
- target = _ref6.target;
72
- if (getFocusableElements$1().includes(target)) {
72
+ function onKeyDown(_ref5) {
73
+ var _getFocusableElements5;
74
+ var key = _ref5.key,
75
+ target = _ref5.target;
76
+ if ((_getFocusableElements5 = getFocusableElements$1()) !== null && _getFocusableElements5 !== void 0 && _getFocusableElements5.includes(target)) {
73
77
  switch (key) {
74
78
  case arrowNext:
75
79
  onArrowDown(1);
@@ -55,10 +55,12 @@ var componentName = 'UserAvatar';
55
55
 
56
56
  var defaults = {
57
57
  size: 'md',
58
- tooltipAlignment: 'bottom'
58
+ tooltipAlignment: 'bottom',
59
+ backgroundColor: 'order-1-cyan'
59
60
  };
60
61
  exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
61
- var backgroundColor = _ref.backgroundColor,
62
+ var _ref$backgroundColor = _ref.backgroundColor,
63
+ backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
62
64
  className = _ref.className,
63
65
  image = _ref.image,
64
66
  imageDescription = _ref.imageDescription,
@@ -51,7 +51,9 @@ export { StringFormatter } from "./StringFormatter";
51
51
  export { UserAvatar } from "./UserAvatar";
52
52
  export { ScrollGradient } from "./ScrollGradient";
53
53
  export { StatusIndicator } from "./StatusIndicator";
54
+ export { TagOverflow } from "./TagOverflow";
54
55
  export { ActionBar } from "./ActionBar";
56
+ export { ConditionBuilder } from "./ConditionBuilder";
55
57
  export { ComboButton, ComboButtonItem } from "./ComboButton";
56
58
  export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
57
59
  export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
@@ -60,9 +62,9 @@ export { HTTPError403, HTTPError404, HTTPErrorOther } from "./HTTPErrors";
60
62
  export { Tearsheet, TearsheetNarrow } from "./Tearsheet";
61
63
  export { Toolbar, ToolbarButton, ToolbarGroup } from "./Toolbar";
62
64
  export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from "./WebTerminal";
63
- export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from "./Datagrid";
65
+ export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext, useEditableCell } from "./Datagrid";
64
66
  export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
65
67
  export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
66
68
  export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
67
69
  export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
68
- export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel } from "./FilterPanel";
70
+ export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
@@ -84,6 +84,7 @@ declare namespace defaults {
84
84
  let StringFormatter: boolean;
85
85
  let StatusIndicator: boolean;
86
86
  let StatusIndicatorStep: boolean;
87
+ let TagOverflow: boolean;
87
88
  let ActionBar: boolean;
88
89
  let FilterPanel: boolean;
89
90
  let FilterPanelAccordion: boolean;
@@ -92,6 +93,8 @@ declare namespace defaults {
92
93
  let FilterPanelCheckboxWithOverflow: boolean;
93
94
  let FilterPanelGroup: boolean;
94
95
  let FilterPanelLabel: boolean;
96
+ let FilterPanelSearch: boolean;
97
+ let ConditionBuilder: boolean;
95
98
  let Coachmark: boolean;
96
99
  let CoachmarkBeacon: boolean;
97
100
  let CoachmarkButton: boolean;
@@ -87,6 +87,7 @@ var defaults = {
87
87
  StringFormatter: false,
88
88
  StatusIndicator: false,
89
89
  StatusIndicatorStep: false,
90
+ TagOverflow: false,
90
91
  ActionBar: false,
91
92
  FilterPanel: false,
92
93
  FilterPanelAccordion: false,
@@ -95,6 +96,8 @@ var defaults = {
95
96
  FilterPanelCheckboxWithOverflow: false,
96
97
  FilterPanelGroup: false,
97
98
  FilterPanelLabel: false,
99
+ FilterPanelSearch: false,
100
+ ConditionBuilder: false,
98
101
  /* new component flags here - comment used by generate CLI */
99
102
 
100
103
  // Novice to pro components not yet reviewed and released: