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

package/lib/components/AboutModal/AboutModal.js

@@ -71,9 +71,7 @@ exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
   return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
-    flags: {
-      'enable-experimental-focus-wrap-without-sentinels': true
-    }
+    enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/lib/components/ExportModal/ExportModal.js

@@ -129,9 +129,7 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onBlur: onBlurHandler
   }, 'data-modal-primary-focus', true);
   return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
-    flags: {
-      'enable-experimental-focus-wrap-without-sentinels': true
-    }
+    enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     "aria-label": title,

package/lib/components/FeatureFlags/index.d.ts

@@ -12,11 +12,12 @@ import PropTypes from 'prop-types';
  */
 declare const FeatureFlagContext: React.Context<any>;
 /**
- * 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
  */
-declare function FeatureFlags({ children, flags }: {
+declare function FeatureFlags({ children, flags, ...newFlags }: {
+    [x: string]: any;
     children: any;
     flags?: {} | undefined;
 }): React.JSX.Element;
@@ -24,7 +25,7 @@ declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
-         * 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.Requireable<{
             [x: string]: boolean | null | undefined;

package/lib/components/FeatureFlags/index.js

@@ -12,6 +12,8 @@ var React = require('react');
 var index = require('../../_virtual/index.js');
 var FeatureFlags$1 = require('@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
@@ -19,21 +21,27 @@ var FeatureFlags$1 = require('@carbon/feature-flags');
 var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
 
 /**
- * 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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var parentScope = React.useContext(FeatureFlagContext);
+  var newFlagsObject = Object.keys(newFlags).reduce(function (acc, key) {
+    acc[key] = newFlags[key];
+    return acc;
+  }, {});
+  var combinedFlags = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newFlagsObject), flags);
   var _useState = React.useState(parentScope),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     prevParentScope = _useState2[0],
     setPrevParentScope = _useState2[1];
   var _useState3 = React.useState(function () {
-      var scope = FeatureFlags$1.createScope(flags);
+      var scope = FeatureFlags$1.createScope(combinedFlags);
       scope.mergeWithScope(parentScope);
       return scope;
     }),
@@ -41,16 +49,15 @@ function FeatureFlags(_ref) {
     scope = _useState4[0],
     updateScope = _useState4[1];
   if (parentScope !== prevParentScope) {
-    var _scope = FeatureFlags$1.createScope(flags);
+    var _scope = FeatureFlags$1.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 = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -62,7 +69,7 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: index.default.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: index.default.objectOf(index.default.bool)
 };

package/lib/components/PageHeader/PageHeader.d.ts

@@ -149,6 +149,7 @@ interface TitleIcon {
     cancelDescription?: string;
     editDescription?: string;
     saveDescription?: string;
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
 }
 interface TitleContent {
     content: ReactNode;
@@ -269,6 +270,7 @@ interface PageHeaderBaseProps extends PropsWithChildren {
      *    - editableLabel: label for edit required if onChange supplied
      *    - cancelDescription: label for edit cancel button
      *    - saveDescription: label for edit save button
+     *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom"
      * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
      *    - content: title or name of current location shown in main part of page header
      *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied

package/lib/components/PageHeader/PageHeader.js

@@ -790,6 +790,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *    - editableLabel: label for edit required if onChange supplied
    *    - cancelDescription: label for edit cancel button
    *    - saveDescription: label for edit save button
+   *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom".
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
@@ -814,7 +815,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     //.isRequired.if(editInPlaceRequired),
     editDescription: index.default.string,
     // .isRequired.if(editInPlaceRequired),
-    saveDescription: index.default.string //.isRequired.if(editInPlaceRequired),
+    saveDescription: index.default.string,
+    //.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), index.default.string, index.default.shape({
     content: index.default.node.isRequired,

package/lib/components/PageHeader/PageHeaderTitle.d.ts

@@ -18,6 +18,7 @@ export namespace PageHeaderTitle {
             onSave: PropTypes.Requireable<(...args: any[]) => any>;
             cancelDescription: any;
             saveDescription: any;
+            tooltipAlignment: PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
             breadcrumbContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -14,7 +14,7 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
 /**
  *
@@ -40,18 +40,41 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     editableLabel = title.editableLabel,
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
+    _title$tooltipAlignme = title.tooltipAlignment,
+    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
+  var _useState = React.useState(),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isEllipsisApplied = _useState2[0],
+    setIsEllipsisApplied = _useState2[1];
+  var longTitleRef = React.useRef(undefined);
+  var titleRef = React.useRef(undefined);
+  React.useLayoutEffect(function () {
+    setIsEllipsisApplied(isEllipsisActive());
+  }, [longTitleRef, titleRef, title]);
+  var isEllipsisActive = function isEllipsisActive() {
+    if (longTitleRef.current) {
+      var _longTitleRef$current, _longTitleRef$current2;
+      return ((_longTitleRef$current = longTitleRef.current) === null || _longTitleRef$current === void 0 ? void 0 : _longTitleRef$current.offsetWidth) < ((_longTitleRef$current2 = longTitleRef.current) === null || _longTitleRef$current2 === void 0 ? void 0 : _longTitleRef$current2.scrollWidth);
+    } else if (titleRef.current) {
+      var _titleRef$current, _titleRef$current2;
+      return ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.offsetWidth) < ((_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth);
+    }
+    return false;
+  };
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
-    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement(TitleIcon, {
+    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__title-icon-wrapper")
+    }, /*#__PURE__*/React.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
       tooltipAlignment: "bottom",
@@ -64,7 +87,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React.createElement("span", {
+    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+      openOnHover: false,
+      align: tooltipAlignment,
+      definition: text,
+      className: "".concat(blockClass, "__tooltip")
+    }, /*#__PURE__*/React.createElement("span", {
+      ref: longTitleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text)) : /*#__PURE__*/React.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText"),
       title: !loading ? asText : null
     }, text));
   } else {
@@ -119,7 +152,8 @@ PageHeaderTitle.propTypes = {
     onChange: index.default.func,
     onSave: index.default.func,
     cancelDescription: index.default.string.isRequired.if(editInPlaceRequired),
-    saveDescription: index.default.string.isRequired.if(editInPlaceRequired)
+    saveDescription: index.default.string.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), index.default.string, index.default.shape({
     content: index.default.node.isRequired,

package/lib/components/Tearsheet/TearsheetShell.js

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