@carbon/ibm-products 2.22.0 → 2.23.0

package/es/components/FilterSummary/FilterSummary.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
@@ -6,22 +7,28 @@ var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "re
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Button } from '@carbon/react';
-import React, { useRef } from 'react';
+
+import React, { useRef, useState } from 'react';
+import { Button, IconButton } from '@carbon/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronDown } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { TagSet } from '../TagSet';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
+import { DURATIONS, EASINGS } from '../../global/js/utils/motionConstants';
+import { useWindowResize, usePreviousValue } from '../../global/js/hooks';
+import debounce from 'lodash/debounce';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var blockClass = "".concat(pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _filterSummaryClearBu;
+  var _viewAllButtonRef$cur, _filterSummaryClearBu;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
@@ -47,29 +54,103 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   });
   var filterSummaryClearButton = useRef();
+  var viewAllButtonRef = useRef();
   var filterSummaryRef = useRef();
-  var localRef = ref || filterSummaryRef;
+  var localRef = filterSummaryRef || ref;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    overflowCount = _useState2[0],
+    setOverflowCount = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multiline = _useState4[0],
+    setMultiline = _useState4[1];
+  var previousState = usePreviousValue({
+    multiline: multiline
+  });
+  var handleViewAll = function handleViewAll() {
+    if (overflowCount === 0) {
+      setMultiline(false);
+      return;
+    }
+    setMultiline(function (prev) {
+      return !prev;
+    });
+  };
+  var viewAllWidth = typeof (viewAllButtonRef === null || viewAllButtonRef === void 0 || (_viewAllButtonRef$cur = viewAllButtonRef.current) === null || _viewAllButtonRef$cur === void 0 ? void 0 : _viewAllButtonRef$cur.offsetWidth) === 'undefined' ? 0 : overflowCount > 0 ? 48 : 0;
+  var measurementOffset = (filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth) + viewAllWidth;
+  var renderTagSet = function renderTagSet(type) {
+    return /*#__PURE__*/React.createElement(motion.div, {
+      key: type,
+      initial: {
+        opacity: 0,
+        y: -16
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      exit: {
+        opacity: 0,
+        y: -16
+      },
+      transition: {
+        duration: DURATIONS.moderate01,
+        ease: EASINGS.productive.entrance
+      }
+    }, /*#__PURE__*/React.createElement(TagSet, {
+      allTagsModalSearchLabel: "Search all tags",
+      allTagsModalSearchPlaceholderText: "Search all tags",
+      allTagsModalTitle: "All tags",
+      showAllTagsLabel: "View all tags",
+      tags: tagFilters,
+      overflowType: overflowType,
+      className: cx(_defineProperty({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
+      containingElementRef: localRef,
+      measurementOffset: measurementOffset,
+      onOverflowTagChange: function onOverflowTagChange(overflowTags) {
+        return setOverflowCount(overflowTags.length);
+      },
+      multiline: multiline
+    }));
+  };
+  useWindowResize(function () {
+    var handleFilterSummaryResize = function handleFilterSummaryResize() {
+      var _localRef$current;
+      if (multiline && (localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.offsetHeight) <= 50) {
+        setMultiline(false);
+      }
+    };
+    var filterResize = debounce(handleFilterSummaryResize, 500);
+    filterResize();
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.multiline, multiline]);
   return /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), {
     id: filterSummaryId
   }, rest, {
     ref: localRef,
-    className: cx([blockClass, className])
-  }), /*#__PURE__*/React.createElement(TagSet, {
-    allTagsModalSearchLabel: "Search all tags",
-    allTagsModalSearchPlaceholderText: "Search all tags",
-    allTagsModalTitle: "All tags",
-    showAllTagsLabel: "View all tags",
-    tags: tagFilters,
-    overflowType: overflowType,
-    className: cx(_defineProperty({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
-    containingElementRef: localRef,
-    measurementOffset: filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth
-  }), /*#__PURE__*/React.createElement(Button, {
+    className: cx([blockClass, className], _defineProperty({}, "".concat(blockClass, "__expanded"), multiline))
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
+    mode: "wait",
+    exitBeforeEnter: true
+  }, !multiline && renderTagSet('single'), multiline && renderTagSet('multiline')), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
     onClick: clearFilters,
-    ref: filterSummaryClearButton
-  }, clearFiltersText));
+    ref: filterSummaryClearButton,
+    className: "".concat(blockClass, "__clear-all-button")
+  }, clearFiltersText), (overflowCount > 0 || multiline) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__view-all--wrapper")
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    ref: viewAllButtonRef,
+    kind: "ghost",
+    label: 'View all',
+    className: "".concat(blockClass, "__view-all--trigger"),
+    align: "left",
+    onClick: handleViewAll,
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    className: cx("".concat(blockClass, "__view-all--chevron"), _defineProperty({}, "".concat(blockClass, "__view-all--chevron-multiline"), multiline))
+  }))));
 });
 var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;

package/es/components/TagSet/TagSet.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -33,7 +33,8 @@ var defaults = {
   align: 'start',
   measurementOffset: 0,
   overflowAlign: 'bottom',
-  overflowType: 'default'
+  overflowType: 'default',
+  onOverflowTagChange: function onOverflowTagChange() {}
 };
 export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -55,6 +56,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
     measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
+    _ref$onOverflowTagCha = _ref.onOverflowTagChange,
+    onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(3),
     _useState2 = _slicedToArray(_useState, 2),
@@ -151,8 +154,9 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       popoverOpen: popoverOpen,
       setPopoverOpen: setPopoverOpen
     }));
+    onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, popoverOpen, handleTagOnClose]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -306,6 +310,10 @@ TagSet.propTypes = {
    * display tags in multiple lines
    */
   multiline: PropTypes.bool,
+  /**
+   * Handler to get overflow tags
+   */
+  onOverflowTagChange: PropTypes.func,
   /**
    * overflowAlign from the standard tooltip. Default center.
    */

package/es/global/js/hooks/useResizeObserver.js

@@ -41,7 +41,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
     }
     getInitialSize();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, height, ref].concat(_toConsumableArray(deps)));
+  }, [width, height, ref.current].concat(_toConsumableArray(deps)));
   useLayoutEffect(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -71,7 +71,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref].concat(_toConsumableArray(deps)));
+  }, [ref.current].concat(_toConsumableArray(deps)));
   return {
     width: width,
     height: height

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -18,12 +18,13 @@ var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
 var _stateReducer = require("./addons/stateReducer");
 var _getNodeTextContent = require("../../../global/js/utils/getNodeTextContent");
+var _ColumnHeaderSlug = require("./addons/Slug/ColumnHeaderSlug");
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
   _excluded3 = ["role", "className"];
 /* eslint-disable react/prop-types */
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -94,7 +95,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
   }));
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  var resizerAriaLabel = datagridState.resizerAriaLabel;
+  var resizerAriaLabel = datagridState.resizerAriaLabel,
+    isTableSortable = datagridState.isTableSortable;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   (0, _react.useEffect)(function () {
@@ -136,6 +138,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     headerGroupClassName = _headerGroup$getHeade.className,
     role = _headerGroup$getHeade.role,
     headerGroupProps = (0, _objectWithoutProperties2.default)(_headerGroup$getHeade, _excluded2);
+  var renderSlug = function renderSlug(slug) {
+    if (isTableSortable) {
+      return;
+    }
+    return /*#__PURE__*/_react.default.createElement(_ColumnHeaderSlug.ColumnHeaderSlug, {
+      slug: slug
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroupProps, {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
@@ -166,10 +176,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       headerProps = (0, _objectWithoutProperties2.default)(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, headerProps, {
-      className: (0, _classnames.default)(headerClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction)),
+      className: (0, _classnames.default)(headerClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/_react.default.isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header)), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,

package/lib/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnHeaderSlug = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ColumnHeaderSlug = exports.ColumnHeaderSlug = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var slug = _ref.slug;
+  if (slug && /*#__PURE__*/(0, _react.isValidElement)(slug)) {
+    var normalizedSlug = /*#__PURE__*/_react.default.cloneElement(slug, {
+      size: 'mini',
+      ref: ref
+    });
+    return normalizedSlug;
+  }
+  return;
+});
+ColumnHeaderSlug.propTypes = {
+  /**
+   * Specify the AI slug to be displayed
+   */
+  slug: _propTypes.default.node
+};

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -26,9 +26,9 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
     }, tableProps.value);
   };
-  var HeaderRenderer = function HeaderRenderer(header) {
+  var HeaderRenderer = function HeaderRenderer(header, slug) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "__defaultStringRenderer"),
+      className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/_react.default.isValidElement(slug))),
       title: typeof header === 'string' ? header : '',
       key: typeof header === 'string' ? header : ''
     }, header);
@@ -38,7 +38,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       return _objectSpread(_objectSpread({
         Cell: StringRenderer
       }, column), {}, {
-        Header: column.HeaderRenderer || HeaderRenderer(column.Header)
+        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug)
       });
     });
     return (0, _toConsumableArray2.default)(columnsWithDefaultCells);

package/lib/components/Datagrid/useSortableColumns.js

@@ -13,9 +13,10 @@ var _settings = require("../../settings");
 var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
+var _ColumnHeaderSlug = require("./Datagrid/addons/Slug/ColumnHeaderSlug");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2020, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2020, 2024
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * This source code is licensed under the Apache-2.0 license found in the
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * LICENSE file in the root directory of this source tree.
@@ -63,7 +64,13 @@ var useSortableColumns = function useSortableColumns(hooks) {
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,
       defaultSortableLabelText = instance.defaultSortableLabelText;
-    var onSortClick = function onSortClick(column) {
+    var onSortClick = function onSortClick(event, column) {
+      var slug = event.target.classList.contains("".concat(_settings.carbon.prefix, "--slug")) || event.target.closest(".".concat(_settings.carbon.prefix, "--slug"));
+      // Do not continue with sorting if we find a slug
+      if (slug) {
+        event.stopPropagation();
+        return;
+      }
       var key = column.id;
       var sortDesc = column.isSortedDesc;
       var _getNewSortOrder = getNewSortOrder(sortDesc),
@@ -101,12 +108,15 @@ var useSortableColumns = function useSortableColumns(hooks) {
             defaultSortableLabelText: defaultSortableLabelText
           }),
           "aria-pressed": getAriaPressedValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column),
-          onClick: function onClick() {
-            return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
+          onClick: function onClick(event) {
+            return onSortClick(event, headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },
           kind: "ghost",
           renderIcon: function renderIcon(props) {
-            return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
+            var _headerProp$column;
+            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ColumnHeaderSlug.ColumnHeaderSlug, {
+              slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
+            }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
           },
           className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
         }, column.Header);

package/lib/components/FilterSummary/FilterSummary.js

@@ -7,20 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@carbon/react");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@carbon/react");
+var _framerMotion = require("framer-motion");
+var _icons = require("@carbon/react/icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+var _motionConstants = require("../../global/js/utils/motionConstants");
+var _hooks = require("../../global/js/hooks");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _devtools = require("../../global/js/utils/devtools");
 var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
   _excluded2 = ["key", "value"];
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -30,8 +36,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
-var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
-  var _filterSummaryClearBu;
+var FilterSummary = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _viewAllButtonRef$cur, _filterSummaryClearBu;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
@@ -56,30 +62,104 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
     });
   });
-  var filterSummaryClearButton = (0, _react2.useRef)();
-  var filterSummaryRef = (0, _react2.useRef)();
-  var localRef = ref || filterSummaryRef;
-  return /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
+  var filterSummaryClearButton = (0, _react.useRef)();
+  var viewAllButtonRef = (0, _react.useRef)();
+  var filterSummaryRef = (0, _react.useRef)();
+  var localRef = filterSummaryRef || ref;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    overflowCount = _useState2[0],
+    setOverflowCount = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    multiline = _useState4[0],
+    setMultiline = _useState4[1];
+  var previousState = (0, _hooks.usePreviousValue)({
+    multiline: multiline
+  });
+  var handleViewAll = function handleViewAll() {
+    if (overflowCount === 0) {
+      setMultiline(false);
+      return;
+    }
+    setMultiline(function (prev) {
+      return !prev;
+    });
+  };
+  var viewAllWidth = typeof (viewAllButtonRef === null || viewAllButtonRef === void 0 || (_viewAllButtonRef$cur = viewAllButtonRef.current) === null || _viewAllButtonRef$cur === void 0 ? void 0 : _viewAllButtonRef$cur.offsetWidth) === 'undefined' ? 0 : overflowCount > 0 ? 48 : 0;
+  var measurementOffset = (filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth) + viewAllWidth;
+  var renderTagSet = function renderTagSet(type) {
+    return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+      key: type,
+      initial: {
+        opacity: 0,
+        y: -16
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      exit: {
+        opacity: 0,
+        y: -16
+      },
+      transition: {
+        duration: _motionConstants.DURATIONS.moderate01,
+        ease: _motionConstants.EASINGS.productive.entrance
+      }
+    }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
+      allTagsModalSearchLabel: "Search all tags",
+      allTagsModalSearchPlaceholderText: "Search all tags",
+      allTagsModalTitle: "All tags",
+      showAllTagsLabel: "View all tags",
+      tags: tagFilters,
+      overflowType: overflowType,
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
+      containingElementRef: localRef,
+      measurementOffset: measurementOffset,
+      onOverflowTagChange: function onOverflowTagChange(overflowTags) {
+        return setOverflowCount(overflowTags.length);
+      },
+      multiline: multiline
+    }));
+  };
+  (0, _hooks.useWindowResize)(function () {
+    var handleFilterSummaryResize = function handleFilterSummaryResize() {
+      var _localRef$current;
+      if (multiline && (localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.offsetHeight) <= 50) {
+        setMultiline(false);
+      }
+    };
+    var filterResize = (0, _debounce.default)(handleFilterSummaryResize, 500);
+    filterResize();
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.multiline, multiline]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
     id: filterSummaryId
   }, rest, {
     ref: localRef,
-    className: (0, _classnames.default)([blockClass, className])
-  }), /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
-    allTagsModalSearchLabel: "Search all tags",
-    allTagsModalSearchPlaceholderText: "Search all tags",
-    allTagsModalTitle: "All tags",
-    showAllTagsLabel: "View all tags",
-    tags: tagFilters,
-    overflowType: overflowType,
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
-    containingElementRef: localRef,
-    measurementOffset: filterSummaryClearButton === null || filterSummaryClearButton === void 0 || (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth
-  }), /*#__PURE__*/_react2.default.createElement(_react.Button, {
+    className: (0, _classnames.default)([blockClass, className], (0, _defineProperty2.default)({}, "".concat(blockClass, "__expanded"), multiline))
+  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    mode: "wait",
+    exitBeforeEnter: true
+  }, !multiline && renderTagSet('single'), multiline && renderTagSet('multiline')), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     size: "sm",
     onClick: clearFilters,
-    ref: filterSummaryClearButton
-  }, clearFiltersText));
+    ref: filterSummaryClearButton,
+    className: "".concat(blockClass, "__clear-all-button")
+  }, clearFiltersText), (overflowCount > 0 || multiline) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__view-all--wrapper")
+  }, /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    ref: viewAllButtonRef,
+    kind: "ghost",
+    label: 'View all',
+    className: "".concat(blockClass, "__view-all--trigger"),
+    align: "left",
+    onClick: handleViewAll,
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
+    className: (0, _classnames.default)("".concat(blockClass, "__view-all--chevron"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__view-all--chevron-multiline"), multiline))
+  }))));
 });
 var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;

package/lib/components/TagSet/TagSet.js

@@ -20,7 +20,7 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label", "onClose"]; //
 // Copyright IBM Corp. 2020, 2024
@@ -41,7 +41,8 @@ var defaults = {
   align: 'start',
   measurementOffset: 0,
   overflowAlign: 'bottom',
-  overflowType: 'default'
+  overflowType: 'default',
+  onOverflowTagChange: function onOverflowTagChange() {}
 };
 var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -63,6 +64,8 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     containingElementRef = _ref.containingElementRef,
     _ref$measurementOffse = _ref.measurementOffset,
     measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
+    _ref$onOverflowTagCha = _ref.onOverflowTagChange,
+    onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(3),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -159,8 +162,9 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
       popoverOpen: popoverOpen,
       setPopoverOpen: setPopoverOpen
     }));
+    onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, popoverOpen, handleTagOnClose]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
   var checkFullyVisibleTags = (0, _react.useCallback)(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -314,6 +318,10 @@ TagSet.propTypes = {
    * display tags in multiple lines
    */
   multiline: _propTypes.default.bool,
+  /**
+   * Handler to get overflow tags
+   */
+  onOverflowTagChange: _propTypes.default.func,
   /**
    * overflowAlign from the standard tooltip. Default center.
    */

package/lib/global/js/hooks/useResizeObserver.js

@@ -49,7 +49,7 @@ var useResizeObserver = exports.useResizeObserver = function useResizeObserver(r
     }
     getInitialSize();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, height, ref].concat((0, _toConsumableArray2.default)(deps)));
+  }, [width, height, ref.current].concat((0, _toConsumableArray2.default)(deps)));
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -79,7 +79,7 @@ var useResizeObserver = exports.useResizeObserver = function useResizeObserver(r
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref].concat((0, _toConsumableArray2.default)(deps)));
+  }, [ref.current].concat((0, _toConsumableArray2.default)(deps)));
   return {
     width: width,
     height: height