carbon-addons-iot-react 2.152.0-next.13 → 2.152.0-next.14

package/es/components/Card/CardTitle.js

@@ -71,6 +71,7 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
 
   var _usePopoverPositionin = usePopoverPositioning({
     direction: 'bottom',
+    defaultAlignment: 'center',
     menuOffset: getTooltipMenuOffset,
     useAutoPositioning: true,
     isOverflowMenu: true // Needed to preserve default direction (bottom)
@@ -78,7 +79,9 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
   }),
       _usePopoverPositionin2 = _slicedToArray(_usePopoverPositionin, 2),
       calculateMenuOffset = _usePopoverPositionin2[0],
-      adjustedDirection = _usePopoverPositionin2[1].adjustedDirection;
+      _usePopoverPositionin3 = _usePopoverPositionin2[1],
+      adjustedDirection = _usePopoverPositionin3.adjustedDirection,
+      adjustedAlignment = _usePopoverPositionin3.adjustedAlignment;
 
   var _useState = useState({
     title: false,
@@ -154,7 +157,7 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
     var _classnames;
 
     return hasTitleTooltipFromTruncation || hasExternalTitleTextTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
-      align: "center",
+      align: adjustedAlignment,
       menuOffset: calculateMenuOffset,
       direction: adjustedDirection,
       "data-testid": "".concat(testId, "-title-tooltip"),
@@ -179,6 +182,9 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
 
   var renderSubTitle = function renderSubTitle() {
     return !subtitle ? null : hasSubTitleTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
+      align: adjustedAlignment,
+      menuOffset: calculateMenuOffset,
+      direction: adjustedDirection,
       "data-testid": "".concat(testId, "-subtitle"),
       ref: subTitleRef,
       showIcon: false,

package/es/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -272,7 +272,7 @@ var defaultProps = {
 };
 
 var DateTimePicker = function DateTimePicker(_ref) {
-  var _classnames2, _classnames4, _style$zIndex;
+  var _classnames, _classnames2, _classnames4, _style$zIndex;
 
   var testId = _ref.testId,
       defaultValue = _ref.defaultValue,
@@ -847,7 +847,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     "data-testid": testId,
     id: "".concat(id, "-").concat(iotPrefix, "--date-time-pickerv2__wrapper"),
-    className: classnames("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), _defineProperty({}, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled)),
+    className: classnames("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), (_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled), _defineProperty(_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--invalid"), invalidState), _classnames)),
     style: {
       '--wrapper-width': hasIconOnly ? '3rem' : '20rem'
     },
@@ -869,7 +869,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onMouseLeave: toggleTooltip,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames((_classnames2 = {}, _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _classnames2))
+    className: classnames((_classnames2 = {}, _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _classnames2))
   }, !hasIconOnly ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "".concat(testId, "__field"),
     className: "".concat(iotPrefix, "--date-time-picker__field")

package/es/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js

@@ -253,7 +253,7 @@ var defaultProps = {
 };
 
 var DateTimePicker = function DateTimePicker(_ref) {
-  var _classnames2, _classnames4;
+  var _classnames, _classnames2, _classnames4;
 
   var testId = _ref.testId,
       defaultValue = _ref.defaultValue,
@@ -706,7 +706,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     "data-testid": testId,
     id: "".concat(id, "-").concat(iotPrefix, "--date-time-pickerv2__wrapper"),
-    className: classnames("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), _defineProperty({}, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled)),
+    className: classnames("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), (_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled), _defineProperty(_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--invalid"), invalidState), _classnames)),
     style: {
       '--wrapper-width': hasIconOnly ? '3rem' : '20rem'
     },
@@ -728,7 +728,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onMouseLeave: toggleTooltip,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames((_classnames2 = {}, _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _classnames2))
+    className: classnames((_classnames2 = {}, _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _defineProperty(_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _classnames2))
   }, !hasIconOnly ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "".concat(testId, "__field"),
     className: "".concat(iotPrefix, "--date-time-picker__field")

package/es/components/Table/Table.js

@@ -37,6 +37,7 @@ import { useLangDirection } from 'use-lang-direction';
 import warning from 'warning';
 import { defaultFunction } from '../../utils/componentUtilityFunctions.js';
 import { settings } from '../../constants/Settings.js';
+import { WrapCellTextPropTypes } from '../../constants/SharedPropTypes.js';
 import FilterTags from '../FilterTags/FilterTags.js';
 import { RuleGroupPropType } from '../RuleBuilder/RuleBuilderPropTypes.js';
 import deprecate$1 from '../../internal/experimental.js';
@@ -158,8 +159,9 @@ var propTypes = {
      * always - Wrap if needed for all table column configurations
      * never - Tables with dynamic columns widths grow larger and tables with fixed or resizable columns truncate.
      * alwaysTruncate - Always truncate if needed for all table column configurations
+     * expand - Expand to fit text width (by horizontal scrollbar) for table with fixed columns
      */
-    wrapCellText: PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate']),
+    wrapCellText: WrapCellTextPropTypes,
 
     /** use white-space: pre; css when true */
     preserveCellWhiteSpace: PropTypes.bool
@@ -708,7 +710,7 @@ var Table = function Table(props) {
       forceUpdateCellTextWidth = _useState4[1];
 
   var useCellTextTruncate = useMemo(function () {
-    return options ? options.wrapCellText === 'alwaysTruncate' || options.wrapCellText !== 'always' && (options.hasResize && !options.useAutoTableLayoutForResize || columns.some(function (col) {
+    return options ? options.wrapCellText === 'alwaysTruncate' || options.wrapCellText !== 'always' && options.wrapCellText !== 'expand' && (options.hasResize && !options.useAutoTableLayoutForResize || columns.some(function (col) {
       return col.hasOwnProperty('width');
     })) : undefined;
   }, [options, columns]);
@@ -1318,21 +1320,9 @@ Table.__docgenInfo = {
             "required": false
           },
           "wrapCellText": {
-            "name": "enum",
-            "value": [{
-              "value": "'always'",
-              "computed": false
-            }, {
-              "value": "'never'",
-              "computed": false
-            }, {
-              "value": "'auto'",
-              "computed": false
-            }, {
-              "value": "'alwaysTruncate'",
-              "computed": false
-            }],
-            "description": "auto - Wrap for tables with dynamic columns widths and truncate for tables with fixed or resizable columns\nalways - Wrap if needed for all table column configurations\nnever - Tables with dynamic columns widths grow larger and tables with fixed or resizable columns truncate.\nalwaysTruncate - Always truncate if needed for all table column configurations",
+            "name": "custom",
+            "raw": "WrapCellTextPropTypes",
+            "description": "auto - Wrap for tables with dynamic columns widths and truncate for tables with fixed or resizable columns\nalways - Wrap if needed for all table column configurations\nnever - Tables with dynamic columns widths grow larger and tables with fixed or resizable columns truncate.\nalwaysTruncate - Always truncate if needed for all table column configurations\nexpand - Expand to fit text width (by horizontal scrollbar) for table with fixed columns",
             "required": false
           },
           "preserveCellWhiteSpace": {

package/es/components/Table/TableBody/TableBody.js

@@ -22,6 +22,7 @@ import PropTypes from 'prop-types';
 import { TableBody as TableBody$1 } from 'carbon-components-react';
 import { TableRowsPropTypes, ExpandedRowsPropTypes, TableColumnsPropTypes, RowActionsStatePropTypes } from '../TablePropTypes.js';
 import deprecate from '../../../internal/deprecate.js';
+import { WrapCellTextPropTypes } from '../../../constants/SharedPropTypes.js';
 import { tableTraverser, findRow } from '../tableUtilities.js';
 import TableBodyRowRenderer from './TableBodyRowRenderer.js';
 
@@ -74,7 +75,7 @@ var propTypes = {
     hasSingleNestedHierarchy: PropTypes.bool
   })]),
   hasRowActions: PropTypes.bool,
-  wrapCellText: PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate']).isRequired,
+  wrapCellText: WrapCellTextPropTypes.isRequired,
   truncateCellText: PropTypes.bool.isRequired,
 
   /** the current state of the row actions */
@@ -776,22 +777,10 @@ TableBody.__docgenInfo = {
     },
     "wrapCellText": {
       "type": {
-        "name": "enum",
-        "value": [{
-          "value": "'always'",
-          "computed": false
-        }, {
-          "value": "'never'",
-          "computed": false
-        }, {
-          "value": "'auto'",
-          "computed": false
-        }, {
-          "value": "'alwaysTruncate'",
-          "computed": false
-        }]
+        "name": "custom",
+        "raw": "WrapCellTextPropTypes.isRequired"
       },
-      "required": true,
+      "required": false,
       "description": ""
     },
     "truncateCellText": {

package/es/components/Table/TableBody/TableBodyRow/TableBodyRow.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import { TableCell, TableRow, Checkbox, RadioButton } from 'carbon-components-react';
 import classnames from 'classnames';
 import { settings } from '../../../../constants/Settings.js';
+import { WrapCellTextPropTypes } from '../../../../constants/SharedPropTypes.js';
 import RowActionsCell from '../RowActionsCell/RowActionsCell.js';
 import TableCellRenderer from '../../TableCellRenderer/TableCellRenderer.js';
 import { TableColumnsPropTypes, RowActionPropTypes, RowActionErrorPropTypes } from '../../TablePropTypes.js';
@@ -63,7 +64,7 @@ var propTypes = {
     })]),
     hasRowActions: PropTypes.bool,
     shouldExpandOnRowClick: PropTypes.bool,
-    wrapCellText: PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate']).isRequired,
+    wrapCellText: WrapCellTextPropTypes.isRequired,
     truncateCellText: PropTypes.bool.isRequired,
 
     /** use white-space: pre; css when true */
@@ -185,7 +186,7 @@ var defaultProps = {
 };
 
 var TableBodyRow = function TableBodyRow(_ref) {
-  var _classnames4, _classnames5, _classnames6;
+  var _classnames5, _classnames6, _classnames7;
 
   var id = _ref.id,
       tableId = _ref.tableId,
@@ -311,7 +312,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
       className: classnames("data-table-".concat(align), (_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell--truncate"), truncateCellText), _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell--sortable"), sortable), _classnames)),
       width: initialColumnWidth
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(iotPrefix, "--table__cell__offset"),
+      className: classnames("".concat(iotPrefix, "--table__cell__offset"), _defineProperty({}, "".concat(iotPrefix, "--table__cell__offset__expand"), wrapCellText === 'expand')),
       style: {
         '--row-nesting-offset': "".concat(offset, "px")
       }
@@ -399,7 +400,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
   }, rowDetails))) : /*#__PURE__*/React__default.createElement(TableExpandRow, {
     key: id,
     expandHeaderId: "".concat(tableId, "-expand"),
-    className: classnames("".concat(iotPrefix, "--expandable-tablerow"), (_classnames4 = {}, _defineProperty(_classnames4, "".concat(iotPrefix, "--expandable-tablerow--parent"), hasRowNesting && (hasRowNesting === null || hasRowNesting === void 0 ? void 0 : hasRowNesting.hasSingleNestedHierarchy) && nestingChildCount > 0), _defineProperty(_classnames4, "".concat(iotPrefix, "--expandable-tablerow--childless"), hasRowNesting && nestingChildCount === 0), _defineProperty(_classnames4, "".concat(iotPrefix, "--expandable-tablerow--indented"), parseInt(nestingOffset, 10) > 0), _defineProperty(_classnames4, "".concat(iotPrefix, "--expandable-tablerow--singly-selected"), hasRowSelection === 'single' && isSelected && !useRadioButtonSingleSelect), _defineProperty(_classnames4, "".concat(iotPrefix, "--expandable-tablerow--last-child"), isLastChild), _classnames4)),
+    className: classnames("".concat(iotPrefix, "--expandable-tablerow"), (_classnames5 = {}, _defineProperty(_classnames5, "".concat(iotPrefix, "--expandable-tablerow--parent"), hasRowNesting && (hasRowNesting === null || hasRowNesting === void 0 ? void 0 : hasRowNesting.hasSingleNestedHierarchy) && nestingChildCount > 0), _defineProperty(_classnames5, "".concat(iotPrefix, "--expandable-tablerow--childless"), hasRowNesting && nestingChildCount === 0), _defineProperty(_classnames5, "".concat(iotPrefix, "--expandable-tablerow--indented"), parseInt(nestingOffset, 10) > 0), _defineProperty(_classnames5, "".concat(iotPrefix, "--expandable-tablerow--singly-selected"), hasRowSelection === 'single' && isSelected && !useRadioButtonSingleSelect), _defineProperty(_classnames5, "".concat(iotPrefix, "--expandable-tablerow--last-child"), isLastChild), _classnames5)),
     "data-row-nesting": hasRowNesting,
     "data-child-count": nestingChildCount,
     "data-nesting-offset": nestingOffset,
@@ -430,7 +431,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
     rowId: id,
     langDir: langDir
   }, tableCells) : hasRowSelection === 'single' && isSelected ? /*#__PURE__*/React__default.createElement(TableRow, {
-    className: classnames("".concat(iotPrefix, "--table__row"), (_classnames5 = {}, _defineProperty(_classnames5, "".concat(iotPrefix, "--table__row--singly-selected"), isSelected && !useRadioButtonSingleSelect), _defineProperty(_classnames5, "".concat(iotPrefix, "--table__row--background"), isSelected), _classnames5)),
+    className: classnames("".concat(iotPrefix, "--table__row"), (_classnames6 = {}, _defineProperty(_classnames6, "".concat(iotPrefix, "--table__row--singly-selected"), isSelected && !useRadioButtonSingleSelect), _defineProperty(_classnames6, "".concat(iotPrefix, "--table__row--background"), isSelected), _classnames6)),
     key: id,
     onClick: function onClick() {
       if (isSelectable !== false) {
@@ -442,7 +443,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
       }
     }
   }, tableCells) : /*#__PURE__*/React__default.createElement(TableRow, {
-    className: classnames("".concat(iotPrefix, "--table__row"), (_classnames6 = {}, _defineProperty(_classnames6, "".concat(iotPrefix, "--table__row--unselectable"), isSelectable === false), _defineProperty(_classnames6, "".concat(iotPrefix, "--table__row--selectable"), isSelectable !== false), _defineProperty(_classnames6, "".concat(iotPrefix, "--table__row--editing"), isEditMode), _defineProperty(_classnames6, "".concat(iotPrefix, "--table__row--selected"), isSelected), _classnames6)),
+    className: classnames("".concat(iotPrefix, "--table__row"), (_classnames7 = {}, _defineProperty(_classnames7, "".concat(iotPrefix, "--table__row--unselectable"), isSelectable === false), _defineProperty(_classnames7, "".concat(iotPrefix, "--table__row--selectable"), isSelectable !== false), _defineProperty(_classnames7, "".concat(iotPrefix, "--table__row--editing"), isEditMode), _defineProperty(_classnames7, "".concat(iotPrefix, "--table__row--selected"), isSelected), _classnames7)),
     key: id,
     onClick: function onClick() {
       if (isSelectable !== false) {
@@ -636,20 +637,8 @@ TableBodyRow.__docgenInfo = {
             "required": false
           },
           "wrapCellText": {
-            "name": "enum",
-            "value": [{
-              "value": "'always'",
-              "computed": false
-            }, {
-              "value": "'never'",
-              "computed": false
-            }, {
-              "value": "'auto'",
-              "computed": false
-            }, {
-              "value": "'alwaysTruncate'",
-              "computed": false
-            }],
+            "name": "custom",
+            "raw": "WrapCellTextPropTypes.isRequired",
             "required": true
           },
           "truncateCellText": {

package/es/components/Table/TableBody/TableBodyRowRenderer.js

@@ -19,6 +19,7 @@ import 'core-js/modules/es.array.map.js';
 import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import useVisibilityObserver from '../../../hooks/useVisibilityObserver.js';
+import { WrapCellTextPropTypes } from '../../../constants/SharedPropTypes.js';
 import { ExpandedRowsPropTypes, TableColumnsPropTypes, RowActionsStatePropTypes, TableRowPropTypes, TableRowsPropTypes } from '../TablePropTypes.js';
 import TableBodyRow from './TableBodyRow/TableBodyRow.js';
 import TableBodyLoadMoreRow from './TableBodyLoadMoreRow/TableBodyLoadMoreRow.js';
@@ -74,7 +75,7 @@ var propTypes = {
     hasSingleNestedHierarchy: PropTypes.bool
   })]),
   hasRowActions: PropTypes.bool,
-  wrapCellText: PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate']).isRequired,
+  wrapCellText: WrapCellTextPropTypes.isRequired,
   truncateCellText: PropTypes.bool.isRequired,
 
   /** the current state of the row actions */
@@ -797,22 +798,10 @@ TableBodyRowRenderer.__docgenInfo = {
     },
     "wrapCellText": {
       "type": {
-        "name": "enum",
-        "value": [{
-          "value": "'always'",
-          "computed": false
-        }, {
-          "value": "'never'",
-          "computed": false
-        }, {
-          "value": "'auto'",
-          "computed": false
-        }, {
-          "value": "'alwaysTruncate'",
-          "computed": false
-        }]
+        "name": "custom",
+        "raw": "WrapCellTextPropTypes.isRequired"
       },
-      "required": true,
+      "required": false,
       "description": ""
     },
     "truncateCellText": {

package/es/components/Table/TableCellRenderer/TableCellRenderer.js

@@ -9,11 +9,12 @@ import classnames from 'classnames';
 import { TooltipDefinition, Tooltip } from 'carbon-components-react';
 import warning from 'warning';
 import { settings } from '../../../constants/Settings.js';
+import { WrapCellTextPropTypes } from '../../../constants/SharedPropTypes.js';
 
 var iotPrefix = settings.iotPrefix;
 var propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.bool, PropTypes.object, PropTypes.array]),
-  wrapText: PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate']).isRequired,
+  wrapText: WrapCellTextPropTypes.isRequired,
   truncateCellText: PropTypes.bool.isRequired,
   allowTooltip: PropTypes.bool,
 
@@ -74,7 +75,7 @@ var TableCellRenderer = function TableCellRenderer(_ref) {
       filterFunction = _ref.filterFunction,
       preserveCellWhiteSpace = _ref.preserveCellWhiteSpace;
   var mySpanRef = /*#__PURE__*/React__default.createRef();
-  var myClasses = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell-text--truncate"), wrapText !== 'always' && truncateCellText), _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell-text--no-wrap"), wrapText === 'never'), _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell-text--preserve"), preserveCellWhiteSpace), _classnames));
+  var myClasses = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell-text--truncate"), wrapText !== 'always' && truncateCellText), _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell-text--no-wrap"), wrapText === 'never' || wrapText === 'expand'), _defineProperty(_classnames, "".concat(iotPrefix, "--table__cell-text--preserve"), preserveCellWhiteSpace), _classnames));
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -254,22 +255,10 @@ TableCellRenderer.__docgenInfo = {
     },
     "wrapText": {
       "type": {
-        "name": "enum",
-        "value": [{
-          "value": "'always'",
-          "computed": false
-        }, {
-          "value": "'never'",
-          "computed": false
-        }, {
-          "value": "'auto'",
-          "computed": false
-        }, {
-          "value": "'alwaysTruncate'",
-          "computed": false
-        }]
+        "name": "custom",
+        "raw": "WrapCellTextPropTypes.isRequired"
       },
-      "required": true,
+      "required": false,
       "description": ""
     },
     "truncateCellText": {

package/es/components/Table/TableHead/TableHead.js

@@ -29,6 +29,7 @@ import { TableColumnsPropTypes, TableColumnGroupPropType, ActiveTableToolbarProp
 import TableCellRenderer from '../TableCellRenderer/TableCellRenderer.js';
 import { tableTranslateWithId } from '../../../utils/componentUtilityFunctions.js';
 import { settings } from '../../../constants/Settings.js';
+import { WrapCellTextPropTypes } from '../../../constants/SharedPropTypes.js';
 import { OverflowMenu } from '../../OverflowMenu/index.js';
 import { usePrevious } from '../../../hooks/usePrevious.js';
 import deprecate from '../../../internal/deprecate.js';
@@ -58,7 +59,7 @@ var propTypes = {
       /** If the hierarchy only has 1 nested level of children */
       hasSingleNestedHierarchy: PropTypes.bool
     })]),
-    wrapCellText: PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate']).isRequired,
+    wrapCellText: WrapCellTextPropTypes.isRequired,
     truncateCellText: PropTypes.bool.isRequired,
     hasMultiSort: PropTypes.bool,
     useAutoTableLayoutForResize: PropTypes.bool,
@@ -699,20 +700,8 @@ TableHead.__docgenInfo = {
             "required": false
           },
           "wrapCellText": {
-            "name": "enum",
-            "value": [{
-              "value": "'always'",
-              "computed": false
-            }, {
-              "value": "'never'",
-              "computed": false
-            }, {
-              "value": "'auto'",
-              "computed": false
-            }, {
-              "value": "'alwaysTruncate'",
-              "computed": false
-            }],
+            "name": "custom",
+            "raw": "WrapCellTextPropTypes.isRequired",
             "required": true
           },
           "truncateCellText": {

package/es/constants/SharedPropTypes.js

@@ -151,5 +151,6 @@ var CarbonIconPropType = PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 var HtmlElementRefProp = PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
   current: PropTypes.oneOfType([PropTypes.object])
 })]);
+var WrapCellTextPropTypes = PropTypes.oneOf(['always', 'never', 'auto', 'alwaysTruncate', 'expand']);
 
-export { ButtonIconPropType, CarbonIconPropType, ColorPropType, HotspotContentPropTypes, HotspotIconPropType, HotspotPropTypes, HtmlElementRefProp, OverridePropTypes, SvgPropType };
+export { ButtonIconPropType, CarbonIconPropType, ColorPropType, HotspotContentPropTypes, HotspotIconPropType, HotspotPropTypes, HtmlElementRefProp, OverridePropTypes, SvgPropType, WrapCellTextPropTypes };

package/es/hooks/usePopoverPositioning.js

@@ -46,6 +46,36 @@ var isOffscreen = function isOffscreen(menuBody, menuDirection, menuButton
   var L = offLeft ? 'left' : '';
   return [T, R, B, L].filter(Boolean).join('-');
 };
+/**
+ * This is used as the callback for menuOffset ONLY on Tooltips. It's needed due to
+ * truncation that might happen on Tooltip trigger, therefore we need to consider
+ * right position of the trigger as well. This function is used as an enhancement for
+ * the isOffscreen method.
+ *
+ * @param {HTMLElement} menuBody The underlying carbon FloatingMenu element
+ * @param {string} menuDirection The direction prop
+ * @param {HTMLElement} menuButton The button triggering the menu
+ * @returns {string} 'start', 'center' or 'end'
+ */
+
+
+var getTooltipAlignment = function getTooltipAlignment(menuBody, menuDirection, menuButton) {
+  var buttonRect = menuButton.getBoundingClientRect();
+  var tooltipRect = menuBody.getBoundingClientRect();
+  var windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  var triggerCenter = (buttonRect.left + buttonRect.right) / 2;
+  var tooltipCenter = tooltipRect.width / 2;
+
+  if (triggerCenter - tooltipCenter < 0) {
+    return 'start';
+  }
+
+  if (triggerCenter + tooltipCenter > windowWidth) {
+    return 'end';
+  }
+
+  return 'center';
+};
 /**
  * Given a subset of props from the Tooltip, OverflowMenu, or FlyoutMenu. This hook returns a decorator
  * function around the original menuOffset function. It determines if the element overflows using that
@@ -63,22 +93,29 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
       _ref$isOverflowMenu = _ref.isOverflowMenu,
       isOverflowMenu = _ref$isOverflowMenu === void 0 ? false : _ref$isOverflowMenu,
       _ref$useAutoPositioni = _ref.useAutoPositioning,
-      useAutoPositioning = _ref$useAutoPositioni === void 0 ? true : _ref$useAutoPositioni;
+      useAutoPositioning = _ref$useAutoPositioni === void 0 ? true : _ref$useAutoPositioni,
+      _ref$defaultAlignment = _ref.defaultAlignment,
+      defaultAlignment = _ref$defaultAlignment === void 0 ? 'center' : _ref$defaultAlignment;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       adjustedDirection = _React$useState2[0],
       setAdjustedDirection = _React$useState2[1];
 
-  var _React$useState3 = React.useState(),
+  var _React$useState3 = React.useState(defaultAlignment),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      adjustedFlipped = _React$useState4[0],
-      setAdjustedFlipped = _React$useState4[1];
+      adjustedAlignment = _React$useState4[0],
+      setAdjustedAlignment = _React$useState4[1];
 
-  var _React$useState5 = React.useState({}),
+  var _React$useState5 = React.useState(),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      flyoutAlignment = _React$useState6[0].flyoutAlignment,
-      setDirections = _React$useState6[1];
+      adjustedFlipped = _React$useState6[0],
+      setAdjustedFlipped = _React$useState6[1];
+
+  var _React$useState7 = React.useState({}),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      flyoutAlignment = _React$useState8[0].flyoutAlignment,
+      setDirections = _React$useState8[1];
 
   var previousDirection = React.useRef();
   var langDir = useLangDirection();
@@ -176,10 +213,12 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
    * be adjusted to `right-start`.
    */
 
-  var fixOverflow = React.useCallback(function (overflow, menuOffsetArgs) {
+  var fixOverflow = React.useCallback(function (overflow, menuOffsetArgs, alignment) {
     var _menuOffsetArgs = _slicedToArray(menuOffsetArgs, 1),
         tooltipElement = _menuOffsetArgs[0];
 
+    setAdjustedAlignment(alignment);
+
     switch (overflow) {
       case 'top':
         if (flyoutAlignment) {
@@ -306,7 +345,9 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
     } // determine if the element is off-screen.
 
 
-    var overflow = isOffscreen.apply(void 0, args.concat([defaultOffset])); // if it's offscreen in a direction we can fix, do so
+    var overflow = isOffscreen.apply(void 0, args.concat([defaultOffset])); // determine if the element has new alignment
+
+    var alignment = getTooltipAlignment.apply(void 0, args); // if it's offscreen in a direction we can fix, do so
     // otherwise leave it be. ie. 'top-left' is fixable, but
     // a large element with 'top-right-left' wouldn't be.
 
@@ -319,7 +360,7 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
       case 'right':
       case 'bottom':
       case 'left':
-        return fixOverflow(overflow, [].concat(args));
+        return fixOverflow(overflow, [].concat(args), alignment);
 
       default:
         return defaultOffset;
@@ -333,7 +374,8 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
 
   return [calculateMenuOffset, {
     adjustedDirection: adjustedDirection,
-    adjustedFlipped: adjustedFlipped
+    adjustedFlipped: adjustedFlipped,
+    adjustedAlignment: adjustedAlignment
   }];
 };
 

package/lib/components/Card/CardTitle.js

@@ -83,6 +83,7 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
 
   var _usePopoverPositionin = usePopoverPositioning.usePopoverPositioning({
     direction: 'bottom',
+    defaultAlignment: 'center',
     menuOffset: index.getTooltipMenuOffset,
     useAutoPositioning: true,
     isOverflowMenu: true // Needed to preserve default direction (bottom)
@@ -90,7 +91,9 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
   }),
       _usePopoverPositionin2 = _slicedToArray__default['default'](_usePopoverPositionin, 2),
       calculateMenuOffset = _usePopoverPositionin2[0],
-      adjustedDirection = _usePopoverPositionin2[1].adjustedDirection;
+      _usePopoverPositionin3 = _usePopoverPositionin2[1],
+      adjustedDirection = _usePopoverPositionin3.adjustedDirection,
+      adjustedAlignment = _usePopoverPositionin3.adjustedAlignment;
 
   var _useState = React.useState({
     title: false,
@@ -166,7 +169,7 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
     var _classnames;
 
     return hasTitleTooltipFromTruncation || hasExternalTitleTextTooltip ? /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.Tooltip, {
-      align: "center",
+      align: adjustedAlignment,
       menuOffset: calculateMenuOffset,
       direction: adjustedDirection,
       "data-testid": "".concat(testId, "-title-tooltip"),
@@ -191,6 +194,9 @@ var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
 
   var renderSubTitle = function renderSubTitle() {
     return !subtitle ? null : hasSubTitleTooltip ? /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.Tooltip, {
+      align: adjustedAlignment,
+      menuOffset: calculateMenuOffset,
+      direction: adjustedDirection,
       "data-testid": "".concat(testId, "-subtitle"),
       ref: subTitleRef,
       showIcon: false,

package/lib/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -287,7 +287,7 @@ var defaultProps = {
 };
 
 var DateTimePicker = function DateTimePicker(_ref) {
-  var _classnames2, _classnames4, _style$zIndex;
+  var _classnames, _classnames2, _classnames4, _style$zIndex;
 
   var testId = _ref.testId,
       defaultValue = _ref.defaultValue,
@@ -862,7 +862,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": testId,
     id: "".concat(id, "-").concat(iotPrefix, "--date-time-pickerv2__wrapper"),
-    className: classnames__default['default']("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), _defineProperty__default['default']({}, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled)),
+    className: classnames__default['default']("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), (_classnames = {}, _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled), _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--invalid"), invalidState), _classnames)),
     style: {
       '--wrapper-width': hasIconOnly ? '3rem' : '20rem'
     },
@@ -884,7 +884,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onMouseLeave: toggleTooltip,
     tabIndex: 0
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames__default['default']((_classnames2 = {}, _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _classnames2))
+    className: classnames__default['default']((_classnames2 = {}, _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _classnames2))
   }, !hasIconOnly ? /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": "".concat(testId, "__field"),
     className: "".concat(iotPrefix, "--date-time-picker__field")

package/lib/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js

@@ -268,7 +268,7 @@ var defaultProps = {
 };
 
 var DateTimePicker = function DateTimePicker(_ref) {
-  var _classnames2, _classnames4;
+  var _classnames, _classnames2, _classnames4;
 
   var testId = _ref.testId,
       defaultValue = _ref.defaultValue,
@@ -721,7 +721,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": testId,
     id: "".concat(id, "-").concat(iotPrefix, "--date-time-pickerv2__wrapper"),
-    className: classnames__default['default']("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), _defineProperty__default['default']({}, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled)),
+    className: classnames__default['default']("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), (_classnames = {}, _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled), _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--invalid"), invalidState), _classnames)),
     style: {
       '--wrapper-width': hasIconOnly ? '3rem' : '20rem'
     },
@@ -743,7 +743,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onMouseLeave: toggleTooltip,
     tabIndex: 0
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames__default['default']((_classnames2 = {}, _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _classnames2))
+    className: classnames__default['default']((_classnames2 = {}, _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--light"), light), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), _defineProperty__default['default'](_classnames2, "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState), _classnames2))
   }, !hasIconOnly ? /*#__PURE__*/React__default['default'].createElement("div", {
     "data-testid": "".concat(testId, "__field"),
     className: "".concat(iotPrefix, "--date-time-picker__field")