@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,209 @@
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
+ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import React__default, { useRef, useState, useCallback, useEffect } from 'react';
10
+ import PropTypes from '../../node_modules/prop-types/index.js';
11
+ import cx from 'classnames';
12
+ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
13
+ import { pkg } from '../../settings.js';
14
+ import { Tooltip, Tag } from '@carbon/react';
15
+ import { TYPES } from './constants.js';
16
+ import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
17
+ import { TagSet } from '../TagSet/TagSet.js';
18
+
19
+ var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
20
+ _excluded2 = ["className", "id"];
21
+ var blockClass = "".concat(pkg.prefix, "--tag-overflow");
22
+ var componentName = 'TagOverflow';
23
+
24
+ // Default values for props
25
+ var defaults = {
26
+ items: []
27
+ };
28
+
29
+ /**
30
+ * TODO: A description of the component.
31
+ */
32
+ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
33
+ var className = _ref.className,
34
+ _ref$items = _ref.items,
35
+ items = _ref$items === void 0 ? defaults.items : _ref$items,
36
+ tagComponent = _ref.tagComponent,
37
+ maxVisible = _ref.maxVisible,
38
+ multiline = _ref.multiline,
39
+ rest = _objectWithoutProperties(_ref, _excluded);
40
+ var localContainerRef = useRef(null);
41
+ var containerRef = ref || localContainerRef;
42
+ var itemRefs = useRef(null);
43
+ var overflowRef = useRef(null);
44
+ // measurementOffset is the value of margin applied on each items
45
+ // This value is required for calculating how many items will fit within the container
46
+ var measurementOffset = 4;
47
+ var overflowIndicatorWidth = 40;
48
+ var _useState = useState(0),
49
+ _useState2 = _slicedToArray(_useState, 2),
50
+ containerWidth = _useState2[0],
51
+ setContainerWidth = _useState2[1];
52
+ var _useState3 = useState([]),
53
+ _useState4 = _slicedToArray(_useState3, 2),
54
+ visibleItems = _useState4[0],
55
+ setVisibleItems = _useState4[1];
56
+ var _useState5 = useState([]),
57
+ _useState6 = _slicedToArray(_useState5, 2),
58
+ overflowItems = _useState6[0],
59
+ setOverflowItems = _useState6[1];
60
+ var handleResize = function handleResize() {
61
+ setContainerWidth(containerRef.current.offsetWidth);
62
+ };
63
+ useResizeObserver(containerRef, handleResize);
64
+ var getMap = function getMap() {
65
+ if (!itemRefs.current) {
66
+ itemRefs.current = new Map();
67
+ }
68
+ return itemRefs.current;
69
+ };
70
+ var itemRefHandler = function itemRefHandler(id, node) {
71
+ var map = getMap();
72
+ if (id && node && map.get(id) !== node.offsetWidth) {
73
+ map.set(id, node.offsetWidth);
74
+ }
75
+ };
76
+ var getVisibleItems = useCallback(function () {
77
+ if (!itemRefs.current) {
78
+ return items;
79
+ }
80
+ if (multiline) {
81
+ var _visibleItems = maxVisible ? items === null || items === void 0 ? void 0 : items.slice(0, maxVisible) : items;
82
+ return _visibleItems;
83
+ }
84
+ var map = getMap();
85
+ var overflowContainerWidth = overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
86
+ var maxWidth = containerWidth - overflowContainerWidth;
87
+ var childrenWidth = 0;
88
+ var maxReached = false;
89
+ return items.reduce(function (prev, cur) {
90
+ if (!maxReached) {
91
+ var itemWidth = map.get(cur.id) + measurementOffset;
92
+ var fits = itemWidth + childrenWidth < maxWidth;
93
+ if (fits) {
94
+ childrenWidth += itemWidth;
95
+ prev.push(cur);
96
+ } else {
97
+ maxReached = true;
98
+ }
99
+ }
100
+ return prev;
101
+ }, []);
102
+ }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
103
+ var getCustomComponent = function getCustomComponent(item) {
104
+ var className = item.className,
105
+ id = item.id,
106
+ other = _objectWithoutProperties(item, _excluded2);
107
+ return /*#__PURE__*/React__default.createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
108
+ className: cx("".concat(blockClass, "__item"), className),
109
+ ref: function ref(node) {
110
+ return itemRefHandler(id, node);
111
+ }
112
+ }));
113
+ };
114
+ useEffect(function () {
115
+ var visibleItemsArr = getVisibleItems();
116
+ if (maxVisible && maxVisible < visibleItemsArr.length) {
117
+ var _visibleItemsArr;
118
+ visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
119
+ }
120
+ var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
121
+ var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
122
+ return {
123
+ type: item.tagType,
124
+ label: item.label
125
+ };
126
+ });
127
+ setVisibleItems(visibleItemsArr);
128
+ setOverflowItems(overflowItemsArr);
129
+ }, [containerWidth, items, maxVisible, getVisibleItems]);
130
+ return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
131
+ className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
132
+ ref: containerRef,
133
+ role: "main"
134
+ }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
135
+ // Render custom components
136
+ if (tagComponent) {
137
+ return getCustomComponent(item);
138
+ } else {
139
+ // If there is no template prop, then render items as Tags
140
+ return /*#__PURE__*/React__default.createElement("div", {
141
+ ref: function ref(node) {
142
+ return itemRefHandler(item.id, node);
143
+ },
144
+ key: item.id
145
+ }, /*#__PURE__*/React__default.createElement(Tooltip, {
146
+ align: "bottom",
147
+ label: item.label
148
+ }, /*#__PURE__*/React__default.createElement(Tag, {
149
+ className: "".concat(blockClass, "__item--tag"),
150
+ type: item.tagType
151
+ }, item.label)));
152
+ }
153
+ }), /*#__PURE__*/React__default.createElement("span", {
154
+ className: "".concat(blockClass, "__indicator"),
155
+ ref: overflowRef
156
+ }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(TagSet, {
157
+ tags: overflowItems,
158
+ allTagsModalTitle: "All tags",
159
+ containingElementRef: overflowRef,
160
+ allTagsModalSearchLabel: "Search all tags",
161
+ allTagsModalSearchPlaceholderText: "Search all tags",
162
+ showAllTagsLabel: "Show all tags"
163
+ })));
164
+ });
165
+
166
+ // Return a placeholder if not released and not enabled by feature flag
167
+ TagOverflow = pkg.checkComponentEnabled(TagOverflow, componentName);
168
+
169
+ // The display name of the component, used by React. Note that displayName
170
+ // is used in preference to relying on function.name.
171
+ TagOverflow.displayName = componentName;
172
+ var tagTypes = Object.keys(TYPES);
173
+
174
+ // The types and DocGen commentary for the component props,
175
+ // in alphabetical order (for consistency).
176
+ // See https://www.npmjs.com/package/prop-types#usage.
177
+ TagOverflow.propTypes = {
178
+ /**
179
+ * Provide an optional class to be applied to the containing node.
180
+ */
181
+ className: PropTypes.string,
182
+ /**
183
+ * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
184
+ * **label**\* (required) to supply the item content,
185
+ * **id**\* (required) to uniquely identify the each item.
186
+ * **tagType** the type value to be passed to the Carbon Tag component
187
+ * if you are passing an tagComponent prop for rendering custom components,
188
+ * then pass the props required for your custom component as the properties of item object
189
+ */
190
+ items: PropTypes.arrayOf(PropTypes.shape({
191
+ id: PropTypes.string.isRequired,
192
+ label: PropTypes.string.isRequired,
193
+ tagType: PropTypes.oneOf(tagTypes)
194
+ }).isRequired),
195
+ /**
196
+ * maximum visible items
197
+ */
198
+ maxVisible: PropTypes.number,
199
+ /**
200
+ * display items in multiple lines
201
+ */
202
+ multiline: PropTypes.bool,
203
+ /** Component definition of the items to be rendered inside TagOverflow.
204
+ * If this is not passed, items will be rendered as Tag component
205
+ */
206
+ tagComponent: PropTypes.elementType
207
+ };
208
+
209
+ export { TagOverflow };
@@ -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,30 @@
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
+ // Copyright IBM Corp. 2024, 2024
9
+ //
10
+ // This source code is licensed under the Apache-2.0 license found in the
11
+ // LICENSE file in the root directory of this source tree.
12
+ //
13
+
14
+ // Copied from @carbon/react/es/components/Tag/Tag.js
15
+ var TYPES = {
16
+ red: 'Red',
17
+ magenta: 'Magenta',
18
+ purple: 'Purple',
19
+ blue: 'Blue',
20
+ cyan: 'Cyan',
21
+ teal: 'Teal',
22
+ green: 'Green',
23
+ gray: 'Gray',
24
+ 'cool-gray': 'Cool-Gray',
25
+ 'warm-gray': 'Warm-Gray',
26
+ 'high-contrast': 'High-Contrast',
27
+ outline: 'Outline'
28
+ };
29
+
30
+ export { 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 {};
@@ -33,6 +33,7 @@ var defaults = {
33
33
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
34
34
  * main content area, and a set of action buttons.
35
35
  */
36
+
36
37
  var TearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
37
38
  var _ref$verticalPosition = _ref.verticalPosition,
38
39
  verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
@@ -83,7 +84,8 @@ TearsheetNarrow.propTypes = _objectSpread2({
83
84
  *
84
85
  * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
85
86
  */
86
- actions: allPropTypes([ActionSet.validateActions(function () {
87
+ actions: allPropTypes([/**@ts-ignore */
88
+ ActionSet.validateActions(function () {
87
89
  return 'lg';
88
90
  }), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
89
91
  kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -107,6 +109,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
107
109
  * **Note:** This prop is only required if a close icon is shown, i.e. if
108
110
  * there are a no navigation actions and/or hasCloseIcon is true.
109
111
  */
112
+ /**@ts-ignore */
110
113
  closeIconDescription: PropTypes.string.isRequired.if(function (_ref2) {
111
114
  var actions = _ref2.actions,
112
115
  hasCloseIcon = _ref2.hasCloseIcon;
@@ -122,6 +125,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
122
125
  * the tearsheet is read-only or has no navigation actions (sometimes called
123
126
  * a "passive tearsheet").
124
127
  */
128
+ /**@ts-ignore*/
125
129
  hasCloseIcon: PropTypes.bool,
126
130
  /**
127
131
  * A label for the tearsheet, displayed in the header area of the tearsheet
@@ -142,6 +146,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
142
146
  /**
143
147
  * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
144
148
  */
149
+ /**@ts-ignore */
145
150
  portalTarget: portalType,
146
151
  /**
147
152
  * 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 };
@@ -17,50 +17,54 @@ var _excluded = ["children", "className", "vertical"];
17
17
  var checkComponentEnabled = pkg.checkComponentEnabled,
18
18
  prefix = pkg.prefix;
19
19
  var blockClass = "".concat(prefix, "--toolbar");
20
- var ToolbarContext = /*#__PURE__*/createContext();
20
+ var ToolbarContext = /*#__PURE__*/createContext({});
21
21
 
22
22
  /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
23
- var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
24
- var children = _ref2.children,
25
- className = _ref2.className,
26
- vertical = _ref2.vertical,
27
- rest = _objectWithoutProperties(_ref2, _excluded);
23
+ var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
24
+ var children = _ref.children,
25
+ className = _ref.className,
26
+ vertical = _ref.vertical,
27
+ rest = _objectWithoutProperties(_ref, _excluded);
28
28
  var focusableElements = useRef();
29
29
  var getFocusableElements$1 = useCallback(function () {
30
30
  return focusableElements.current;
31
31
  }, [focusableElements]);
32
- var _ref = useRef();
33
- var ref = r || _ref;
34
- var _useState = useState(),
32
+ var localRef = useRef(null);
33
+ var ref = r || localRef;
34
+ var _useState = useState(-1),
35
35
  _useState2 = _slicedToArray(_useState, 2),
36
36
  focus = _useState2[0],
37
37
  setFocus = _useState2[1];
38
38
  useEffect(function () {
39
- focusableElements.current = getFocusableElements(ref.current);
40
- typeof focus !== 'undefined' && getFocusableElements$1().forEach(function (element, index) {
41
- element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
42
- });
39
+ var _getFocusableElements2;
40
+ focusableElements.current = getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
41
+ focus !== -1 && ((_getFocusableElements2 = getFocusableElements$1()) === null || _getFocusableElements2 === void 0 ? void 0 : _getFocusableElements2.forEach(function (element, index) {
42
+ element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
43
+ }));
43
44
  });
44
45
  useEffect(function () {
45
- typeof focus !== 'undefined' && getFocusableElements$1()[focus].focus();
46
+ var _getFocusableElements3;
47
+ focus !== -1 && ((_getFocusableElements3 = getFocusableElements$1()) === null || _getFocusableElements3 === void 0 ? void 0 : _getFocusableElements3[focus].focus());
46
48
  }, [focus, getFocusableElements$1]);
47
- var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
48
- _ref4 = _slicedToArray(_ref3, 2),
49
- arrowNext = _ref4[0],
50
- arrowPrevious = _ref4[1];
49
+ var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
50
+ _ref3 = _slicedToArray(_ref2, 2),
51
+ arrowNext = _ref3[0],
52
+ arrowPrevious = _ref3[1];
51
53
  function onArrowDown(increment) {
54
+ var _getFocusableElements4;
52
55
  var nextFocus = focus + increment;
53
- getFocusableElements$1()[nextFocus] && setFocus(nextFocus);
56
+ ((_getFocusableElements4 = getFocusableElements$1()) === null || _getFocusableElements4 === void 0 ? void 0 : _getFocusableElements4[nextFocus]) && setFocus(nextFocus);
54
57
  }
55
- function onFocus(_ref5) {
56
- var target = _ref5.target;
58
+ function onFocus(_ref4) {
59
+ var target = _ref4.target;
57
60
  var elements = getFocusableElements$1();
58
- elements.includes(target) && setFocus(elements.indexOf(target));
61
+ (elements === null || elements === void 0 ? void 0 : elements.includes(target)) && setFocus(elements.indexOf(target));
59
62
  }
60
- function onKeyDown(_ref6) {
61
- var key = _ref6.key,
62
- target = _ref6.target;
63
- if (getFocusableElements$1().includes(target)) {
63
+ function onKeyDown(_ref5) {
64
+ var _getFocusableElements5;
65
+ var key = _ref5.key,
66
+ target = _ref5.target;
67
+ if ((_getFocusableElements5 = getFocusableElements$1()) !== null && _getFocusableElements5 !== void 0 && _getFocusableElements5.includes(target)) {
64
68
  switch (key) {
65
69
  case arrowNext:
66
70
  onArrowDown(1);
@@ -46,10 +46,12 @@ var componentName = 'UserAvatar';
46
46
 
47
47
  var defaults = {
48
48
  size: 'md',
49
- tooltipAlignment: 'bottom'
49
+ tooltipAlignment: 'bottom',
50
+ backgroundColor: 'order-1-cyan'
50
51
  };
51
52
  var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
52
- var backgroundColor = _ref.backgroundColor,
53
+ var _ref$backgroundColor = _ref.backgroundColor,
54
+ backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
53
55
  className = _ref.className,
54
56
  image = _ref.image,
55
57
  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;
@@ -83,6 +83,7 @@ var defaults = {
83
83
  StringFormatter: false,
84
84
  StatusIndicator: false,
85
85
  StatusIndicatorStep: false,
86
+ TagOverflow: false,
86
87
  ActionBar: false,
87
88
  FilterPanel: false,
88
89
  FilterPanelAccordion: false,
@@ -91,6 +92,8 @@ var defaults = {
91
92
  FilterPanelCheckboxWithOverflow: false,
92
93
  FilterPanelGroup: false,
93
94
  FilterPanelLabel: false,
95
+ FilterPanelSearch: false,
96
+ ConditionBuilder: false,
94
97
  /* new component flags here - comment used by generate CLI */
95
98
 
96
99
  // Novice to pro components not yet reviewed and released:
package/es/index.js CHANGED
@@ -78,6 +78,7 @@ export { default as useInlineEdit } from './components/Datagrid/useInlineEdit.js
78
78
  export { default as useFiltering } from './components/Datagrid/useFiltering.js';
79
79
  export { getAutoSizedColumnWidth } from './components/Datagrid/utils/getAutoSizedColumnWidth.js';
80
80
  export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
81
+ export { default as useEditableCell } from './components/Datagrid/useEditableCell.js';
81
82
  export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
82
83
  export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';
83
84
  export { EditTearsheetNarrow } from './components/EditTearsheetNarrow/EditTearsheetNarrow.js';
@@ -120,6 +121,7 @@ export { StringFormatter } from './components/StringFormatter/StringFormatter.js
120
121
  export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
121
122
  export { ScrollGradient } from './components/ScrollGradient/ScrollGradient.js';
122
123
  export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';
124
+ export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
123
125
  export { ActionBar } from './components/ActionBar/ActionBar.js';
124
126
  export { FilterPanel } from './components/FilterPanel/FilterPanel.js';
125
127
  export { FilterPanelAccordion } from './components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js';
@@ -128,3 +130,5 @@ export { FilterPanelCheckbox } from './components/FilterPanel/FilterPanelCheckbo
128
130
  export { FilterPanelCheckboxWithOverflow } from './components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js';
129
131
  export { FilterPanelGroup } from './components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js';
130
132
  export { FilterPanelLabel } from './components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js';
133
+ export { FilterPanelSearch } from './components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js';
134
+ export { ConditionBuilder } from './components/ConditionBuilder/ConditionBuilder.js';
package/es/settings.d.ts CHANGED
@@ -70,6 +70,7 @@ export const pkg: {
70
70
  StringFormatter: boolean;
71
71
  StatusIndicator: boolean;
72
72
  StatusIndicatorStep: boolean;
73
+ TagOverflow: boolean;
73
74
  ActionBar: boolean;
74
75
  FilterPanel: boolean;
75
76
  FilterPanelAccordion: boolean;
@@ -78,6 +79,8 @@ export const pkg: {
78
79
  FilterPanelCheckboxWithOverflow: boolean;
79
80
  FilterPanelGroup: boolean;
80
81
  FilterPanelLabel: boolean;
82
+ FilterPanelSearch: boolean;
83
+ ConditionBuilder: boolean;
81
84
  Coachmark: boolean;
82
85
  CoachmarkBeacon: boolean;
83
86
  CoachmarkButton: boolean;