@carbon/ibm-products 1.14.0 → 1.15.0

package/es/components/TagSet/TagSet.js

@@ -97,9 +97,13 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   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 (pkg.isFeatureEnabled('default-portal-target-body')) {
+        setAllTagsModalTarget(document.body);
+      }
+    }
   }, [allTagsModalTargetIn]);
   useEffect(function () {
     var newSizingTags = []; // create sizing tags
@@ -237,14 +241,16 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__tag-container"),
     ref: displayedArea
-  }, displayedTags)), allTagsModalTarget && tags && displayCount < tags.length ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TagSetModal, {
+  }, displayedTags)), (allTagsModalTarget ? createPortal : function (children) {
+    return children;
+  })( /*#__PURE__*/React.createElement(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
 
 TagSet = pkg.checkComponentEnabled(TagSet, componentName);
@@ -269,7 +275,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;

package/es/components/Tearsheet/TearsheetShell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "title", "verticalPosition"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 
 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; }
 
@@ -16,6 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 // Import portions of React that are needed.
 import React, { useEffect, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { useResizeDetector } from 'react-resize-detector'; // Other standard imports.
 
 import PropTypes from 'prop-types';
@@ -68,10 +69,26 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       open = _ref.open,
       selectorPrimaryFocus = _ref.selectorPrimaryFocus,
       size = _ref.size,
+      portalTargetIn = _ref.portalTarget,
       title = _ref.title,
       verticalPosition = _ref.verticalPosition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // node the modal tearsheet is hosted in
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      portalTarget = _useState2[0],
+      setPortalTarget = _useState2[1];
+
+  useEffect(function () {
+    if (portalTargetIn) {
+      setPortalTarget(portalTargetIn);
+    } else {
+      if (pkg.isFeatureEnabled('default-portal-target-body')) {
+        setPortalTarget(document.body);
+      }
+    }
+  }, [portalTargetIn]);
   var localRef = useRef();
   var modalRef = ref || localRef;
 
@@ -82,15 +99,15 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       resizer = _useResizeDetector.ref; // Keep track of the stack depth and our position in it (1-based, 0=closed)
 
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      depth = _useState2[0],
-      setDepth = _useState2[1];
-
   var _useState3 = useState(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      position = _useState4[0],
-      setPosition = _useState4[1]; // Keep a record of the previous value of depth.
+      depth = _useState4[0],
+      setDepth = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1]; // Keep a record of the previous value of depth.
 
 
   var prevDepth = useRef();
@@ -176,7 +193,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var includeHeader = label || title || description || headerActions || navigation || effectiveHasCloseIcon; // Include an ActionSet if and only if one or more actions is given.
 
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-    return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+    return (portalTarget ? createPortal : function (children) {
+      return children;
+    })( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": title,
       className: cx(bc, className, (_cx = {}, _defineProperty(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth), // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && prevDepth.current > 1), _defineProperty(_cx, "".concat(bc, "--wide"), size === 'wide'), _defineProperty(_cx, "".concat(bc, "--narrow"), size !== 'wide'), _cx)),
@@ -237,7 +256,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     })))), /*#__PURE__*/React.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    }));
+    })), portalTarget);
   } else {
     pconsole.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;
@@ -377,6 +396,11 @@ TearsheetShell.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
 
+  /**
+   * portal target for the all tags modal
+   */
+  portalTarget: PropTypes.node,
+
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

package/es/global/js/package-settings.js

@@ -70,7 +70,8 @@ var defaults = {
   },
   // feature level flags
   feature: {
-    'a-new-feature': false
+    'a-new-feature': false,
+    'default-portal-target-body': true
   }
 };
 

package/lib/components/AddSelect/AddSelect.js

@@ -43,7 +43,7 @@ var _addSelectUtils = require("./add-select-utils");
 
 var _AddSelectFilter = require("./AddSelectFilter");
 
-var _excluded = ["className", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "searchResultsLabel", "textInputLabel", "title"];
+var _excluded = ["className", "columnInputPlaceholder", "description", "globalFilters", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "influencerTitle", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "removeIconDescription", "searchResultsLabel", "title"];
 
 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); }
 
@@ -61,8 +61,9 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
       globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
       globalFiltersSecondaryButtonText = _ref.globalFiltersSecondaryButtonText,
+      globalSearchLabel = _ref.globalSearchLabel,
+      globalSearchPlaceholder = _ref.globalSearchPlaceholder,
       influencerTitle = _ref.influencerTitle,
-      inputPlaceholder = _ref.inputPlaceholder,
       items = _ref.items,
       itemsLabel = _ref.itemsLabel,
       multi = _ref.multi,
@@ -72,13 +73,12 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       noSelectionTitle = _ref.noSelectionTitle,
       onClose = _ref.onClose,
       onCloseButtonText = _ref.onCloseButtonText,
-      onSearchFilter = _ref.onSearchFilter,
       onSubmit = _ref.onSubmit,
       onSubmitButtonText = _ref.onSubmitButtonText,
       open = _ref.open,
+      portalTarget = _ref.portalTarget,
       removeIconDescription = _ref.removeIconDescription,
       searchResultsLabel = _ref.searchResultsLabel,
-      textInputLabel = _ref.textInputLabel,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.pkg.prefix, "--add-select"); // hooks
@@ -209,11 +209,6 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var results = itemsToFilter.filter(function (item) {
       if (!searchTerm) {
         return item;
-      } // if user provides their own filter function use that
-
-
-      if (onSearchFilter) {
-        return onSearchFilter(item, searchTerm);
       } // otherwise use the default label filter
 
 
@@ -282,7 +277,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       kind: 'primary',
       onClick: submitHandler,
       disabled: multi ? multiSelection.length === 0 : !singleSelection
-    }]
+    }],
+    portalTarget: portalTarget
   };
   var sidebarProps = {
     influencerTitle: influencerTitle,
@@ -326,8 +322,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__header")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectFilter.AddSelectFilter, {
-    textInputLabel: textInputLabel,
-    inputPlaceholder: inputPlaceholder,
+    inputLabel: globalSearchLabel,
+    inputPlaceholder: globalSearchPlaceholder,
     searchTerm: searchTerm,
     handleSearch: handleSearch,
     multi: multi,
@@ -390,21 +386,28 @@ AddSelect.propTypes = {
   globalFiltersPlaceholderText: _propTypes.default.string,
   globalFiltersPrimaryButtonText: _propTypes.default.string,
   globalFiltersSecondaryButtonText: _propTypes.default.string,
+  globalSearchLabel: _propTypes.default.string,
+  globalSearchPlaceholder: _propTypes.default.string,
   influencerTitle: _propTypes.default.string,
-  inputPlaceholder: _propTypes.default.string,
   items: _propTypes.default.shape({
     modifiers: _propTypes.default.shape({
       label: _propTypes.default.string,
-      options: _propTypes.default.array,
-      property: _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,
-      children: _propTypes.default.object
+      value: _propTypes.default.string.isRequired
     }))
   }),
   itemsLabel: _propTypes.default.string,
@@ -415,13 +418,16 @@ AddSelect.propTypes = {
   noSelectionTitle: _propTypes.default.string,
   onClose: _propTypes.default.func,
   onCloseButtonText: _propTypes.default.string,
-  onSearchFilter: _propTypes.default.func,
   onSubmit: _propTypes.default.func,
   onSubmitButtonText: _propTypes.default.string,
   open: _propTypes.default.bool,
+
+  /**
+   * portal target for the all tags modal
+   */
+  portalTarget: _propTypes.default.node,
   removeIconDescription: _propTypes.default.string,
   searchResultsLabel: _propTypes.default.string,
-  textInputLabel: _propTypes.default.string,
   title: _propTypes.default.string
 };
 AddSelect.defaultProps = {

package/lib/components/AddSelect/AddSelectFilter.js

@@ -38,13 +38,13 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
       handleFilter = _ref.handleFilter,
       handleSearch = _ref.handleSearch,
       iconDescription = _ref.iconDescription,
+      inputLabel = _ref.inputLabel,
       inputPlaceholder = _ref.inputPlaceholder,
       multi = _ref.multi,
       placeholder = _ref.placeholder,
       primaryButtonText = _ref.primaryButtonText,
       searchTerm = _ref.searchTerm,
-      secondaryButtonText = _ref.secondaryButtonText,
-      textInputLabel = _ref.textInputLabel;
+      secondaryButtonText = _ref.secondaryButtonText;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -84,7 +84,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     className: "".concat(blockClass, "-search")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     id: "temp-id",
-    labelText: textInputLabel,
+    labelText: inputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
     onChange: searchHandler
@@ -136,12 +136,12 @@ AddSelectFilter.propTypes = {
   handleFilter: _propTypes.default.func,
   handleSearch: _propTypes.default.func,
   iconDescription: _propTypes.default.string,
+  inputLabel: _propTypes.default.string,
   inputPlaceholder: _propTypes.default.string,
   multi: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   primaryButtonText: _propTypes.default.string,
   searchTerm: _propTypes.default.string,
-  secondaryButtonText: _propTypes.default.string,
-  textInputLabel: _propTypes.default.string
+  secondaryButtonText: _propTypes.default.string
 };
 AddSelectFilter.displayName = componentName;