@carbon/ibm-products 2.43.2-canary.31 → 2.43.2-canary.317

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -7,21 +7,14 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-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"];
 
 /**
  *
@@ -47,20 +40,43 @@ 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__default["default"].createElement(React__default["default"].Fragment, null, icon && !loading ? /*#__PURE__*/React__default["default"].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__default["default"].createElement(react.SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
-    }) : isEditable ? /*#__PURE__*/React__default["default"].createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers["extends"]({
+    }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
       tooltipAlignment: "bottom",
       value: text,
       cancelLabel: cancelDescription,
@@ -71,15 +87,25 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React__default["default"].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 {
     titleInnards = content;
     titleText = asText;
   }
-  return /*#__PURE__*/React__default["default"].createElement("h1", {
-    className: cx__default["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
+  return /*#__PURE__*/React.createElement("h1", {
+    className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
     title: titleText
   }, titleInnards);
 };
@@ -89,11 +115,11 @@ var editInPlaceRequired = function editInPlaceRequired(_ref2) {
 };
 PageHeaderTitle.propTypes = {
   // passed from page header
-  blockClass: index["default"].string.isRequired,
+  blockClass: index.default.string.isRequired,
   /**
    * controlled from within page header
    */
-  hasBreadcrumbRow: index["default"].bool,
+  hasBreadcrumbRow: index.default.bool,
   /**
    * An optional page title supplied as a string or object with the following attributes: text, icon, loading
    *
@@ -114,24 +140,25 @@ PageHeaderTitle.propTypes = {
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
    *    - asText: String based representation of the title
    */
-  title: index["default"].oneOfType([index["default"].shape({
+  title: index.default.oneOfType([index.default.shape({
     // Update docgen if changed
-    text: index["default"].string.isRequired,
-    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-    loading: index["default"].bool,
+    text: index.default.string.isRequired,
+    icon: index.default.oneOfType([index.default.func, index.default.object]),
+    loading: index.default.bool,
     // inline edit version properties
-    editDescription: index["default"].string.isRequired.if(editInPlaceRequired),
-    editableLabel: index["default"].string.isRequired.if(editInPlaceRequired),
-    id: index["default"].string.isRequired.if(editInPlaceRequired),
-    onChange: index["default"].func,
-    onSave: index["default"].func,
-    cancelDescription: index["default"].string.isRequired.if(editInPlaceRequired),
-    saveDescription: index["default"].string.isRequired.if(editInPlaceRequired)
+    editDescription: index.default.string.isRequired.if(editInPlaceRequired),
+    editableLabel: index.default.string.isRequired.if(editInPlaceRequired),
+    id: index.default.string.isRequired.if(editInPlaceRequired),
+    onChange: index.default.func,
+    onSave: index.default.func,
+    cancelDescription: 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,
-    breadcrumbContent: index["default"].node,
-    asText: index["default"].string.isRequired
+  }), index.default.string, index.default.shape({
+    content: index.default.node.isRequired,
+    breadcrumbContent: index.default.node,
+    asText: index.default.string.isRequired
   })])
 };
 

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
@@ -16,11 +14,6 @@ var settings = require('../../settings.js');
 var scrollableAncestor = require('../../global/js/utils/scrollableAncestor.js');
 var react = require('@carbon/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _SkeletonText;
 var blockClass = "".concat(settings.pkg.prefix, "--page-header");
 
@@ -81,7 +74,7 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
 
     // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
     // top and the measuring ref top, or the difference between.
-    update.headerOffset = offsetMeasuringTop === 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
+    update.headerOffset = offsetMeasuringTop !== 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
 
     /* istanbul ignore next */
     update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
@@ -107,11 +100,6 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
       // adjust top for sticky with navigation
       update.headerTopValue += update.navigationRowHeight;
     }
-    if (!hasActionBar && !widthIsNarrow) {
-      // Add difference between $spacing-08 and $spacing-07 to ensure space below breadcrumb is correct on scroll
-      // $spacing-07 is used as size for breadcrumb when no action bar otherwise $spacing-08
-      update.headerTopValue += 8;
-    }
     if (!enableBreadcrumbScroll || !navigation) {
       // adjust sticky top if no navigation or breadcrumb is to stay on screen
       update.headerTopValue += update.breadcrumbRowHeight;
@@ -170,7 +158,7 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
     if (title.text !== undefined) {
       // Shape title provided
       breadcrumbTitle = {
-        label: /*#__PURE__*/React__default["default"].createElement("span", null, title.loading ? _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, null)) : title.text),
+        label: /*#__PURE__*/React.createElement("span", null, title.loading ? _SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(react.SkeletonText, null)) : title.text),
         title: title.text
       };
     } else if (title.content !== undefined) {
@@ -189,7 +177,7 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
     if (breadcrumbTitle) {
       breadcrumbTitle.key = 'breadcrumb-title';
       breadcrumbTitle.isCurrentPage = true;
-      breadcrumbTitle.className = cx__default["default"](["".concat(blockClass, "__breadcrumb-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
+      breadcrumbTitle.className = cx(["".concat(blockClass, "__breadcrumb-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
     }
     if (title.shortTitle) {
       breadcrumbTitle.shortTitle = title.shortTitle;

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

@@ -1 +1,2 @@
-export { PageHeader } from "./PageHeader";
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -16,11 +16,15 @@ type overflowAction = {
 };
 type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';
-interface ProductiveCardProps extends PropsWithChildren {
+export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     actionIcons?: ActionIcon[];
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode | boolean;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -65,6 +69,10 @@ interface ProductiveCardProps extends PropsWithChildren {
      * Aria label prop required for OverflowMenu
      */
     overflowAriaLabel?: string;
+    /**
+     * Determines if the primary button is enabled or not
+     */
+    primaryButtonDisabled?: boolean;
     /**
      * Optionally specify an href for your Button to become an <a> element
      */
@@ -100,6 +108,7 @@ interface ProductiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     * @deprecated please use the `aiLabel` prop
      */
     slug?: ReactNode | boolean;
     /**
@@ -110,6 +119,10 @@ interface ProductiveCardProps extends PropsWithChildren {
      * Determines title size
      */
     titleSize?: 'default' | 'large';
+    /**
+     * Tooltip icon description
+     */
+    iconDescription?: string;
 }
 export declare let ProductiveCard: React.ForwardRefExoticComponent<ProductiveCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -7,28 +7,24 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var Card = require('../Card/Card.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var _excluded = ["actionsPlacement"];
+var _excluded = ["actionsPlacement", "iconDescription"];
 var componentName = 'ProductiveCard';
 exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
+    iconDescription = _ref.iconDescription,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
-  return /*#__PURE__*/React__default["default"].createElement(Card.Card, _rollupPluginBabelHelpers["extends"]({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
+  return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
+    iconDescription: iconDescription,
     actionsPlacement: actionsPlacement,
     ref: ref,
     productive: true
@@ -42,112 +38,124 @@ exports.ProductiveCard.propTypes = {
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines
    */
   /**@ts-ignore */
-  actionIcons: index["default"].arrayOf(index["default"].shape({
-    id: index["default"].string,
-    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-    onKeyDown: index["default"].func,
-    onClick: index["default"].func,
-    iconDescription: index["default"].string,
-    href: index["default"].string
+  actionIcons: index.default.arrayOf(index.default.shape({
+    id: index.default.string,
+    icon: index.default.oneOfType([index.default.func, index.default.object]),
+    onKeyDown: index.default.func,
+    onClick: index.default.func,
+    iconDescription: index.default.string,
+    href: index.default.string
   })),
   /**
    * Determines if the action icons are on the top or bottom of the card
    */
-  actionsPlacement: index["default"].oneOf(['top', 'bottom']),
+  actionsPlacement: index.default.oneOf(['top', 'bottom']),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
-  children: index["default"].node,
+  children: index.default.node,
   /**
    * Optional user provided class
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
    */
-  clickZone: index["default"].oneOf(['one', 'two', 'three']),
+  clickZone: index.default.oneOf(['one', 'two', 'three']),
   /**
    * Optional header description
    */
-  description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  description: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
+  /**
+   * Tooltip icon description
+   */
+  iconDescription: index.default.string,
   /**
    * Optional label for the top of the card
    */
-  label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  label: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
   /**
    * Provides the callback for a clickable card
    */
-  onClick: index["default"].func,
+  onClick: index.default.func,
   /**
    * Function that's called from the primary button or action icon
    */
-  onPrimaryButtonClick: index["default"].func,
+  onPrimaryButtonClick: index.default.func,
   /**
    * Function that's called from the secondary button or action icon
    */
-  onSecondaryButtonClick: index["default"].func,
+  onSecondaryButtonClick: index.default.func,
   /**
    * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
    */
   /**@ts-ignore */
-  overflowActions: index["default"].arrayOf(index["default"].shape({
-    id: index["default"].string,
-    itemText: index["default"].string,
-    onClick: index["default"].func,
-    onKeyDown: index["default"].func
+  overflowActions: index.default.arrayOf(index.default.shape({
+    id: index.default.string,
+    itemText: index.default.string,
+    onClick: index.default.func,
+    onKeyDown: index.default.func
   })),
   /**
    * Aria label prop required for OverflowMenu
    */
-  overflowAriaLabel: index["default"].string,
+  overflowAriaLabel: index.default.string,
+  /**
+   * Determines if the primary button is enabled or not
+   */
+  primaryButtonDisabled: index.default.bool,
   /**
    * Optionally specify an href for your Button to become an <a> element
    */
-  primaryButtonHref: index["default"].string,
+  primaryButtonHref: index.default.string,
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
   /**@ts-ignore */
-  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  primaryButtonIcon: index.default.oneOfType([index.default.func, index.default.object]),
   /**
    * Determines if the primary button is on the top or bottom of the card
    */
-  primaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
+  primaryButtonPlacement: index.default.oneOf(['top', 'bottom']),
   /**
    * The text that's displayed in the primary button
    */
   /**@ts-ignore */
-  primaryButtonText: index["default"].node,
+  primaryButtonText: index.default.node,
   /**
    * Optionally specify an href for your Button to become an <a> element
    */
-  secondaryButtonHref: index["default"].string,
+  secondaryButtonHref: index.default.string,
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
   /**@ts-ignore */
-  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  secondaryButtonIcon: index.default.oneOfType([index.default.func, index.default.object]),
   /**
    * Determines if the secondary button is on the top or bottom of the card
    */
-  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
+  secondaryButtonPlacement: index.default.oneOf(['top', 'bottom']),
   /**
    * The text that's displayed in the secondary button
    */
   /**@ts-ignore */
-  secondaryButtonText: index["default"].node,
+  secondaryButtonText: index.default.node,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
    */
-  slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
+  slug: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Title that's displayed at the top of the card
    */
-  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  title: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
   /**
    * Determines title size
    */
-  titleSize: index["default"].oneOf(['default', 'large'])
+  titleSize: index.default.oneOf(['default', 'large'])
 };
 exports.ProductiveCard.displayName = componentName;

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

@@ -1 +1,2 @@
-export { ProductiveCard } from "./ProductiveCard";
+export { ProductiveCard } from './ProductiveCard';
+export type { ProductiveCardProps } from './ProductiveCard';

package/lib/components/RemoveModal/RemoveModal.d.ts

@@ -1,11 +1,11 @@
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
 import { ComposedModal } from '@carbon/react';
-interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
+import React, { ReactNode } from 'react';
+export interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
     /**
      * The content to be displayed in the body of the modal
      */
-    body: string;
+    body: ReactNode;
     /**
      * Optional classname
      */
@@ -82,4 +82,3 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
 export declare let RemoveModal: React.ForwardRefExoticComponent<RemoveModalProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};