carbon-addons-iot-react 2.149.0-next.8 → 2.149.1-next.0

package/es/components/BarChartCard/BarChartCard.js

@@ -8,9 +8,9 @@ import _extends from '@babel/runtime/helpers/extends';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import defaultsDeep from '../../packages/react/node_modules/lodash-es/defaultsDeep.js';
-import isNil from '../../packages/react/node_modules/lodash-es/isNil.js';
-import isEmpty from '../../packages/react/node_modules/lodash-es/isEmpty.js';
+import defaultsDeep from '../../node_modules/lodash-es/defaultsDeep.js';
+import isNil from '../../node_modules/lodash-es/isNil.js';
+import isEmpty from '../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.iterator.js';

package/es/components/BarChartCard/barChartUtils.js

@@ -5,10 +5,10 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import omit from '../../packages/react/node_modules/lodash-es/omit.js';
-import capitalize from '../../packages/react/node_modules/lodash-es/capitalize.js';
-import isEmpty from '../../packages/react/node_modules/lodash-es/isEmpty.js';
-import isNil from '../../packages/react/node_modules/lodash-es/isNil.js';
+import omit from '../../node_modules/lodash-es/omit.js';
+import capitalize from '../../node_modules/lodash-es/capitalize.js';
+import isEmpty from '../../node_modules/lodash-es/isEmpty.js';
+import isNil from '../../node_modules/lodash-es/isNil.js';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.reduce.js';

package/es/components/Card/Card.js

@@ -8,6 +8,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import isEmpty from '../../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
@@ -16,20 +17,22 @@ import 'core-js/modules/es.object.values.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.slice.js';
 import React__default, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
-import { Tooltip, SkeletonText } from 'carbon-components-react';
+import { SkeletonText } from 'carbon-components-react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 import useVisibilityObserver from '../../hooks/useVisibilityObserver.js';
 import { settings } from '../../constants/Settings.js';
-import { CARD_SIZES, CARD_LAYOUTS, ROW_HEIGHT, DASHBOARD_SIZES, CARD_DIMENSIONS, DASHBOARD_BREAKPOINTS, DASHBOARD_COLUMNS, CARD_CONTENT_PADDING, CARD_TITLE_HEIGHT } from '../../constants/LayoutConstants.js';
+import { CARD_SIZES, CARD_LAYOUTS, ROW_HEIGHT, DASHBOARD_SIZES, CARD_DIMENSIONS, DASHBOARD_BREAKPOINTS, DASHBOARD_COLUMNS, CARD_CONTENT_PADDING, CARD_TITLE_HEIGHT, CARD_TYPES } from '../../constants/LayoutConstants.js';
 import { CardPropTypes } from '../../constants/CardPropTypes.js';
 import { getCardMinSize, filterValidAttributes } from '../../utils/componentUtilityFunctions.js';
 import { getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunctions.js';
-import useHasTextOverflow from '../../hooks/useHasTextOverflow.js';
 import { parseValue } from '../DateTimePicker/dateTimePickerUtils.js';
 import useSizeObserver from '../../hooks/useSizeObserver.js';
+import EmptyState from '../EmptyState/EmptyState.js';
+import CardTypeContent from './CardTypeContent.js';
 import CardToolbar from './CardToolbar.js';
+import { CardTitle } from './CardTitle.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -83,51 +86,32 @@ var CardWrapper = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 var CardHeader = function CardHeader(_ref2 // eslint-disable-line react/prop-types
 ) {
   var children = _ref2.children,
-      testId = _ref2.testId;
+      testId = _ref2.testId,
+      hasSubtitle = _ref2.hasSubtitle;
   return (
     /*#__PURE__*/
     React__default.createElement("div", {
       "data-testid": testId,
-      className: "".concat(iotPrefix, "--card--header")
-    }, children)
-  );
-};
-var CardTitle = function CardTitle(_ref3 // eslint-disable-line react/prop-types
-) {
-  var children = _ref3.children,
-      title = _ref3.title,
-      testId = _ref3.testId;
-  return (
-    /*#__PURE__*/
-    React__default.createElement("span", {
-      "data-testid": testId,
-      className: "".concat(iotPrefix, "--card--title"),
-      title: title
+      className: classnames("".concat(iotPrefix, "--card--header"), _defineProperty({}, "".concat(iotPrefix, "--card--header--with-subtitle"), hasSubtitle))
     }, children)
   );
 };
 
 var CardContent = function CardContent(props) {
+  var _classnames3;
+
   var children = props.children,
       dimensions = props.dimensions,
       isExpanded = props.isExpanded,
       className = props.className,
-      testId = props.testId;
-  var height = "".concat(dimensions.y - CARD_TITLE_HEIGHT, "px");
+      testId = props.testId,
+      noPadding = props.noPadding,
+      hasFooter = props.hasFooter;
+  var height = "".concat(dimensions.y - CARD_TITLE_HEIGHT - (hasFooter ? '40' : '0'), "px");
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": testId,
     style: _defineProperty({}, "--card-content-height", height),
-    className: classnames(className, "".concat(iotPrefix, "--card--content"), _defineProperty({}, "".concat(iotPrefix, "--card--content--expanded"), isExpanded))
-  }, children);
-};
-
-var EmptyMessageWrapper = function EmptyMessageWrapper(props) {
-  var children = props.children;
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      '--card-content-padding': "".concat(CARD_CONTENT_PADDING, "px")
-    },
-    className: "".concat(iotPrefix, "--card--empty-message-wrapper")
+    className: classnames(className, "".concat(iotPrefix, "--card--content"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(iotPrefix, "--card--content--expanded"), isExpanded), _defineProperty(_classnames3, "".concat(iotPrefix, "--card__content--no-padding"), noPadding), _classnames3))
   }, children);
 };
 
@@ -177,16 +161,21 @@ CardContent.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }).isRequired,
-  isExpanded: CardPropTypes.isExpanded.isRequired
+  isExpanded: CardPropTypes.isExpanded.isRequired,
+  noPadding: PropTypes.bool,
+  // define the actual card content depending if it has a footer or not
+  hasFooter: PropTypes.bool
 };
 CardContent.defaultProps = {
   children: undefined,
   className: '',
-  testId: 'card-content'
+  testId: 'card-content',
+  noPadding: false,
+  hasFooter: false
 };
-EmptyMessageWrapper.propTypes = {
+({
   children: PropTypes.node.isRequired
-};
+});
 var defaultProps = {
   size: CARD_SIZES.MEDIUM,
   layout: CARD_LAYOUTS.HORIZONTAL,
@@ -252,7 +241,8 @@ var defaultProps = {
     expandLabel: 'Expand to fullscreen',
     overflowMenuDescription: 'Open and close list of options',
     toLabel: 'to',
-    extraActionLabel: 'Action Label'
+    extraActionLabel: 'Action Label',
+    titleTooltipIconDescription: 'Tooltip info icon'
   },
   onMouseDown: undefined,
   onMouseUp: undefined,
@@ -263,12 +253,21 @@ var defaultProps = {
   onBlur: undefined,
   tabIndex: undefined,
   testId: CardWrapper.defaultProps.testId,
+  tooltip: undefined,
+  titleTextTooltip: undefined,
   footerContent: undefined,
-  dateTimeMask: 'YYYY-MM-DD HH:mm'
+  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  padding: 'default',
+  overrides: undefined,
+  type: null,
+  data: null,
+  content: null
 };
 /** Dumb component that renders the card basics */
 
 var Card = function Card(props) {
+  var _overrides$errorMessa, _overrides$errorMessa2, _overrides$errorMessa3;
+
   var size = props.size,
       children = props.children,
       title = props.title,
@@ -276,7 +275,7 @@ var Card = function Card(props) {
       hasTitleWrap = props.hasTitleWrap;
       props.layout;
       var isLoading = props.isLoading,
-      isEmpty = props.isEmpty,
+      isEmptyProp = props.isEmpty,
       isEditable = props.isEditable,
       isExpanded = props.isExpanded,
       isLazyLoading = props.isLazyLoading,
@@ -286,6 +285,7 @@ var Card = function Card(props) {
       hideHeader = props.hideHeader,
       id = props.id,
       tooltip = props.tooltip,
+      titleTextTooltip = props.titleTextTooltip,
       timeRange = props.timeRange,
       timeRangeOptions = props.timeRangeOptions,
       onCardAction = props.onCardAction,
@@ -302,14 +302,20 @@ var Card = function Card(props) {
       CardFooter = props.footerContent,
       dateTimeMask = props.dateTimeMask,
       extraActions = props.extraActions,
-      others = _objectWithoutProperties(props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions"]); // TODO: remove once final version of range prop is supported
+      padding = props.padding,
+      overrides = props.overrides,
+      type = props.type,
+      data = props.data,
+      content = props.content,
+      others = _objectWithoutProperties(props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content"]); // TODO: remove once final version of range prop is supported
 
 
   useEffect(function () {
     if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
       warning(false, 'The Card components availableActions.range is an experimental property and may be subject to change.') ;
     }
-  }, [availableActions]); // Checks size property against new size naming convention and reassigns to closest supported size if necessary.
+  }, [availableActions]);
+  var ErrorMessage = (overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa = overrides.errorMessage) === null || _overrides$errorMessa === void 0 ? void 0 : _overrides$errorMessa.component) || EmptyState; // Checks size property against new size naming convention and reassigns to closest supported size if necessary.
 
   var newSize = getUpdatedCardSize(size);
 
@@ -318,7 +324,10 @@ var Card = function Card(props) {
       cardSize = _useSizeObserver2[0],
       cardRef = _useSizeObserver2[1];
 
-  var isSM = newSize === CARD_SIZES.SMALL;
+  var isSmall = newSize === CARD_SIZES.SMALL || newSize === CARD_SIZES.SMALLWIDE || newSize === CARD_SIZES.SMALLFULL;
+  var isLargeThin = newSize === CARD_SIZES.LARGETHIN;
+  var isMediumThin = newSize === CARD_SIZES.MEDIUMTHIN;
+  var isSmallOrThin = isSmall || isMediumThin || isLargeThin;
   var dimensions = getCardMinSize(breakpoint, newSize, others.dashboardBreakpoints, others.cardDimensions, others.rowHeight, others.dashboardColumns); // Need to cache the default available actions so it doesn't rerender
 
   var mergedAvailableActions = useMemo(function () {
@@ -380,13 +389,16 @@ var Card = function Card(props) {
     });
 
     return childSize;
-  }; // Ensure the title and subtitle have a tooltip only if their text is truncated
+  };
 
+  if (titleTextTooltip && tooltip) {
+    warning(false, 'The props titleTextTooltip and tooltip cannot be combined. Now using titleTextTooltip') ;
+  }
+
+  if (titleTextTooltip && hasTitleWrap) {
+    warning(false, 'The props titleTextTooltip and hasTitleWrap cannot be combined. Now using titleTextTooltip') ;
+  }
 
-  var titleRef = useRef();
-  var subTitleRef = useRef();
-  var hasTitleTooltip = useHasTextOverflow(titleRef, title);
-  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
   var visibilityRef = useRef(null);
 
   var _useVisibilityObserve = useVisibilityObserver(visibilityRef, {
@@ -416,6 +428,9 @@ var Card = function Card(props) {
     dateTimeMask: dateTimeMask,
     extraActions: extraActions
   }) : null;
+  var isSupportedType = type === CARD_TYPES.METER_CHART || type === CARD_TYPES.SPARKLINE_CHART || type === CARD_TYPES.STACKED_AREA_CHART; // validate if the data is empty or prop says it's empty
+
+  var isCardEmpty = isSupportedType && isEmpty(data) || isEmptyProp;
   var card = /*#__PURE__*/React__default.createElement(CardWrapper, _extends({}, others, {
     // you need all of these to support dynamic positioning during edit
     ref: function ref(node) {
@@ -436,45 +451,27 @@ var Card = function Card(props) {
     className: classnames("".concat(iotPrefix, "--card"), className, _defineProperty({}, "".concat(iotPrefix, "--card--resizing"), isResizing))
   }), !hideHeader && /*#__PURE__*/React__default.createElement(CardHeader // TODO: remove deprecated testID prop in v3
   , {
-    testId: "".concat(testID || testId, "-header")
-  }, /*#__PURE__*/React__default.createElement(CardTitle, {
-    title: title // TODO: remove deprecated testID prop in v3
-    ,
-    testId: "".concat(testID || testId, "-title")
-  }, hasTitleTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    "data-testid": "".concat(testID || testId, "-title-tooltip"),
-    ref: titleRef,
-    showIcon: false,
-    triggerClassName: classnames("".concat(iotPrefix, "--card--title--text__overflow"), "".concat(iotPrefix, "--card--title--text"), _defineProperty({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle)),
-    triggerText: title
-  }, title) : /*#__PURE__*/React__default.createElement("div", {
-    ref: titleRef,
-    "data-testid": "".concat(testId, "-title-notip"),
-    className: classnames("".concat(iotPrefix, "--card--title--text"), _defineProperty({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
-  }, title), tooltip && /*#__PURE__*/React__default.createElement(Tooltip, {
-    "data-testid": "".concat(testID || testId, "-tooltip"),
-    triggerId: "card-tooltip-trigger-".concat(id),
-    tooltipId: "card-tooltip-".concat(id),
-    triggerClassName: "".concat(iotPrefix, "--card--header--tooltip"),
-    id: "card-tooltip-".concat(id) // https://github.com/carbon-design-system/carbon/pull/6744
+    testId: "".concat(testID || testId, "-header"),
+    hasSubtitle: !!subtitle
+  }, /*#__PURE__*/React__default.createElement(CardTitle // TODO: remove deprecated testID prop in v3
+  , {
+    id: id,
+    hasTitleWrap: hasTitleWrap,
+    subtitle: subtitle,
+    title: title,
+    titleTextTooltip: titleTextTooltip,
+    infoIconTooltip: tooltip,
+    titleTooltipIconDescription: strings.titleTooltipIconDescription // To fix accessibility violation.
     ,
-    triggerText: ""
-  }, tooltip), !subtitle ? null : hasSubTitleTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    "data-testid": "".concat(testID || testId, "-subtitle"),
-    ref: subTitleRef,
-    showIcon: false,
-    triggerClassName: classnames("".concat(iotPrefix, "--card--subtitle--text"), _defineProperty({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), tooltip)),
-    triggerText: subtitle
-  }, subtitle) : /*#__PURE__*/React__default.createElement("div", {
-    ref: subTitleRef,
-    "data-testid": "".concat(testID || testId, "-subtitle"),
-    className: classnames("".concat(iotPrefix, "--card--subtitle--text"), _defineProperty({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), tooltip))
-  }, subtitle)), cardToolbar), /*#__PURE__*/React__default.createElement(CardContent // TODO: remove deprecated testID prop in v3
+    testId: "".concat(testID || testId)
+  }), cardToolbar), /*#__PURE__*/React__default.createElement(CardContent // TODO: remove deprecated testID prop in v3
   , {
     testId: "".concat(testID || testId, "-content"),
     dimensions: dimensions,
     isExpanded: isExpanded,
-    className: contentClassName
+    className: contentClassName,
+    noPadding: padding === 'none',
+    hasFooter: !!CardFooter
   }, !isVisible && isLazyLoading ? // if not visible don't show anything
   '' : isLoading ? /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -483,9 +480,27 @@ var Card = function Card(props) {
     className: "".concat(iotPrefix, "--card--skeleton-wrapper")
   }, /*#__PURE__*/React__default.createElement(OptimizedSkeletonText, {
     paragraph: true,
-    lineCount: newSize === CARD_SIZES.SMALL || newSize === CARD_SIZES.SMALLWIDE ? 2 : 3,
+    lineCount: isSmallOrThin ? 2 : 3,
     width: "100%"
-  })) : error ? /*#__PURE__*/React__default.createElement(EmptyMessageWrapper, null, newSize === CARD_SIZES.SMALL || newSize === CARD_SIZES.SMALLWIDE ? strings.errorLoadingDataShortLabel : "".concat(strings.errorLoadingDataLabel, " ").concat(error)) : isEmpty && !isEditable ? /*#__PURE__*/React__default.createElement(EmptyMessageWrapper, null, isSM ? strings.noDataShortLabel : strings.noDataLabel) : Array.isArray(children) && typeof (children === null || children === void 0 ? void 0 : children[0]) === 'function' ? // pass the measured size down to the children if it's an render function
+  })) : error ? /*#__PURE__*/React__default.createElement(ErrorMessage, _extends({
+    icon: isSmall ? '' : 'error',
+    title: strings.errorLoadingDataShortLabel,
+    body: error
+  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa2 = overrides.errorMessage) === null || _overrides$errorMessa2 === void 0 ? void 0 : _overrides$errorMessa2.props)) : isCardEmpty && !isEditable ? /*#__PURE__*/React__default.createElement(ErrorMessage, _extends({
+    title: isSmallOrThin ? strings.noDataShortLabel : strings.noDataLabel,
+    icon: isSmall ? '' : 'empty',
+    body: ""
+  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$errorMessa3 = overrides.errorMessage) === null || _overrides$errorMessa3 === void 0 ? void 0 : _overrides$errorMessa3.props)) : isSupportedType ?
+  /*#__PURE__*/
+  // render card content based on supported type
+  // TODO: remove deprecated testID prop in v3
+  React__default.createElement(CardTypeContent, {
+    testId: testID || testId,
+    isExpanded: isExpanded,
+    type: type,
+    data: data,
+    content: content
+  }) : Array.isArray(children) && typeof (children === null || children === void 0 ? void 0 : children[0]) === 'function' ? // pass the measured size down to the children if it's an render function
   [// first option is a function
   children === null || children === void 0 ? void 0 : children[0](getChildSize(cardSize, title), _objectSpread({
     cardToolbar: cardToolbar
@@ -652,7 +667,7 @@ Card.__docgenInfo = {
     },
     "i18n": {
       "defaultValue": {
-        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n}",
+        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n  extraActionLabel: 'Action Label',\n  titleTooltipIconDescription: 'Tooltip info icon',\n}",
         "computed": false
       },
       "required": false
@@ -720,6 +735,20 @@ Card.__docgenInfo = {
       },
       "required": false
     },
+    "tooltip": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
+    "titleTextTooltip": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "footerContent": {
       "defaultValue": {
         "value": "undefined",
@@ -733,6 +762,41 @@ Card.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "padding": {
+      "defaultValue": {
+        "value": "'default'",
+        "computed": false
+      },
+      "required": false
+    },
+    "overrides": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "data": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "content": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]
@@ -742,11 +806,6 @@ CardHeader.__docgenInfo = {
   "methods": [],
   "displayName": "CardHeader"
 };
-CardTitle.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "CardTitle"
-};
 
 export default Card;
-export { CardHeader, CardTitle, defaultProps };
+export { CardHeader, defaultProps };

package/es/components/Card/CardRangePicker.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import isNil from '../../packages/react/node_modules/lodash-es/isNil.js';
+import isNil from '../../node_modules/lodash-es/isNil.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.object.keys.js';

package/es/components/Card/CardTitle.js

@@ -0,0 +1,187 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default, { useRef } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'carbon-components-react';
+import useHasTextOverflow from '../../hooks/useHasTextOverflow.js';
+import { settings } from '../../constants/Settings.js';
+
+var iotPrefix = settings.iotPrefix;
+var propTypes = {
+  id: PropTypes.string.isRequired,
+
+  /** Adds an info icon after the title that when clicked shows a tooltip with this content.
+   * Cannot be used together with the tooltipDefinition prop
+   */
+  infoIconTooltip: PropTypes.element,
+  // Allows the title to wrap over two rows
+  hasTitleWrap: PropTypes.bool.isRequired,
+  subtitle: PropTypes.string,
+  testId: PropTypes.string.isRequired,
+  title: PropTypes.string,
+
+  /** Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.
+   * Cannot be used together with the tooltip prop or the or the hasTitleWrap prop.
+   */
+  titleTextTooltip: PropTypes.element,
+  titleTooltipIconDescription: PropTypes.string.isRequired
+};
+var defaultProps = {
+  infoIconTooltip: undefined,
+  subtitle: undefined,
+  title: undefined,
+  titleTextTooltip: undefined
+};
+var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
+) {
+  var id = _ref.id,
+      hasTitleWrap = _ref.hasTitleWrap,
+      infoIconTooltip = _ref.infoIconTooltip,
+      subtitle = _ref.subtitle,
+      testId = _ref.testId,
+      title = _ref.title,
+      titleTextTooltip = _ref.titleTextTooltip,
+      titleTooltipIconDescription = _ref.titleTooltipIconDescription;
+  var titleRef = useRef();
+  var subTitleRef = useRef();
+  var truncatesTitle = useHasTextOverflow(titleRef, title);
+  var hasExternalTitleTextTooltip = titleTextTooltip;
+  var hasTitleTooltipFromTruncation = truncatesTitle && !titleTextTooltip;
+  var hasInfoIconTooltip = infoIconTooltip && !hasExternalTitleTextTooltip;
+  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
+
+  var renderMainTitle = function renderMainTitle() {
+    var _classnames;
+
+    return hasTitleTooltipFromTruncation || hasExternalTitleTextTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
+      autoOrientation: true,
+      "data-testid": "".concat(testId, "-title-tooltip"),
+      ref: titleRef,
+      showIcon: false,
+      triggerClassName: classnames("".concat(iotPrefix, "--card--title--text__overflow"), "".concat(iotPrefix, "--card--title--text"), (_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle && !hasExternalTitleTextTooltip), _defineProperty(_classnames, "".concat(iotPrefix, "--card-title__title-text--has-title-text-tooltip"), hasExternalTitleTextTooltip), _classnames)),
+      triggerText: title
+    }, hasExternalTitleTextTooltip ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, truncatesTitle && /*#__PURE__*/React__default.createElement("p", {
+      "data-testid": "".concat(testId, "-title-tooltip-full-title"),
+      className: "".concat(iotPrefix, "--card-title__title-text-tooltip-full-title")
+    }, title), /*#__PURE__*/React__default.createElement("div", {
+      "data-testid": "".concat(testId, "-title-tooltip-conten-node"),
+      className: "".concat(iotPrefix, "--card-title__title-text-tooltip-content")
+    }, titleTextTooltip)) : title) : /*#__PURE__*/React__default.createElement("div", {
+      ref: titleRef,
+      "data-testid": "".concat(testId, "-title-notip"),
+      className: classnames("".concat(iotPrefix, "--card--title--text"), _defineProperty({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
+    }, title);
+  };
+
+  var renderSubTitle = function renderSubTitle() {
+    return !subtitle ? null : hasSubTitleTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
+      "data-testid": "".concat(testId, "-subtitle"),
+      ref: subTitleRef,
+      showIcon: false,
+      triggerClassName: classnames("".concat(iotPrefix, "--card--subtitle--text"), _defineProperty({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), hasInfoIconTooltip)),
+      triggerText: subtitle
+    }, subtitle) : /*#__PURE__*/React__default.createElement("div", {
+      ref: subTitleRef,
+      "data-testid": "".concat(testId, "-subtitle"),
+      className: classnames("".concat(iotPrefix, "--card--subtitle--text"), _defineProperty({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), hasInfoIconTooltip))
+    }, subtitle);
+  };
+
+  return /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "".concat(testId, "-title"),
+    className: "".concat(iotPrefix, "--card--title"),
+    title: hasExternalTitleTextTooltip ? '' : title
+  }, renderMainTitle(), hasInfoIconTooltip && /*#__PURE__*/React__default.createElement(Tooltip, {
+    "data-testid": "".concat(testId, "-tooltip"),
+    triggerId: "card-tooltip-trigger-".concat(id),
+    tooltipId: "card-tooltip-".concat(id),
+    triggerClassName: "".concat(iotPrefix, "--card--header--tooltip"),
+    id: "card-tooltip-".concat(id) // https://github.com/carbon-design-system/carbon/pull/6744
+    ,
+    triggerText: "",
+    iconDescription: titleTooltipIconDescription
+  }, infoIconTooltip), renderSubTitle());
+};
+CardTitle.propTypes = propTypes;
+CardTitle.defaultProps = defaultProps;
+CardTitle.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CardTitle",
+  "props": {
+    "infoIconTooltip": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "type": {
+        "name": "element"
+      },
+      "required": false,
+      "description": "Adds an info icon after the title that when clicked shows a tooltip with this content.\nCannot be used together with the tooltipDefinition prop"
+    },
+    "subtitle": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "title": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "titleTextTooltip": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "type": {
+        "name": "element"
+      },
+      "required": false,
+      "description": "Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.\nCannot be used together with the tooltip prop or the or the hasTitleWrap prop."
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    },
+    "hasTitleWrap": {
+      "type": {
+        "name": "bool"
+      },
+      "required": true,
+      "description": ""
+    },
+    "testId": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    },
+    "titleTooltipIconDescription": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    }
+  }
+};
+
+export { CardTitle };

package/es/components/Card/CardToolbar.js

@@ -6,8 +6,8 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _extends from '@babel/runtime/helpers/extends';
-import keyBy from '../../packages/react/node_modules/lodash-es/keyBy.js';
-import omit from '../../packages/react/node_modules/lodash-es/omit.js';
+import keyBy from '../../node_modules/lodash-es/keyBy.js';
+import omit from '../../node_modules/lodash-es/omit.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.concat.js';