@carbon/ibm-products 2.21.0 → 2.23.0

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -119,9 +119,9 @@ var useFilters = function useFilters(_ref2) {
     if (type === DATE && value.length > 0 && !value[1]) {
       return;
     }
-    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
+    var filterCopy = _toConsumableArray(filtersObjectArray);
     // // check if the filter already exists in the array
-    var filter = filtersObjectArrayCopy.find(function (item) {
+    var filter = filterCopy.find(function (item) {
       return item.id === column;
     });
 
@@ -129,81 +129,39 @@ var useFilters = function useFilters(_ref2) {
     if (filter) {
       filter.value = value;
     } else {
-      filtersObjectArrayCopy.push({
+      filterCopy.push({
         id: column,
         value: value,
         type: type
       });
     }
-
-    // ATTENTION: this is where you would reset or remove individual filters from the filters array
-    if (type === CHECKBOX) {
-      /**
-      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
-      This checks if all the checkboxes are selected = false and removes it from the array
-      */
-      var index = filtersObjectArrayCopy.findIndex(function (filter) {
-        return filter.id === column;
-      });
-
-      // If all the selected state is false remove from array
-      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
-        return val.selected === false;
-      });
-      if (shouldRemoveFromArray) {
-        filtersObjectArrayCopy.splice(index, 1);
-      }
-    } else if (type === DATE) {
-      if (value.length === 0) {
-        /**
-        Checks to see if the date value is an empty array, if it is that means the user wants
-        to reset the date filter
-        */
-        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array since there is nothing to filter
-        filtersObjectArrayCopy.splice(_index, 1);
-      }
-    } else if (type === DROPDOWN || type === RADIO) {
-      if (value === 'Any') {
-        /**
-        Checks to see if the selected value is 'Any', that means the user wants
-        to reset specific filter
-        */
-        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array
-        filtersObjectArrayCopy.splice(_index2, 1);
-      }
-    } else if (type === NUMBER) {
-      // If the value is empty remove it from the filtersObjectArray
-      if (value === '') {
-        // Find the column that uses number and displays an empty string
-        var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array
-        filtersObjectArrayCopy.splice(_index3, 1);
-      }
+    var index = filterCopy.findIndex(function (_ref4) {
+      var id = _ref4.id;
+      return id === column;
+    });
+    var clearCheckbox = type === CHECKBOX && filterCopy[index].value.every(function (_ref5) {
+      var selected = _ref5.selected;
+      return selected === false;
+    });
+    var clearDate = type === DATE && value.length === 0;
+    var clearAny = (type === DROPDOWN || type === RADIO) && value === 'Any';
+    var clearNum = type === NUMBER && value === '';
+    var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
+    if (shouldClear) {
+      filterCopy.splice(index, 1);
     }
-    setFiltersObjectArray(filtersObjectArrayCopy);
-
-    // // Automatically apply the filters if the updateMethod is instant
+    setFiltersObjectArray(filterCopy);
     if (updateMethod === INSTANT) {
-      setAllFilters(filtersObjectArrayCopy);
+      setAllFilters(filterCopy);
     }
   };
+
   /** Render the individual filter component */
-  var renderFilter = function renderFilter(_ref4) {
+  var renderFilter = function renderFilter(_ref6) {
     var _filtersState$column3, _filtersState$column4;
-    var type = _ref4.type,
-      column = _ref4.column,
-      components = _ref4.props;
+    var type = _ref6.type,
+      column = _ref6.column,
+      components = _ref6.props;
     var filter;
     var isPanel = variation === PANEL;
     if (!type) {
@@ -224,8 +182,8 @@ var useFilters = function useFilters(_ref2) {
         return /*#__PURE__*/React.createElement(Checkbox, _extends({
           key: option.id
         }, option, {
-          onChange: function onChange(_, _ref5) {
-            var checked = _ref5.checked;
+          onChange: function onChange(_, _ref7) {
+            var checked = _ref7.checked;
             handleCheckboxChange({
               checked: checked,
               filtersState: filtersState,
@@ -316,9 +274,9 @@ var useFilters = function useFilters(_ref2) {
             labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
             value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
           }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
-            var _ref6, _radio$id;
+            var _ref8, _radio$id;
             return /*#__PURE__*/React.createElement(RadioButton, _extends({
-              key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
+              key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
             }, radio));
           })));
         }
@@ -327,9 +285,9 @@ var useFilters = function useFilters(_ref2) {
         filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
           selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
           items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
-          onChange: function onChange(_ref7) {
+          onChange: function onChange(_ref9) {
             var _components$Dropdown$, _components$Dropdown;
-            var selectedItem = _ref7.selectedItem;
+            var selectedItem = _ref9.selectedItem;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: selectedItem,
               type: type

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

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+import React, { forwardRef, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+export var ColumnHeaderSlug = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var slug = _ref.slug;
+  if (slug && /*#__PURE__*/isValidElement(slug)) {
+    var normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
+      size: 'mini',
+      ref: ref
+    });
+    return normalizedSlug;
+  }
+  return;
+});
+ColumnHeaderSlug.propTypes = {
+  /**
+   * Specify the AI slug to be displayed
+   */
+  slug: PropTypes.node
+};

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -20,9 +20,9 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
       className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".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.createElement("div", {
-      className: "".concat(blockClass, "__defaultStringRenderer"),
+      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React.isValidElement(slug))),
       title: typeof header === 'string' ? header : '',
       key: typeof header === 'string' ? header : ''
     }, header);
@@ -32,7 +32,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 _toConsumableArray(columnsWithDefaultCells);

package/es/components/Datagrid/useRowIsMouseOver.js

@@ -37,7 +37,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
       });
     });
     Object.assign(instance, {
-      rows: rowsWithMouseOver
+      rows: rowsWithMouseOver,
+      withMouseHover: true,
+      setMouseOverRowIndex: setMouseOverRowIndex
     });
     hooks.getRowProps.push(getRowProps);
   };

package/es/components/Datagrid/useSortableColumns.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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. 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.
@@ -15,6 +15,7 @@ import { pkg, carbon } from '../../settings';
 import { Button } from '@carbon/react';
 import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/react/icons';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
+import { ColumnHeaderSlug } from './Datagrid/addons/Slug/ColumnHeaderSlug';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var ordering = {
   ASC: 'ASC',
@@ -58,7 +59,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(carbon.prefix, "--slug")) || event.target.closest(".".concat(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),
@@ -96,12 +103,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".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/es/components/DelimitedList/DelimitedList.docs-page.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
+import * as stories from './DelimitedList.stories';
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/React.createElement(StoryDocsPage, {
+    blocks: [{
+      story: stories.delimited
+    }, {
+      story: stories.notDelimited
+    }, {
+      story: stories.empty
+    }]
+  });
+};
+export default DocsPage;

package/es/components/DelimitedList/DelimitedList.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "delimiter", "items", "truncate"];
+/**
+ * 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.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--delimited-list");
+var componentName = 'DelimitedList';
+var defaults = {
+  delimiter: ', ',
+  items: [],
+  truncate: true
+};
+
+/**
+ * `DelimitedList` converts an array of items into a single line of
+ * comma-separated values.
+ */
+export var DelimitedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$delimiter = _ref.delimiter,
+    delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaults.items : _ref$items,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
+    ref: ref
+  }, getDevtoolsProps(componentName)), items.length > 0 ? items.join(delimiter) : '–');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+DelimitedList = pkg.checkComponentEnabled(DelimitedList, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+DelimitedList.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+DelimitedList.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The character(s) used to separate the items.
+   */
+  delimiter: PropTypes.string,
+  /**
+   * Array of items to be listed.
+   */
+  items: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Toggle the component's ability to truncate or not.
+   */
+  truncate: PropTypes.bool
+};

package/es/components/DelimitedList/index.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+
+export { DelimitedList } from './DelimitedList';

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;