@carbon/ibm-products 1.13.0 → 1.16.0

package/lib/components/Datagrid/useSortableColumns.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ordering = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+  NONE: 'NONE'
+};
+
+var useSortableColumns = function useSortableColumns(hooks) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var instance = _ref.instance;
+    var onSort = instance.onSort;
+
+    var onSortClick = function onSortClick(column) {
+      var key = column.id;
+      var sortDesc = column.isSortedDesc;
+
+      var _getNewSortOrder = getNewSortOrder(sortDesc),
+          newSortDesc = _getNewSortOrder.newSortDesc,
+          newOrder = _getNewSortOrder.newOrder;
+
+      if (onSort) {
+        onSort(key, newOrder);
+      }
+
+      instance.toggleSortBy(key, newSortDesc, false);
+    };
+
+    var sortableColumns = visibleColumns.map(function (column) {
+      var icon = function icon(col) {
+        if (col.isSorted) {
+          switch (col.isSortedDesc) {
+            case false:
+              return _iconsReact.ArrowUp16;
+
+            case true:
+              return _iconsReact.ArrowDown16;
+
+            default:
+              return _iconsReact.Arrows16;
+          }
+        }
+
+        return _iconsReact.Arrows16;
+      };
+
+      var Header = function Header(headerProp) {
+        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+          onClick: function onClick() {
+            return onSortClick(headerProp.column);
+          },
+          kind: "ghost",
+          renderIcon: icon(headerProp.column)
+        }, column.Header);
+      };
+
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Header: Header
+      });
+    });
+    return (0, _toConsumableArray2.default)(sortableColumns);
+  };
+
+  var sortInstanceProps = function sortInstanceProps(instance) {
+    var onSort = instance.onSort;
+    Object.assign(instance, {
+      manualSortBy: !!onSort,
+      isTableSortable: true
+    });
+  };
+
+  var getNewSortOrder = function getNewSortOrder(sortOrder) {
+    var order = {
+      newSortDesc: undefined,
+      newOrder: ordering.NONE
+    };
+
+    if (sortOrder === false) {
+      order.newOrder = ordering.DESC;
+      order.newSortDesc = true;
+    }
+
+    if (sortOrder === undefined) {
+      order.newOrder = ordering.ASC;
+      order.newSortDesc = false;
+    }
+
+    return order;
+  };
+
+  hooks.visibleColumns.push(sortableVisibleColumns);
+  hooks.useInstance.push(sortInstanceProps);
+};
+
+var _default = useSortableColumns;
+exports.default = _default;

package/lib/components/Datagrid/useStickyColumn.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
+var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
+
+var useStickyColumn = function useStickyColumn(hooks) {
+  var tableBodyRef = (0, _react.useRef)();
+  var stickyHeaderCellRef = (0, _react.useRef)();
+  hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
+  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
+  hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
+  hooks.getHeaderGroupProps.push(function (props) {
+    return [props, {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
+
+      })
+    }];
+  });
+
+  var useEventListener = function useEventListener(instance) {
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      if (hasVertScroll(tableBodyElement) && headerCellElement) {
+        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+      }
+
+      var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      window.addEventListener('resize', boundListener);
+      return function () {
+        window.removeEventListener('resize', boundListener);
+      };
+    }, [instance.rows, instance.isFetching]);
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      var listener = function listener(evt) {
+        toggleStickyShadow(evt.target, headerCellElement);
+      };
+
+      toggleStickyShadow(tableBodyElement, headerCellElement);
+
+      if (tableBodyElement) {
+        tableBodyElement.addEventListener('scroll', listener);
+      }
+
+      return function () {
+        if (tableBodyElement) {
+          tableBodyElement.removeEventListener('scroll', listener);
+        }
+      };
+    }, [instance.rows, instance.isFetching]);
+  };
+
+  var useCheckScroll = function useCheckScroll(instance) {
+    var tableBodyElement = tableBodyRef.current;
+    var headerCellElement = stickyHeaderCellRef.current;
+    (0, _react.useEffect)(function () {
+      onBodyResize(tableBodyElement, headerCellElement);
+    }, [instance.rows, headerCellElement, tableBodyElement]);
+  };
+
+  hooks.useInstance.push(useEventListener);
+  hooks.useInstance.push(useCheckScroll);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withStickyColumn: true
+    });
+  });
+  hooks.useInstance.push(function (instance) {
+    // sticky column is defined by consumer
+    // it will always comes after the spacer which is defined by useFlexResize
+    // swap them here to use the spacer to push
+    // sticky column to the right when there are few
+    // columns defined
+    var newColumns = instance.visibleColumns;
+    var spacerIdx = newColumns.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    var stickyIdx = newColumns.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var temp = newColumns[spacerIdx];
+      newColumns[spacerIdx] = newColumns[stickyIdx];
+      newColumns[stickyIdx] = temp;
+    }
+
+    var newHeaders = instance.headers;
+    spacerIdx = newHeaders.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    stickyIdx = newHeaders.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var _temp = newHeaders[spacerIdx];
+      newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[stickyIdx] = _temp;
+    }
+  });
+};
+
+var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
+  return [props, {
+    ref: tableBodyRef
+  }];
+};
+
+var changeProps = function changeProps(elementName, headerCellRef, props, data) {
+  var column = data.column || data.cell.column;
+
+  if (column.sticky === 'right') {
+    var _cx;
+
+    return [props, _objectSpread({
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+
+  return [props];
+};
+
+var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
+  if (headerCellEle) {
+    if (hasVertScroll(tableBodyEle)) {
+      headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
+    } else {
+      headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
+    }
+
+    toggleStickyShadow(tableBodyEle, headerCellEle);
+  }
+};
+
+var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+  if (tableBodyEle && headerCellEle) {
+    var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
+
+    if (isScrolledToRight) {
+      headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
+    } else {
+      headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
+    }
+  }
+};
+
+var hasVertScroll = function hasVertScroll(element) {
+  if (!element) {
+    return false;
+  }
+
+  var scrollHeight = element.scrollHeight,
+      clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+};
+
+var _default = useStickyColumn;
+exports.default = _default;

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _AddSelect = require("../AddSelect");
 
 var _devtools = require("../../global/js/utils/devtools");
@@ -23,7 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// import PropTypes from 'prop-types';
 var componentName = 'MultiAddSelect';
 var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
@@ -33,5 +34,152 @@ var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 exports.MultiAddSelect = MultiAddSelect;
 exports.MultiAddSelect = MultiAddSelect = _settings.pkg.checkComponentEnabled(MultiAddSelect, componentName);
-MultiAddSelect.propTypes = {};
+MultiAddSelect.propTypes = {
+  /**
+   * optional class name
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * placeholder for column input filter
+   */
+  columnInputPlaceholder: _propTypes.default.string,
+
+  /**
+   * text description that appears under the title
+   */
+  description: _propTypes.default.string,
+
+  /**
+   * options to display in the global filter box. values are generated
+   * from the id which should correlate with a specific property in an
+   * item entry
+   */
+  globalFilters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.string
+  })),
+  globalFiltersIconDescription: _propTypes.default.string,
+
+  /**
+   * placeholder text for the global filter dropdown
+   */
+  globalFiltersPlaceholderText: _propTypes.default.string,
+
+  /**
+   * text for the global filter primary button
+   */
+  globalFiltersPrimaryButtonText: _propTypes.default.string,
+
+  /**
+   * text for the global filter secondary button
+   */
+  globalFiltersSecondaryButtonText: _propTypes.default.string,
+
+  /**
+   * label for global search input
+   */
+  globalSearchLabel: _propTypes.default.string,
+
+  /**
+   * placeholder for global search input
+   */
+  globalSearchPlaceholder: _propTypes.default.string,
+
+  /**
+   * title that displays in the sidebar / influencer
+   */
+  influencerTitle: _propTypes.default.string,
+
+  /**
+   * object that contains the item data. for more information reference the
+   * "Structuring items" section in the docs tab
+   */
+  items: _propTypes.default.shape({
+    modifiers: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      options: _propTypes.default.array
+    }),
+    sortBy: _propTypes.default.array,
+    filterBy: _propTypes.default.array,
+    entries: _propTypes.default.arrayOf(_propTypes.default.shape({
+      avatar: _propTypes.default.shape({
+        alt: _propTypes.default.string,
+        icon: _propTypes.default.object,
+        src: _propTypes.default.string
+      }),
+      children: _propTypes.default.object,
+      icon: _propTypes.default.object,
+      id: _propTypes.default.string.isRequired,
+      subtitle: _propTypes.default.string,
+      title: _propTypes.default.string.isRequired,
+      value: _propTypes.default.string.isRequired
+    }))
+  }),
+
+  /**
+   * label that display above the list of items
+   */
+  itemsLabel: _propTypes.default.string,
+
+  /**
+   * text to display when no results are found from the global search
+   */
+  noResultsDescription: _propTypes.default.string,
+
+  /**
+   * title to display when no results are found from the global search
+   */
+  noResultsTitle: _propTypes.default.string,
+
+  /**
+   * text body that displays in the sidebar when nothing is selected
+   */
+  noSelectionDescription: _propTypes.default.string,
+
+  /**
+   * title that displays in the sidebar when nothing is selected
+   */
+  noSelectionTitle: _propTypes.default.string,
+
+  /**
+   * function to call when the close button clicked
+   */
+  onClose: _propTypes.default.func,
+
+  /**
+   * text for close button
+   */
+  onCloseButtonText: _propTypes.default.string,
+
+  /**
+   * function to call when the submit button is clicked. returns a selection
+   */
+  onSubmit: _propTypes.default.func,
+
+  /**
+   * text for the submit button
+   */
+  onSubmitButtonText: _propTypes.default.string,
+
+  /**
+   * specifies if the component is open or not
+   */
+  open: _propTypes.default.bool,
+
+  /**
+   * description for the remove item icon
+   */
+  removeIconDescription: _propTypes.default.string,
+
+  /**
+   * text that displays when displaying filtered items
+   */
+  searchResultsLabel: _propTypes.default.string,
+
+  /**
+   * header text
+   */
+  title: _propTypes.default.string
+};
 MultiAddSelect.displayName = componentName;

package/lib/components/PageHeader/PageHeader.js

@@ -530,7 +530,8 @@ var TYPES = {
   gray: 'Gray',
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray',
-  'high-contrast': 'High-Contrast'
+  'high-contrast': 'High-Contrast',
+  outline: 'Outline'
 };
 var tagTypes = Object.keys(TYPES);
 var deprecatedProps = {
@@ -545,6 +546,7 @@ var deprecatedProps = {
   hasBackgroundAlways: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'Property replaced by `withoutBackground`')
 };
 exports.deprecatedProps = deprecatedProps;
+PageHeader.tagTypes = tagTypes;
 PageHeader.propTypes = _objectSpread({
   /**
    * Specifies the action bar items which are the final items in the row top of the PageHeader.

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -13,24 +13,112 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _AddSelect = require("../AddSelect");
 
 var _devtools = require("../../global/js/utils/devtools");
 
 var _settings = require("../../settings");
 
+var _propsHelper = require("../../global/js/utils/props-helper");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// import PropTypes from 'prop-types';
 var componentName = 'SingleAddSelect';
 var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
+  // remove multi add select specific props
+  var validProps = (0, _propsHelper.prepareProps)(props, ['columnInputPlaceholder', 'globalFilters', 'globalFiltersIconDescription', 'globalFiltersPlaceholderText', 'globalFiltersPrimaryButtonText', 'globalFiltersSecondaryButtonText', 'influencerTitle', 'multi', 'noSelectionDescription', 'noSelectionTitle', 'removeIconDescription']);
+  return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, validProps, {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)));
 });
 exports.SingleAddSelect = SingleAddSelect;
 exports.SingleAddSelect = SingleAddSelect = _settings.pkg.checkComponentEnabled(SingleAddSelect, componentName);
-SingleAddSelect.propTypes = {};
+SingleAddSelect.propTypes = {
+  /**
+   * optional class name
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * text description that appears under the title
+   */
+  description: _propTypes.default.string,
+
+  /**
+   * label for global search input
+   */
+  globalSearchLabel: _propTypes.default.string,
+
+  /**
+   * placeholder for global search input
+   */
+  globalSearchPlaceholder: _propTypes.default.string,
+
+  /**
+   * object that contains the item data. for more information reference the
+   * "Structuring items" section in the docs tab
+   */
+  items: _propTypes.default.shape({
+    entries: _propTypes.default.arrayOf(_propTypes.default.shape({
+      children: _propTypes.default.object,
+      id: _propTypes.default.string.isRequired,
+      title: _propTypes.default.string.isRequired,
+      value: _propTypes.default.string.isRequired
+    }))
+  }),
+
+  /**
+   * label that display above the list of items
+   */
+  itemsLabel: _propTypes.default.string,
+
+  /**
+   * text to display when no results are found from the global search
+   */
+  noResultsDescription: _propTypes.default.string,
+
+  /**
+   * title to display when no results are found from the global search
+   */
+  noResultsTitle: _propTypes.default.string,
+
+  /**
+   * function to call when the close button clicked
+   */
+  onClose: _propTypes.default.func,
+
+  /**
+   * text for close button
+   */
+  onCloseButtonText: _propTypes.default.string,
+
+  /**
+   * function to call when the submit button is clicked. returns a selection
+   */
+  onSubmit: _propTypes.default.func,
+
+  /**
+   * text for the submit button
+   */
+  onSubmitButtonText: _propTypes.default.string,
+
+  /**
+   * specifies if the component is open or not
+   */
+  open: _propTypes.default.bool,
+
+  /**
+   * text that displays when displaying filtered items
+   */
+  searchResultsLabel: _propTypes.default.string,
+
+  /**
+   * header text
+   */
+  title: _propTypes.default.string
+};
 SingleAddSelect.displayName = componentName;

package/lib/components/TagSet/TagSet.js

@@ -122,9 +122,13 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   (0, _react.useEffect)(function () {
-    var _document;
-
-    setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
+    if (allTagsModalTargetIn) {
+      setAllTagsModalTarget(allTagsModalTargetIn);
+    } else {
+      if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
+        setAllTagsModalTarget(document.body);
+      }
+    }
   }, [allTagsModalTargetIn]);
   (0, _react.useEffect)(function () {
     var newSizingTags = []; // create sizing tags
@@ -260,14 +264,16 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container"),
     ref: displayedArea
-  }, displayedTags)), allTagsModalTarget && tags && displayCount < tags.length ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
+  }, displayedTags)), (allTagsModalTarget ? _reactDom.createPortal : function (children) {
+    return children;
+  })( /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
     allTags: tags,
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText
-  }), allTagsModalTarget) : null);
+  }), allTagsModalTarget));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 
@@ -295,7 +301,8 @@ var TYPES = {
   gray: 'Gray',
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray',
-  'high-contrast': 'High-Contrast'
+  'high-contrast': 'High-Contrast',
+  outline: 'Outline'
 };
 var tagTypes = Object.keys(TYPES);
 TagSet.types = tagTypes;