@carbon/ibm-products 2.43.2-canary.306 → 2.43.2-canary.307

package/es/components/FeatureFlags/index.js

@@ -5,11 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState, useRef, useEffect, createContext } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
 
+var _excluded = ["children", "flags"];
+
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
@@ -17,21 +19,27 @@ import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-fla
 var FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
 
 /**
- * Supports an object of feature flag values with the `flags` prop, merging them
+ * Supports individual feature flag values as props, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
 function FeatureFlags(_ref) {
   var children = _ref.children,
     _ref$flags = _ref.flags,
-    flags = _ref$flags === void 0 ? {} : _ref$flags;
+    flags = _ref$flags === void 0 ? {} : _ref$flags,
+    newFlags = _objectWithoutProperties(_ref, _excluded);
   var parentScope = useContext(FeatureFlagContext);
+  var newFlagsObject = Object.keys(newFlags).reduce(function (acc, key) {
+    acc[key] = newFlags[key];
+    return acc;
+  }, {});
+  var combinedFlags = _objectSpread2(_objectSpread2({}, newFlagsObject), flags);
   var _useState = useState(parentScope),
     _useState2 = _slicedToArray(_useState, 2),
     prevParentScope = _useState2[0],
     setPrevParentScope = _useState2[1];
   var _useState3 = useState(function () {
-      var scope = createScope(flags);
+      var scope = createScope(combinedFlags);
       scope.mergeWithScope(parentScope);
       return scope;
     }),
@@ -39,16 +47,15 @@ function FeatureFlags(_ref) {
     scope = _useState4[0],
     updateScope = _useState4[1];
   if (parentScope !== prevParentScope) {
-    var _scope = createScope(flags);
+    var _scope = createScope(combinedFlags);
     _scope.mergeWithScope(parentScope);
     updateScope(_scope);
     setPrevParentScope(parentScope);
   }
 
-  // We use a custom hook to detect if any of the keys or their values change
-  // for flags that are passed in. If they have changed, then we re-create the
-  // FeatureFlagScope using the new flags
-  useChangedValue(flags, isEqual, function (changedFlags) {
+  // We use a custom hook to detect if any of the individual flag props or their values change
+  // If any flags have changed, we re-create the FeatureFlagScope using the updated flags
+  useChangedValue(combinedFlags, isEqual, function (changedFlags) {
     var scope = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -60,7 +67,7 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: PropTypes.node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree
+   * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
    */
   flags: PropTypes.objectOf(PropTypes.bool)
 };

package/es/components/Tearsheet/TearsheetShell.js

@@ -260,9 +260,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
     return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
-      flags: {
-        'enable-experimental-focus-wrap-without-sentinels': true
-      }
+      enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
       className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),