@carbon/ibm-products 2.43.2-canary.97 → 2.43.2-canary.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es/components/TagOverflow/TagOverflow.d.ts +35 -4
  2. package/es/components/TagOverflow/TagOverflow.js +47 -64
  3. package/es/components/TagOverflow/TagOverflowModal.js +4 -6
  4. package/es/components/TagOverflow/TagOverflowPopover.d.ts +13 -1
  5. package/es/components/TagOverflow/TagOverflowPopover.js +38 -41
  6. package/lib/components/TagOverflow/TagOverflow.d.ts +35 -4
  7. package/lib/components/TagOverflow/TagOverflow.js +46 -63
  8. package/lib/components/TagOverflow/TagOverflowModal.js +4 -6
  9. package/lib/components/TagOverflow/TagOverflowPopover.d.ts +13 -1
  10. package/lib/components/TagOverflow/TagOverflowPopover.js +37 -40
  11. package/package.json +3 -3
package/es/components/TagOverflow/TagOverflow.d.ts CHANGED
@@ -1,10 +1,41 @@
1
1
  /**
2
- * TODO: A description of the component.
2
+ * Copyright IBM Corp. 2024, 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.
3
6
  */
4
- export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
+ import React, { RefObject, ReactNode } from 'react';
8
+ export interface TagOverflowItem {
9
+ className?: string;
10
+ filter?: string;
11
+ id: string;
12
+ label: string;
13
+ onClose: () => void;
14
+ tagType?: 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray' | 'high-contrast' | 'outline';
15
+ type?: string;
16
+ }
17
+ export interface Props {
18
+ align?: 'start' | 'center' | 'end';
19
+ allTagsModalSearchLabel?: string;
20
+ allTagsModalSearchPlaceholderText?: string;
21
+ allTagsModalTarget?: ReactNode;
22
+ allTagsModalTitle?: string;
23
+ className?: string;
24
+ containingElementRef?: RefObject<HTMLElement>;
25
+ items: TagOverflowItem[];
26
+ maxVisible?: number;
27
+ measurementOffset?: number;
28
+ multiline?: boolean;
29
+ overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
30
+ overflowClassName?: string;
31
+ overflowType?: 'default' | 'tag';
32
+ onOverflowTagChange?: (arr: TagOverflowItem[]) => void;
33
+ showAllTagsLabel?: string;
34
+ tagComponent?: string;
35
+ }
36
+ export declare let TagOverflow: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
5
37
  /**
6
38
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
7
39
  * @returns null if no problems
8
40
  */
9
- export const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
10
- import React from 'react';
41
+ export declare const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
package/es/components/TagOverflow/TagOverflow.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import React__default, { useRef, useState, useCallback, useEffect } from 'react';
9
+ import React__default, { forwardRef, useRef, useState, useCallback, useEffect, createElement } from 'react';
10
10
  import PropTypes from '../../node_modules/prop-types/index.js';
11
11
  import cx from 'classnames';
12
12
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -18,52 +18,36 @@ import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
18
18
  import { TagOverflowPopover } from './TagOverflowPopover.js';
19
19
  import { TagOverflowModal } from './TagOverflowModal.js';
20
20
 
21
- var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
21
+ var _excluded = ["align", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
22
22
  _excluded2 = ["className", "id"],
23
23
  _excluded3 = ["tagType"],
24
24
  _excluded4 = ["id", "label", "tagType", "onClose"];
25
25
  var blockClass = "".concat(pkg.prefix, "--tag-overflow");
26
26
  var componentName = 'TagOverflow';
27
27
  var allTagsModalSearchThreshold = 10;
28
-
29
- // Default values for props
30
- var defaults = {
31
- items: [],
32
- align: 'start',
33
- measurementOffset: 0,
34
- overflowAlign: 'bottom',
35
- overflowType: 'default',
36
- onOverflowTagChange: function onOverflowTagChange() {}
37
- };
38
-
39
- /**
40
- * TODO: A description of the component.
41
- */
42
- var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
43
- var _ref$items = _ref.items,
44
- items = _ref$items === void 0 ? defaults.items : _ref$items,
45
- tagComponent = _ref.tagComponent,
46
- _ref$align = _ref.align,
47
- align = _ref$align === void 0 ? defaults.align : _ref$align,
48
- showAllTagsLabel = _ref.showAllTagsLabel,
49
- allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
50
- allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
51
- allTagsModalTarget = _ref.allTagsModalTarget,
52
- allTagsModalTitle = _ref.allTagsModalTitle,
53
- className = _ref.className,
54
- containingElementRef = _ref.containingElementRef,
55
- _ref$measurementOffse = _ref.measurementOffset,
56
- measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
57
- maxVisible = _ref.maxVisible,
58
- multiline = _ref.multiline,
59
- _ref$overflowAlign = _ref.overflowAlign,
60
- overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
61
- overflowClassName = _ref.overflowClassName,
62
- _ref$overflowType = _ref.overflowType,
63
- overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
64
- _ref$onOverflowTagCha = _ref.onOverflowTagChange,
65
- onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
66
- rest = _objectWithoutProperties(_ref, _excluded);
28
+ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
29
+ var _props$align = props.align,
30
+ align = _props$align === void 0 ? 'start' : _props$align,
31
+ allTagsModalSearchLabel = props.allTagsModalSearchLabel,
32
+ allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
33
+ allTagsModalTarget = props.allTagsModalTarget,
34
+ allTagsModalTitle = props.allTagsModalTitle,
35
+ className = props.className,
36
+ containingElementRef = props.containingElementRef,
37
+ items = props.items,
38
+ maxVisible = props.maxVisible,
39
+ _props$measurementOff = props.measurementOffset,
40
+ measurementOffset = _props$measurementOff === void 0 ? 0 : _props$measurementOff,
41
+ multiline = props.multiline,
42
+ _props$overflowAlign = props.overflowAlign,
43
+ overflowAlign = _props$overflowAlign === void 0 ? 'bottom' : _props$overflowAlign,
44
+ overflowClassName = props.overflowClassName,
45
+ _props$overflowType = props.overflowType,
46
+ overflowType = _props$overflowType === void 0 ? 'default' : _props$overflowType,
47
+ onOverflowTagChange = props.onOverflowTagChange,
48
+ showAllTagsLabel = props.showAllTagsLabel,
49
+ tagComponent = props.tagComponent,
50
+ rest = _objectWithoutProperties(props, _excluded);
67
51
  var localContainerRef = useRef(null);
68
52
  var containerRef = ref || localContainerRef;
69
53
  var itemRefs = useRef(null);
@@ -100,7 +84,9 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
100
84
  setShowAllModalOpen(false);
101
85
  };
102
86
  var handleResize = function handleResize() {
103
- setContainerWidth(resizeElm.current.offsetWidth);
87
+ if (typeof resizeElm !== 'function' && resizeElm.current) {
88
+ setContainerWidth(resizeElm.current.offsetWidth);
89
+ }
104
90
  };
105
91
  useResizeObserver(resizeElm, handleResize);
106
92
  var getMap = function getMap() {
@@ -116,7 +102,6 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
116
102
  }
117
103
  };
118
104
  var getVisibleItems = useCallback(function () {
119
- var _overflowRef$current;
120
105
  if (!itemRefs.current) {
121
106
  return items;
122
107
  }
@@ -128,13 +113,13 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
128
113
  var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
129
114
  var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
130
115
  var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
131
- var overflowContainerWidth = ((_overflowRef$current = overflowRef.current) === null || _overflowRef$current === void 0 ? void 0 : _overflowRef$current.offsetWidth) > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
116
+ var overflowContainerWidth = overflowRef && overflowRef.current && overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
132
117
  var maxWidth = spaceAvailable - overflowContainerWidth;
133
118
  var childrenWidth = 0;
134
119
  var maxReached = false;
135
120
  return items.reduce(function (prev, cur) {
136
121
  if (!maxReached) {
137
- var itemWidth = map.get(cur.id) + itemOffset;
122
+ var itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
138
123
  var fits = itemWidth + childrenWidth < maxWidth;
139
124
  if (fits) {
140
125
  childrenWidth += itemWidth;
@@ -145,12 +130,13 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
145
130
  }
146
131
  return prev;
147
132
  }, []);
148
- }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible, containingElementRef, measurementOffset]);
149
- var getCustomComponent = function getCustomComponent(item) {
133
+ }, [containerWidth, containingElementRef, items, maxVisible, measurementOffset, multiline]);
134
+ var getCustomComponent = function getCustomComponent(item, tagComponent) {
150
135
  var className = item.className,
151
136
  id = item.id,
152
137
  other = _objectWithoutProperties(item, _excluded2);
153
- return /*#__PURE__*/React__default.createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
138
+ return /*#__PURE__*/createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
139
+ key: id,
154
140
  className: cx("".concat(blockClass, "__item"), className),
155
141
  ref: function ref(node) {
156
142
  return itemRefHandler(id, node);
@@ -164,9 +150,9 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
164
150
  visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
165
151
  }
166
152
  var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
167
- var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
168
- var tagType = _ref2.tagType,
169
- other = _objectWithoutProperties(_ref2, _excluded3);
153
+ var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref) {
154
+ var tagType = _ref.tagType,
155
+ other = _objectWithoutProperties(_ref, _excluded3);
170
156
  return _objectSpread2({
171
157
  type: tagType
172
158
  }, other);
@@ -174,10 +160,10 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
174
160
  setVisibleItems(visibleItemsArr);
175
161
  setOverflowItems(overflowItemsArr);
176
162
  onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
177
- }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
163
+ }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
178
164
  var handleTagOnClose = useCallback(function (onClose, index) {
179
165
  onClose === null || onClose === void 0 || onClose();
180
- if (index <= visibleItems.length - 1) {
166
+ if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
181
167
  setPopoverOpen(false);
182
168
  }
183
169
  }, [visibleItems]);
@@ -185,10 +171,10 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
185
171
  className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
186
172
  ref: containerRef,
187
173
  role: "main"
188
- }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
174
+ }, getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
189
175
  // Render custom components
190
176
  if (tagComponent) {
191
- return getCustomComponent(item);
177
+ return getCustomComponent(item, tagComponent);
192
178
  } else {
193
179
  var id = item.id,
194
180
  label = item.label,
@@ -215,7 +201,7 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
215
201
  }), /*#__PURE__*/React__default.createElement("span", {
216
202
  className: "".concat(blockClass, "__indicator"),
217
203
  ref: overflowRef
218
- }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
204
+ }, (overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
219
205
  allTagsModalSearchThreshold: allTagsModalSearchThreshold,
220
206
  className: overflowClassName,
221
207
  onShowAllClick: handleShowAllClick,
@@ -251,9 +237,9 @@ var tagTypes = Object.keys(TYPES);
251
237
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
252
238
  * @returns null if no problems
253
239
  */
254
- var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref3) {
255
- var items = _ref3.items;
256
- return items && items.length > allTagsModalSearchThreshold;
240
+ var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref2) {
241
+ var items = _ref2.items;
242
+ return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
257
243
  });
258
244
 
259
245
  // The types and DocGen commentary for the component props,
@@ -284,11 +270,6 @@ TagOverflow.propTypes = {
284
270
  * Provide an optional class to be applied to the containing node.
285
271
  */
286
272
  className: PropTypes.string,
287
- /**
288
- * Optional ref for custom resize container to measure available space
289
- * Default will measure the available space of the TagSet container itself.
290
- */
291
- containingElementRef: PropTypes.object,
292
273
  /**
293
274
  * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
294
275
  * **label**\* (required) to supply the content,
@@ -299,6 +280,7 @@ TagOverflow.propTypes = {
299
280
  * If you want to render a custom component, pass it as tagComponent prop and
300
281
  * then pass the props required for your custom component as the properties of item object
301
282
  */
283
+ //@ts-ignore
302
284
  items: PropTypes.arrayOf(PropTypes.shape({
303
285
  id: PropTypes.string.isRequired,
304
286
  label: PropTypes.string.isRequired,
@@ -342,6 +324,7 @@ TagOverflow.propTypes = {
342
324
  /** Component definition of the items to be rendered inside TagOverflow.
343
325
  * If this is not passed, items will be rendered as Tag component
344
326
  */
327
+ //@ts-ignore
345
328
  tagComponent: PropTypes.elementType
346
329
  };
347
330
 
package/es/components/TagOverflow/TagOverflowModal.js CHANGED
@@ -14,8 +14,7 @@ import { pkg } from '../../settings.js';
14
14
  import { prepareProps } from '../../global/js/utils/props-helper.js';
15
15
  import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
16
16
 
17
- var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
18
- _excluded2 = ["label", "id", "filter"];
17
+ var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
19
18
  var componentName = 'TagOverflowModal';
20
19
  var blockClass = "".concat(pkg.prefix, "--tag-overflow-modal");
21
20
 
@@ -77,13 +76,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
77
76
  }, getFilteredItems().map(function (_ref2) {
78
77
  var label = _ref2.label,
79
78
  id = _ref2.id,
80
- filter = _ref2.filter,
81
- other = _objectWithoutProperties(_ref2, _excluded2);
79
+ filter = _ref2.filter;
82
80
  var isFilterable = overflowType === 'tag' ? filter : false;
83
- return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
81
+ return /*#__PURE__*/React__default.createElement(Tag, {
84
82
  key: id,
85
83
  filter: isFilterable
86
- }), label);
84
+ }, label);
87
85
  })), /*#__PURE__*/React__default.createElement("div", {
88
86
  className: "".concat(blockClass, "__fade")
89
87
  })));
package/es/components/TagOverflow/TagOverflowPopover.d.ts CHANGED
@@ -1,2 +1,14 @@
1
- export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
1
  import React from 'react';
2
+ import { TagOverflowItem } from './TagOverflow';
3
+ export interface Props {
4
+ allTagsModalSearchThreshold?: number;
5
+ className?: string;
6
+ onShowAllClick: () => void;
7
+ overflowAlign?: string;
8
+ overflowTags: TagOverflowItem[];
9
+ overflowType?: string;
10
+ popoverOpen?: boolean;
11
+ setPopoverOpen?: (x: boolean) => void;
12
+ showAllTagsLabel?: string;
13
+ }
14
+ export declare const TagOverflowPopover: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
package/es/components/TagOverflow/TagOverflowPopover.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import React__default, { useRef } from 'react';
9
+ import React__default, { forwardRef, useRef } from 'react';
10
10
  import PropTypes from '../../node_modules/prop-types/index.js';
11
11
  import cx from 'classnames';
12
12
  import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
@@ -17,52 +17,48 @@ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "
17
17
  _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
18
18
  var componentName = 'TagOverflowPopover';
19
19
  var blockClass = "".concat(pkg.prefix, "--tag-overflow-popover");
20
-
21
- // Default values for props
22
- var defaults = {
23
- allTagsModalSearchThreshold: 10,
24
- overflowAlign: 'bottom'
25
- };
26
- var TagOverflowPopover = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
27
- var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
28
- allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
29
- className = _ref.className,
30
- onShowAllClick = _ref.onShowAllClick,
31
- _ref$overflowAlign = _ref.overflowAlign,
32
- overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
33
- overflowTags = _ref.overflowTags,
34
- overflowType = _ref.overflowType,
35
- showAllTagsLabel = _ref.showAllTagsLabel,
36
- popoverOpen = _ref.popoverOpen,
37
- setPopoverOpen = _ref.setPopoverOpen,
38
- rest = _objectWithoutProperties(_ref, _excluded);
39
- var localRef = useRef();
20
+ var TagOverflowPopover = /*#__PURE__*/forwardRef(function (props, ref) {
21
+ var _overflowTags$length;
22
+ var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
23
+ className = props.className,
24
+ onShowAllClick = props.onShowAllClick,
25
+ overflowAlign = props.overflowAlign,
26
+ overflowTags = props.overflowTags,
27
+ overflowType = props.overflowType,
28
+ showAllTagsLabel = props.showAllTagsLabel,
29
+ popoverOpen = props.popoverOpen,
30
+ setPopoverOpen = props.setPopoverOpen,
31
+ rest = _objectWithoutProperties(props, _excluded);
32
+ var localRef = useRef(null);
40
33
  var overflowTagContent = useRef(null);
41
34
  useClickOutside(ref || localRef, function () {
42
35
  if (popoverOpen) {
43
- setPopoverOpen(false);
36
+ setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
44
37
  }
45
38
  });
46
39
  var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
47
40
  evt.stopPropagation();
48
41
  evt.preventDefault();
49
- setPopoverOpen(false);
50
- onShowAllClick();
42
+ setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
43
+ onShowAllClick === null || onShowAllClick === void 0 || onShowAllClick();
51
44
  };
52
- var handleEscKeyPress = function handleEscKeyPress(event) {
53
- var key = event.key;
45
+ var handleEscKeyPress = function handleEscKeyPress(evt) {
46
+ var key = evt.key;
54
47
  if (key === 'Escape') {
55
- setPopoverOpen(false);
48
+ setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
56
49
  }
57
50
  };
58
51
  var getOverflowPopoverItems = function getOverflowPopoverItems() {
59
- return overflowTags.filter(function (_, index) {
60
- return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
52
+ var thresh = allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0;
53
+ return overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.filter(function (_, index) {
54
+ return (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) > thresh ? index < thresh : index <= thresh;
61
55
  });
62
56
  };
57
+ var visibleItems = getOverflowPopoverItems();
58
+ var hasItems = (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0;
63
59
  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
64
- "aria-hidden": overflowTags.length === 0,
65
- className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
60
+ "aria-hidden": (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0,
61
+ className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "--hidden"), (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0)),
66
62
  ref: ref || localRef
67
63
  }), /*#__PURE__*/React__default.createElement(Popover, {
68
64
  align: overflowAlign,
@@ -73,21 +69,21 @@ var TagOverflowPopover = /*#__PURE__*/React__default.forwardRef(function (_ref,
73
69
  open: popoverOpen
74
70
  }, /*#__PURE__*/React__default.createElement(Tag, {
75
71
  onClick: function onClick() {
76
- return setPopoverOpen(!popoverOpen);
72
+ return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
77
73
  },
78
74
  className: cx("".concat(blockClass, "__trigger"))
79
- }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
75
+ }, "+", overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
80
76
  ref: overflowTagContent,
81
77
  className: "".concat(blockClass, "__content")
82
78
  }, /*#__PURE__*/React__default.createElement("ul", {
83
79
  className: "".concat(blockClass, "__tag-list")
84
- }, getOverflowPopoverItems().map(function (_ref2) {
85
- var label = _ref2.label,
86
- id = _ref2.id,
87
- tagType = _ref2.tagType,
88
- filter = _ref2.filter,
89
- _onClose = _ref2.onClose,
90
- other = _objectWithoutProperties(_ref2, _excluded2);
80
+ }, hasItems && visibleItems.map(function (_ref) {
81
+ var label = _ref.label,
82
+ id = _ref.id,
83
+ tagType = _ref.tagType,
84
+ filter = _ref.filter,
85
+ _onClose = _ref.onClose,
86
+ other = _objectWithoutProperties(_ref, _excluded2);
91
87
  var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
92
88
  var isFilterable = overflowType === 'tag' ? filter : false;
93
89
  return /*#__PURE__*/React__default.createElement("li", {
@@ -100,7 +96,7 @@ var TagOverflowPopover = /*#__PURE__*/React__default.forwardRef(function (_ref,
100
96
  type: typeValue,
101
97
  filter: isFilterable
102
98
  }), label) : label);
103
- })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
99
+ })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React__default.createElement(Link, {
104
100
  className: "".concat(blockClass, "__show-all-tags-link"),
105
101
  href: "",
106
102
  onClick: handleShowAllTagsClick,
@@ -128,6 +124,7 @@ TagOverflowPopover.propTypes = {
128
124
  /**
129
125
  * tags shown in overflow
130
126
  */
127
+ //@ts-ignore
131
128
  overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
132
129
  /**
133
130
  * Type of rendering displayed inside of the tag overflow component
package/lib/components/TagOverflow/TagOverflow.d.ts CHANGED
@@ -1,10 +1,41 @@
1
1
  /**
2
- * TODO: A description of the component.
2
+ * Copyright IBM Corp. 2024, 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.
3
6
  */
4
- export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
7
+ import React, { RefObject, ReactNode } from 'react';
8
+ export interface TagOverflowItem {
9
+ className?: string;
10
+ filter?: string;
11
+ id: string;
12
+ label: string;
13
+ onClose: () => void;
14
+ tagType?: 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray' | 'high-contrast' | 'outline';
15
+ type?: string;
16
+ }
17
+ export interface Props {
18
+ align?: 'start' | 'center' | 'end';
19
+ allTagsModalSearchLabel?: string;
20
+ allTagsModalSearchPlaceholderText?: string;
21
+ allTagsModalTarget?: ReactNode;
22
+ allTagsModalTitle?: string;
23
+ className?: string;
24
+ containingElementRef?: RefObject<HTMLElement>;
25
+ items: TagOverflowItem[];
26
+ maxVisible?: number;
27
+ measurementOffset?: number;
28
+ multiline?: boolean;
29
+ overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
30
+ overflowClassName?: string;
31
+ overflowType?: 'default' | 'tag';
32
+ onOverflowTagChange?: (arr: TagOverflowItem[]) => void;
33
+ showAllTagsLabel?: string;
34
+ tagComponent?: string;
35
+ }
36
+ export declare let TagOverflow: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
5
37
  /**
6
38
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
7
39
  * @returns null if no problems
8
40
  */
9
- export const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
10
- import React from 'react';
41
+ export declare const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
package/lib/components/TagOverflow/TagOverflow.js CHANGED
@@ -27,52 +27,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
27
27
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
28
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
29
29
 
30
- var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
30
+ var _excluded = ["align", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
31
31
  _excluded2 = ["className", "id"],
32
32
  _excluded3 = ["tagType"],
33
33
  _excluded4 = ["id", "label", "tagType", "onClose"];
34
34
  var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
35
35
  var componentName = 'TagOverflow';
36
36
  var allTagsModalSearchThreshold = 10;
37
-
38
- // Default values for props
39
- var defaults = {
40
- items: [],
41
- align: 'start',
42
- measurementOffset: 0,
43
- overflowAlign: 'bottom',
44
- overflowType: 'default',
45
- onOverflowTagChange: function onOverflowTagChange() {}
46
- };
47
-
48
- /**
49
- * TODO: A description of the component.
50
- */
51
- exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
52
- var _ref$items = _ref.items,
53
- items = _ref$items === void 0 ? defaults.items : _ref$items,
54
- tagComponent = _ref.tagComponent,
55
- _ref$align = _ref.align,
56
- align = _ref$align === void 0 ? defaults.align : _ref$align,
57
- showAllTagsLabel = _ref.showAllTagsLabel,
58
- allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
59
- allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
60
- allTagsModalTarget = _ref.allTagsModalTarget,
61
- allTagsModalTitle = _ref.allTagsModalTitle,
62
- className = _ref.className,
63
- containingElementRef = _ref.containingElementRef,
64
- _ref$measurementOffse = _ref.measurementOffset,
65
- measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
66
- maxVisible = _ref.maxVisible,
67
- multiline = _ref.multiline,
68
- _ref$overflowAlign = _ref.overflowAlign,
69
- overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
70
- overflowClassName = _ref.overflowClassName,
71
- _ref$overflowType = _ref.overflowType,
72
- overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
73
- _ref$onOverflowTagCha = _ref.onOverflowTagChange,
74
- onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
75
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
37
+ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
38
+ var _props$align = props.align,
39
+ align = _props$align === void 0 ? 'start' : _props$align,
40
+ allTagsModalSearchLabel = props.allTagsModalSearchLabel,
41
+ allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
42
+ allTagsModalTarget = props.allTagsModalTarget,
43
+ allTagsModalTitle = props.allTagsModalTitle,
44
+ className = props.className,
45
+ containingElementRef = props.containingElementRef,
46
+ items = props.items,
47
+ maxVisible = props.maxVisible,
48
+ _props$measurementOff = props.measurementOffset,
49
+ measurementOffset = _props$measurementOff === void 0 ? 0 : _props$measurementOff,
50
+ multiline = props.multiline,
51
+ _props$overflowAlign = props.overflowAlign,
52
+ overflowAlign = _props$overflowAlign === void 0 ? 'bottom' : _props$overflowAlign,
53
+ overflowClassName = props.overflowClassName,
54
+ _props$overflowType = props.overflowType,
55
+ overflowType = _props$overflowType === void 0 ? 'default' : _props$overflowType,
56
+ onOverflowTagChange = props.onOverflowTagChange,
57
+ showAllTagsLabel = props.showAllTagsLabel,
58
+ tagComponent = props.tagComponent,
59
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
76
60
  var localContainerRef = React.useRef(null);
77
61
  var containerRef = ref || localContainerRef;
78
62
  var itemRefs = React.useRef(null);
@@ -109,7 +93,9 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
109
93
  setShowAllModalOpen(false);
110
94
  };
111
95
  var handleResize = function handleResize() {
112
- setContainerWidth(resizeElm.current.offsetWidth);
96
+ if (typeof resizeElm !== 'function' && resizeElm.current) {
97
+ setContainerWidth(resizeElm.current.offsetWidth);
98
+ }
113
99
  };
114
100
  useResizeObserver.useResizeObserver(resizeElm, handleResize);
115
101
  var getMap = function getMap() {
@@ -125,7 +111,6 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
125
111
  }
126
112
  };
127
113
  var getVisibleItems = React.useCallback(function () {
128
- var _overflowRef$current;
129
114
  if (!itemRefs.current) {
130
115
  return items;
131
116
  }
@@ -137,13 +122,13 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
137
122
  var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
138
123
  var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
139
124
  var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
140
- var overflowContainerWidth = ((_overflowRef$current = overflowRef.current) === null || _overflowRef$current === void 0 ? void 0 : _overflowRef$current.offsetWidth) > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
125
+ var overflowContainerWidth = overflowRef && overflowRef.current && overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
141
126
  var maxWidth = spaceAvailable - overflowContainerWidth;
142
127
  var childrenWidth = 0;
143
128
  var maxReached = false;
144
129
  return items.reduce(function (prev, cur) {
145
130
  if (!maxReached) {
146
- var itemWidth = map.get(cur.id) + itemOffset;
131
+ var itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
147
132
  var fits = itemWidth + childrenWidth < maxWidth;
148
133
  if (fits) {
149
134
  childrenWidth += itemWidth;
@@ -154,12 +139,13 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
154
139
  }
155
140
  return prev;
156
141
  }, []);
157
- }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible, containingElementRef, measurementOffset]);
158
- var getCustomComponent = function getCustomComponent(item) {
142
+ }, [containerWidth, containingElementRef, items, maxVisible, measurementOffset, multiline]);
143
+ var getCustomComponent = function getCustomComponent(item, tagComponent) {
159
144
  var className = item.className,
160
145
  id = item.id,
161
146
  other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded2);
162
- return /*#__PURE__*/React__default["default"].createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
147
+ return /*#__PURE__*/React.createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
148
+ key: id,
163
149
  className: cx__default["default"]("".concat(blockClass, "__item"), className),
164
150
  ref: function ref(node) {
165
151
  return itemRefHandler(id, node);
@@ -173,9 +159,9 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
173
159
  visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
174
160
  }
175
161
  var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
176
- var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
177
- var tagType = _ref2.tagType,
178
- other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded3);
162
+ var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref) {
163
+ var tagType = _ref.tagType,
164
+ other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded3);
179
165
  return _rollupPluginBabelHelpers.objectSpread2({
180
166
  type: tagType
181
167
  }, other);
@@ -183,10 +169,10 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
183
169
  setVisibleItems(visibleItemsArr);
184
170
  setOverflowItems(overflowItemsArr);
185
171
  onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
186
- }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
172
+ }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
187
173
  var handleTagOnClose = React.useCallback(function (onClose, index) {
188
174
  onClose === null || onClose === void 0 || onClose();
189
- if (index <= visibleItems.length - 1) {
175
+ if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
190
176
  setPopoverOpen(false);
191
177
  }
192
178
  }, [visibleItems]);
@@ -194,10 +180,10 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
194
180
  className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
195
181
  ref: containerRef,
196
182
  role: "main"
197
- }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
183
+ }, devtools.getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
198
184
  // Render custom components
199
185
  if (tagComponent) {
200
- return getCustomComponent(item);
186
+ return getCustomComponent(item, tagComponent);
201
187
  } else {
202
188
  var id = item.id,
203
189
  label = item.label,
@@ -224,7 +210,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
224
210
  }), /*#__PURE__*/React__default["default"].createElement("span", {
225
211
  className: "".concat(blockClass, "__indicator"),
226
212
  ref: overflowRef
227
- }, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagOverflowPopover.TagOverflowPopover, {
213
+ }, (overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) > 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagOverflowPopover.TagOverflowPopover, {
228
214
  allTagsModalSearchThreshold: allTagsModalSearchThreshold,
229
215
  className: overflowClassName,
230
216
  onShowAllClick: handleShowAllClick,
@@ -260,9 +246,9 @@ var tagTypes = Object.keys(constants.TYPES);
260
246
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
261
247
  * @returns null if no problems
262
248
  */
263
- var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref3) {
264
- var items = _ref3.items;
265
- return items && items.length > allTagsModalSearchThreshold;
249
+ var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref2) {
250
+ var items = _ref2.items;
251
+ return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
266
252
  });
267
253
 
268
254
  // The types and DocGen commentary for the component props,
@@ -293,11 +279,6 @@ exports.TagOverflow.propTypes = {
293
279
  * Provide an optional class to be applied to the containing node.
294
280
  */
295
281
  className: index["default"].string,
296
- /**
297
- * Optional ref for custom resize container to measure available space
298
- * Default will measure the available space of the TagSet container itself.
299
- */
300
- containingElementRef: index["default"].object,
301
282
  /**
302
283
  * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
303
284
  * **label**\* (required) to supply the content,
@@ -308,6 +289,7 @@ exports.TagOverflow.propTypes = {
308
289
  * If you want to render a custom component, pass it as tagComponent prop and
309
290
  * then pass the props required for your custom component as the properties of item object
310
291
  */
292
+ //@ts-ignore
311
293
  items: index["default"].arrayOf(index["default"].shape({
312
294
  id: index["default"].string.isRequired,
313
295
  label: index["default"].string.isRequired,
@@ -351,6 +333,7 @@ exports.TagOverflow.propTypes = {
351
333
  /** Component definition of the items to be rendered inside TagOverflow.
352
334
  * If this is not passed, items will be rendered as Tag component
353
335
  */
336
+ //@ts-ignore
354
337
  tagComponent: index["default"].elementType
355
338
  };
356
339
 
package/lib/components/TagOverflow/TagOverflowModal.js CHANGED
@@ -23,8 +23,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
23
23
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
25
 
26
- var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
27
- _excluded2 = ["label", "id", "filter"];
26
+ var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
28
27
  var componentName = 'TagOverflowModal';
29
28
  var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
30
29
 
@@ -86,13 +85,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
86
85
  }, getFilteredItems().map(function (_ref2) {
87
86
  var label = _ref2.label,
88
87
  id = _ref2.id,
89
- filter = _ref2.filter,
90
- other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
88
+ filter = _ref2.filter;
91
89
  var isFilterable = overflowType === 'tag' ? filter : false;
92
- return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
90
+ return /*#__PURE__*/React__default["default"].createElement(react.Tag, {
93
91
  key: id,
94
92
  filter: isFilterable
95
- }), label);
93
+ }, label);
96
94
  })), /*#__PURE__*/React__default["default"].createElement("div", {
97
95
  className: "".concat(blockClass, "__fade")
98
96
  })));
package/lib/components/TagOverflow/TagOverflowPopover.d.ts CHANGED
@@ -1,2 +1,14 @@
1
- export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
2
1
  import React from 'react';
2
+ import { TagOverflowItem } from './TagOverflow';
3
+ export interface Props {
4
+ allTagsModalSearchThreshold?: number;
5
+ className?: string;
6
+ onShowAllClick: () => void;
7
+ overflowAlign?: string;
8
+ overflowTags: TagOverflowItem[];
9
+ overflowType?: string;
10
+ popoverOpen?: boolean;
11
+ setPopoverOpen?: (x: boolean) => void;
12
+ showAllTagsLabel?: string;
13
+ }
14
+ export declare const TagOverflowPopover: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
package/lib/components/TagOverflow/TagOverflowPopover.js CHANGED
@@ -26,52 +26,48 @@ var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "
26
26
  _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
27
27
  var componentName = 'TagOverflowPopover';
28
28
  var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
29
-
30
- // Default values for props
31
- var defaults = {
32
- allTagsModalSearchThreshold: 10,
33
- overflowAlign: 'bottom'
34
- };
35
- var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
36
- var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
37
- allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
38
- className = _ref.className,
39
- onShowAllClick = _ref.onShowAllClick,
40
- _ref$overflowAlign = _ref.overflowAlign,
41
- overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
42
- overflowTags = _ref.overflowTags,
43
- overflowType = _ref.overflowType,
44
- showAllTagsLabel = _ref.showAllTagsLabel,
45
- popoverOpen = _ref.popoverOpen,
46
- setPopoverOpen = _ref.setPopoverOpen,
47
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
48
- var localRef = React.useRef();
29
+ var TagOverflowPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
30
+ var _overflowTags$length;
31
+ var allTagsModalSearchThreshold = props.allTagsModalSearchThreshold,
32
+ className = props.className,
33
+ onShowAllClick = props.onShowAllClick,
34
+ overflowAlign = props.overflowAlign,
35
+ overflowTags = props.overflowTags,
36
+ overflowType = props.overflowType,
37
+ showAllTagsLabel = props.showAllTagsLabel,
38
+ popoverOpen = props.popoverOpen,
39
+ setPopoverOpen = props.setPopoverOpen,
40
+ rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
41
+ var localRef = React.useRef(null);
49
42
  var overflowTagContent = React.useRef(null);
50
43
  useClickOutside.useClickOutside(ref || localRef, function () {
51
44
  if (popoverOpen) {
52
- setPopoverOpen(false);
45
+ setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
53
46
  }
54
47
  });
55
48
  var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
56
49
  evt.stopPropagation();
57
50
  evt.preventDefault();
58
- setPopoverOpen(false);
59
- onShowAllClick();
51
+ setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
52
+ onShowAllClick === null || onShowAllClick === void 0 || onShowAllClick();
60
53
  };
61
- var handleEscKeyPress = function handleEscKeyPress(event) {
62
- var key = event.key;
54
+ var handleEscKeyPress = function handleEscKeyPress(evt) {
55
+ var key = evt.key;
63
56
  if (key === 'Escape') {
64
- setPopoverOpen(false);
57
+ setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
65
58
  }
66
59
  };
67
60
  var getOverflowPopoverItems = function getOverflowPopoverItems() {
68
- return overflowTags.filter(function (_, index) {
69
- return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
61
+ var thresh = allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0;
62
+ return overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.filter(function (_, index) {
63
+ return (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) > thresh ? index < thresh : index <= thresh;
70
64
  });
71
65
  };
66
+ var visibleItems = getOverflowPopoverItems();
67
+ var hasItems = (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0;
72
68
  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
73
- "aria-hidden": overflowTags.length === 0,
74
- className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
69
+ "aria-hidden": (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0,
70
+ className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hidden"), (overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) === 0)),
75
71
  ref: ref || localRef
76
72
  }), /*#__PURE__*/React__default["default"].createElement(react.Popover, {
77
73
  align: overflowAlign,
@@ -82,21 +78,21 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
82
78
  open: popoverOpen
83
79
  }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
84
80
  onClick: function onClick() {
85
- return setPopoverOpen(!popoverOpen);
81
+ return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
86
82
  },
87
83
  className: cx__default["default"]("".concat(blockClass, "__trigger"))
88
- }, "+", overflowTags.length), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
84
+ }, "+", overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, null, /*#__PURE__*/React__default["default"].createElement("div", {
89
85
  ref: overflowTagContent,
90
86
  className: "".concat(blockClass, "__content")
91
87
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
92
88
  className: "".concat(blockClass, "__tag-list")
93
- }, getOverflowPopoverItems().map(function (_ref2) {
94
- var label = _ref2.label,
95
- id = _ref2.id,
96
- tagType = _ref2.tagType,
97
- filter = _ref2.filter,
98
- _onClose = _ref2.onClose,
99
- other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
89
+ }, hasItems && visibleItems.map(function (_ref) {
90
+ var label = _ref.label,
91
+ id = _ref.id,
92
+ tagType = _ref.tagType,
93
+ filter = _ref.filter,
94
+ _onClose = _ref.onClose,
95
+ other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
100
96
  var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
101
97
  var isFilterable = overflowType === 'tag' ? filter : false;
102
98
  return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -109,7 +105,7 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
109
105
  type: typeValue,
110
106
  filter: isFilterable
111
107
  }), label) : label);
112
- })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
108
+ })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React__default["default"].createElement(react.Link, {
113
109
  className: "".concat(blockClass, "__show-all-tags-link"),
114
110
  href: "",
115
111
  onClick: handleShowAllTagsClick,
@@ -137,6 +133,7 @@ TagOverflowPopover.propTypes = {
137
133
  /**
138
134
  * tags shown in overflow
139
135
  */
136
+ //@ts-ignore
140
137
  overflowTags: index["default"].arrayOf(index["default"].object).isRequired,
141
138
  /**
142
139
  * Type of rendering displayed inside of the tag overflow component
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.43.2-canary.97+fcf7b57ef",
4
+ "version": "2.43.2-canary.99+f4e571cb9",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -96,7 +96,7 @@
96
96
  "dependencies": {
97
97
  "@babel/runtime": "^7.23.9",
98
98
  "@carbon/feature-flags": "^0.20.0",
99
- "@carbon/ibm-products-styles": "^2.39.1-canary.107+fcf7b57ef",
99
+ "@carbon/ibm-products-styles": "^2.42.0-rc.0",
100
100
  "@carbon/telemetry": "^0.1.0",
101
101
  "@dnd-kit/core": "^6.0.8",
102
102
  "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "fcf7b57ef754ebbdb66eb8493d6fde6ab3099e9c"
123
+ "gitHead": "f4e571cb99fe311fc2cc5bc13f72c0de33a73c7d"
124
124
  }