@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/TagSet/TagSet.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { Tag, DismissibleTag } from '@carbon/react';
@@ -17,101 +17,75 @@ import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
-  _excluded2 = ["label", "id", "filter", "onClose"],
-  _excluded3 = ["label", "onClose", "filter"];
-var componentName = 'TagSet';
-var blockClass = "".concat(pkg.prefix, "--tag-set");
-var allTagsModalSearchThreshold = 10;
+const componentName = 'TagSet';
+const blockClass = `${pkg.prefix}--tag-set`;
+const allTagsModalSearchThreshold = 10;
 
 // Default values for props
-var defaults = {
+const defaults = {
   measurementOffset: 0,
-  onOverflowTagChange: function onOverflowTagChange() {}
+  onOverflowTagChange: () => {}
 };
-var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'start' : _ref$align,
-    allTagsModalTarget = _ref.allTagsModalTarget,
-    className = _ref.className,
-    maxVisible = _ref.maxVisible,
-    multiline = _ref.multiline,
-    overflowAutoAlign = _ref.overflowAutoAlign,
-    _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
-    overflowClassName = _ref.overflowClassName,
-    _ref$overflowType = _ref.overflowType,
-    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
-    allTagsModalAriaLabel = _ref.allTagsModalAriaLabel,
-    _ref$allTagsModalTitl = _ref.allTagsModalTitle,
-    allTagsModalTitle = _ref$allTagsModalTitl === void 0 ? 'All tags' : _ref$allTagsModalTitl,
-    _ref$allTagsModalSear = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchLabel = _ref$allTagsModalSear === void 0 ? 'Search all tags' : _ref$allTagsModalSear,
-    _ref$allTagsModalSear2 = _ref.allTagsModalSearchPlaceholderText,
-    allTagsModalSearchPlaceholderText = _ref$allTagsModalSear2 === void 0 ? 'Search all tags' : _ref$allTagsModalSear2,
-    _ref$showAllTagsLabel = _ref.showAllTagsLabel,
-    showAllTagsLabel = _ref$showAllTagsLabel === void 0 ? 'View all tags' : _ref$showAllTagsLabel,
-    onOverflowClick = _ref.onOverflowClick,
-    tags = _ref.tags,
-    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),
-    displayCount = _useState2[0],
-    setDisplayCount = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    displayedTags = _useState4[0],
-    setDisplayedTags = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hiddenSizingTags = _useState6[0],
-    setHiddenSizingTags = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showAllModalOpen = _useState8[0],
-    setShowAllModalOpen = _useState8[1];
-  var localTagSetRef = useRef(null);
-  var tagSetRef = ref || localTagSetRef;
-  var sizingContainerRef = useRef(null);
-  var displayedArea = useRef(null);
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    sizingTags = _useState10[0],
-    setSizingTags = _useState10[1];
-  var overflowTag = useRef(null);
-  var _useState11 = useState(0),
-    _useState12 = _slicedToArray(_useState11, 2),
-    maxVisibleCount = _useState12[0],
-    setMaxVisibleCount = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    popoverOpen = _useState14[0],
-    setPopoverOpen = _useState14[1];
-  var handleShowAllClick = function handleShowAllClick() {
+let TagSet = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    align = 'start',
+    allTagsModalTarget,
+    className,
+    maxVisible,
+    multiline,
+    overflowAutoAlign,
+    overflowAlign = 'bottom',
+    overflowClassName,
+    overflowType = 'default',
+    allTagsModalAriaLabel,
+    allTagsModalTitle = 'All tags',
+    allTagsModalSearchLabel = 'Search all tags',
+    allTagsModalSearchPlaceholderText = 'Search all tags',
+    showAllTagsLabel = 'View all tags',
+    onOverflowClick,
+    tags,
+    containingElementRef,
+    measurementOffset = defaults.measurementOffset,
+    onOverflowTagChange = defaults.onOverflowTagChange,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [displayCount, setDisplayCount] = useState(3);
+  const [displayedTags, setDisplayedTags] = useState([]);
+  const [hiddenSizingTags, setHiddenSizingTags] = useState([]);
+  const [showAllModalOpen, setShowAllModalOpen] = useState(false);
+  const localTagSetRef = useRef(null);
+  const tagSetRef = ref || localTagSetRef;
+  const sizingContainerRef = useRef(null);
+  const displayedArea = useRef(null);
+  const [sizingTags, setSizingTags] = useState([]);
+  const overflowTag = useRef(null);
+  const [maxVisibleCount, setMaxVisibleCount] = useState(0);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const handleShowAllClick = () => {
     setShowAllModalOpen(true);
   };
-  useEffect(function () {
-    var maxCount = maxVisible || (tags === null || tags === void 0 ? void 0 : tags.length) || 0;
+  useEffect(() => {
+    const maxCount = maxVisible || tags?.length || 0;
     setMaxVisibleCount(maxCount);
   }, [maxVisible, tags]);
-  useEffect(function () {
-    var newSizingTags = [];
+  useEffect(() => {
+    const newSizingTags = [];
     // create sizing tags
-    setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
-      var label = _ref2.label,
-        id = _ref2.id,
-        filter = _ref2.filter,
-        onClose = _ref2.onClose,
-        other = _objectWithoutProperties(_ref2, _excluded2);
+    setHiddenSizingTags(tags && tags.length > 0 ? tags.map((_ref2, index) => {
+      let {
+        label,
+        id,
+        filter,
+        onClose,
+        ...other
+      } = _ref2;
       return /*#__PURE__*/React__default.createElement("div", {
         key: index,
-        className: "".concat(blockClass, "__sizing-tag"),
-        ref: function ref(el) {
+        className: `${blockClass}__sizing-tag`,
+        ref: el => {
           if (el != null) {
             newSizingTags[index] = el;
           }
@@ -126,47 +100,45 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }) : []);
     setSizingTags(newSizingTags);
   }, [tags]);
-  var handleTagOnClose = useCallback(function (onClose, index) {
-    onClose === null || onClose === void 0 || onClose();
+  const handleTagOnClose = useCallback((onClose, index) => {
+    onClose?.();
     if (index <= displayCount - 1) {
       setPopoverOpen(false);
     }
   }, [displayCount]);
-  useEffect(function () {
-    var size = 'md';
+  useEffect(() => {
+    let size = 'md';
     // create visible and overflow tags
-    var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
-      var label = _ref3.label,
-        _onClose = _ref3.onClose,
-        filter = _ref3.filter,
-        other = _objectWithoutProperties(_ref3, _excluded3);
+    let newDisplayedTags = tags && tags.length > 0 ? tags.map((_ref3, index) => {
+      let {
+        label,
+        onClose,
+        filter,
+        ...other
+      } = _ref3;
       if (index == tags.length - 1 && other.size) {
         size = other.size;
       }
-      if (typeof _onClose === 'function' || filter) {
+      if (typeof onClose === 'function' || filter) {
         return /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
-          key: "displayed-tag-".concat(index),
-          onClose: function onClose() {
-            return handleTagOnClose(_onClose, index);
-          },
+          key: `displayed-tag-${index}`,
+          onClose: () => handleTagOnClose(onClose, index),
           text: label
         }));
       }
       return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-        key: "displayed-tag-".concat(index)
+        key: `displayed-tag-${index}`
       }), label);
     }) : [];
 
     // separate out tags for the overflow
-    var newOverflowTags = newDisplayedTags.splice(displayCount, newDisplayedTags.length - displayCount);
+    const newOverflowTags = newDisplayedTags.splice(displayCount, newDisplayedTags.length - displayCount);
 
     // add wrapper around displayed tags
-    newDisplayedTags = newDisplayedTags.map(function (tag, index) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: index,
-        className: "".concat(blockClass, "__displayed-tag")
-      }, tag);
-    });
+    newDisplayedTags = newDisplayedTags.map((tag, index) => /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: `${blockClass}__displayed-tag`
+    }, tag));
     newDisplayedTags.push(/*#__PURE__*/React__default.createElement(TagSetOverflow, {
       allTagsModalSearchThreshold: allTagsModalSearchThreshold,
       overflowAutoAlign: overflowAutoAlign,
@@ -183,23 +155,22 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       onOverflowClick: onOverflowClick,
       setPopoverOpen: setPopoverOpen
     }));
-    onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(newOverflowTags);
+    onOverflowTagChange?.(newOverflowTags);
     setDisplayedTags(newDisplayedTags);
   }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, onOverflowClick, tags, onOverflowTagChange, popoverOpen, handleTagOnClose, overflowAutoAlign]);
-  var checkFullyVisibleTags = useCallback(function () {
+  const checkFullyVisibleTags = useCallback(() => {
     if (multiline) {
       return setDisplayCount(maxVisibleCount);
     }
 
     // how many will fit?
-    var willFit = 0;
+    let willFit = 0;
     if (sizingTags.length > 0) {
-      var optionalContainingElement = typeof containingElementRef !== 'function' && (containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current);
-      var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
-      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef === null || tagSetRef === void 0 ? void 0 : tagSetRef['current'].offsetWidth;
-      for (var i in sizingTags) {
-        var _sizingTags$i;
-        var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
+      const optionalContainingElement = typeof containingElementRef !== 'function' && containingElementRef?.current;
+      const measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
+      let spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef?.['current'].offsetWidth;
+      for (const i in sizingTags) {
+        const tagWidth = sizingTags[i]?.offsetWidth || 0;
         if (spaceAvailable >= tagWidth) {
           spaceAvailable -= tagWidth;
           willFit += 1;
@@ -221,40 +192,40 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       setDisplayCount(maxVisibleCount ? Math.min(willFit, maxVisibleCount) : willFit);
     }
   }, [maxVisibleCount, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
-  useEffect(function () {
+  useEffect(() => {
     checkFullyVisibleTags();
   }, [checkFullyVisibleTags, maxVisibleCount, multiline, sizingTags]);
 
   /* don't know how to test resize */
   /* istanbul ignore next */
-  var handleResize = function handleResize() {
+  const handleResize = () => {
     /* istanbul ignore next */ // not sure how to test resize
     checkFullyVisibleTags();
   };
 
   /* don't know how to test resize */
   /* istanbul ignore next */
-  var handleSizerTagsResize = function handleSizerTagsResize() {
+  const handleSizerTagsResize = () => {
     /* istanbul ignore next */ // not sure how to test resize
     checkFullyVisibleTags();
   };
-  var handleModalClose = function handleModalClose() {
+  const handleModalClose = () => {
     setShowAllModalOpen(false);
   };
   useResizeObserver(sizingContainerRef, handleSizerTagsResize);
-  var resizeOption = containingElementRef ? containingElementRef : tagSetRef;
+  const resizeOption = containingElementRef ? containingElementRef : tagSetRef;
   useResizeObserver(resizeOption, handleResize);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),
     ref: tagSetRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(["".concat(blockClass, "__space"), "".concat(blockClass, "__space--align-").concat(align)])
+    className: cx([`${blockClass}__space`, `${blockClass}__space--align-${align}`])
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__tag-container ").concat(blockClass, "__tag-container--hidden"),
+    className: `${blockClass}__tag-container ${blockClass}__tag-container--hidden`,
     "aria-hidden": true,
     ref: sizingContainerRef
   }, hiddenSizingTags), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
+    className: cx([`${blockClass}__tag-container`, multiline && `${blockClass}__tag-container--multiline`]),
     ref: displayedArea
   }, displayedTags)), !onOverflowClick && /*#__PURE__*/React__default.createElement(TagSetModal, {
     allTags: tags,
@@ -275,13 +246,15 @@ TagSet = pkg.checkComponentEnabled(TagSet, componentName);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref4) {
-  var tags = _ref4.tags;
+const string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, _ref4 => {
+  let {
+    tags
+  } = _ref4;
   return tags && tags.length > allTagsModalSearchThreshold;
 });
 
 // copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
-var TYPES = {
+const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
   purple: 'Purple',
@@ -295,7 +268,7 @@ var TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
-var tagTypes = Object.keys(TYPES);
+const tagTypes = Object.keys(TYPES);
 TagSet['types'] = tagTypes;
 TagSet.propTypes = {
   /**
@@ -381,11 +354,12 @@ TagSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Tag.propTypes), {}, {
+  tags: PropTypes.arrayOf(PropTypes.shape({
+    ...Tag.propTypes,
     label: PropTypes.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: PropTypes.oneOf(tagTypes)
-  })))
+  }))
 };
 TagSet.displayName = componentName;
 

package/es/components/TagSet/TagSetModal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -14,51 +14,45 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 
-var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
-  _excluded2 = ["label"];
-var componentName = 'TagSetModal';
-var blockClass = "".concat(pkg.prefix, "--tag-set-modal");
+const componentName = 'TagSetModal';
+const blockClass = `${pkg.prefix}--tag-set-modal`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   // required for accessibility if using hasScrollingContent
   modalAriaLabel: 'List of all tags',
   // marked as required by TagSet if needed, default used to satisfy <Search /> component
   searchLabel: ''
 };
-var TagSetModal = function TagSetModal(_ref) {
-  var allTags = _ref.allTags,
-    className = _ref.className,
-    title = _ref.title,
-    _ref$modalAriaLabel = _ref.modalAriaLabel,
-    modalAriaLabel = _ref$modalAriaLabel === void 0 ? defaults.modalAriaLabel : _ref$modalAriaLabel,
-    onClose = _ref.onClose,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    _ref$searchLabel = _ref.searchLabel,
-    searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
-    searchPlaceholder = _ref.searchPlaceholder,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    filteredModalTags = _useState2[0],
-    setFilteredModalTags = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    search = _useState4[0],
-    setSearch = _useState4[1];
-  var renderPortalUse = usePortalTarget(portalTargetIn);
-  useEffect(function () {
-    var newFilteredModalTags = [];
+const TagSetModal = _ref => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    allTags,
+    className,
+    title,
+    modalAriaLabel = defaults.modalAriaLabel,
+    onClose,
+    open,
+    portalTarget: portalTargetIn,
+    searchLabel = defaults.searchLabel,
+    searchPlaceholder,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [filteredModalTags, setFilteredModalTags] = useState([]);
+  const [search, setSearch] = useState('');
+  const renderPortalUse = usePortalTarget(portalTargetIn);
+  useEffect(() => {
+    let newFilteredModalTags = [];
     if (open) {
       if (search === '' && allTags) {
-        newFilteredModalTags = allTags === null || allTags === void 0 ? void 0 : allTags.slice(0);
+        newFilteredModalTags = allTags?.slice(0);
       } else {
-        var lCaseSearch = search.toLocaleLowerCase();
-        allTags === null || allTags === void 0 || allTags.forEach(function (tag) {
-          var _tag$dataSearch, _tag$label;
-          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
-          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
+        const lCaseSearch = search.toLocaleLowerCase();
+        allTags?.forEach(tag => {
+          const dataSearch = tag['data-search']?.toLocaleLowerCase()?.indexOf(lCaseSearch);
+          const labelSearch = tag.label?.toLocaleLowerCase()?.indexOf(lCaseSearch);
           if (dataSearch > -1 || labelSearch > -1) {
             newFilteredModalTags.push(tag);
           }
@@ -67,45 +61,48 @@ var TagSetModal = function TagSetModal(_ref) {
     }
     setFilteredModalTags(newFilteredModalTags);
   }, [allTags, open, search]);
-  var handleSearch = function handleSearch(ev) {
+  const handleSearch = ev => {
     setSearch(ev.target.value || '');
   };
   return renderPortalUse(/*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
-    containerClassName: "".concat(blockClass, "__container"),
-    className: cx(className, "".concat(blockClass)),
+    containerClassName: `${blockClass}__container`,
+    className: cx(className, `${blockClass}`),
     size: "sm",
-    open: open,
-    onClose: onClose
+    open,
+    onClose
   }), /*#__PURE__*/React__default.createElement(ModalHeader, {
-    className: "".concat(blockClass, "__header"),
+    className: `${blockClass}__header`,
     closeModal: onClose,
     title: title
   }, /*#__PURE__*/React__default.createElement(Search, {
     "data-modal-primary-focus": true,
-    className: "".concat(blockClass, "__search"),
+    className: `${blockClass}__search`,
     labelText: searchLabel,
     placeholder: searchPlaceholder,
     onChange: handleSearch,
     size: "lg"
   })), /*#__PURE__*/React__default.createElement(ModalBody, {
-    className: "".concat(blockClass, "__body"),
+    className: `${blockClass}__body`,
     hasForm: true,
     hasScrollingContent: true,
     "aria-label": modalAriaLabel
-  }, filteredModalTags.map(function (_ref2, index) {
-    var label = _ref2.label,
-      other = _objectWithoutProperties(_ref2, _excluded2);
+  }, filteredModalTags.map((_ref2, index) => {
+    let {
+      label,
+      ...other
+    } = _ref2;
     return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      key: "all-tags-".concat(index)
+      key: `all-tags-${index}`
     }), label);
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__fade")
+    className: `${blockClass}__fade`
   }))));
 };
 TagSetModal.propTypes = {
-  allTags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Tag.propTypes, 'filter')), {}, {
+  allTags: PropTypes.arrayOf(PropTypes.shape({
+    ...prepareProps(Tag.propTypes, 'filter'),
     label: PropTypes.string.isRequired
-  }))),
+  })),
   className: PropTypes.string,
   onClose: PropTypes.func,
   open: PropTypes.bool,