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

package/lib/hooks/usePopoverPositioning.js

@@ -76,6 +76,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
@@ -93,22 +123,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__namespace.useState(),
       _React$useState2 = _slicedToArray__default['default'](_React$useState, 2),
       adjustedDirection = _React$useState2[0],
       setAdjustedDirection = _React$useState2[1];
 
-  var _React$useState3 = React__namespace.useState(),
+  var _React$useState3 = React__namespace.useState(defaultAlignment),
       _React$useState4 = _slicedToArray__default['default'](_React$useState3, 2),
-      adjustedFlipped = _React$useState4[0],
-      setAdjustedFlipped = _React$useState4[1];
+      adjustedAlignment = _React$useState4[0],
+      setAdjustedAlignment = _React$useState4[1];
 
-  var _React$useState5 = React__namespace.useState({}),
+  var _React$useState5 = React__namespace.useState(),
       _React$useState6 = _slicedToArray__default['default'](_React$useState5, 2),
-      flyoutAlignment = _React$useState6[0].flyoutAlignment,
-      setDirections = _React$useState6[1];
+      adjustedFlipped = _React$useState6[0],
+      setAdjustedFlipped = _React$useState6[1];
+
+  var _React$useState7 = React__namespace.useState({}),
+      _React$useState8 = _slicedToArray__default['default'](_React$useState7, 2),
+      flyoutAlignment = _React$useState8[0].flyoutAlignment,
+      setDirections = _React$useState8[1];
 
   var previousDirection = React__namespace.useRef();
   var langDir = useLangDirection.useLangDirection();
@@ -206,10 +243,12 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
    * be adjusted to `right-start`.
    */
 
-  var fixOverflow = React__namespace.useCallback(function (overflow, menuOffsetArgs) {
+  var fixOverflow = React__namespace.useCallback(function (overflow, menuOffsetArgs, alignment) {
     var _menuOffsetArgs = _slicedToArray__default['default'](menuOffsetArgs, 1),
         tooltipElement = _menuOffsetArgs[0];
 
+    setAdjustedAlignment(alignment);
+
     switch (overflow) {
       case 'top':
         if (flyoutAlignment) {
@@ -336,7 +375,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.
 
@@ -349,7 +390,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;
@@ -363,7 +404,8 @@ var usePopoverPositioning = function usePopoverPositioning(_ref) {
 
   return [calculateMenuOffset, {
     adjustedDirection: adjustedDirection,
-    adjustedFlipped: adjustedFlipped
+    adjustedFlipped: adjustedFlipped,
+    adjustedAlignment: adjustedAlignment
   }];
 };
 

package/lib/scss/components/DateTimePicker/_date-time-pickerv2.scss

@@ -101,10 +101,6 @@
     background-color: $field-02;
   }
 
-  .#{$iot-prefix}--date-time-picker__box--invalid {
-    outline: 2px solid $danger-01;
-  }
-
   .#{$iot-prefix}--date-time-picker__box--disabled {
     border: none;
   }
@@ -118,6 +114,10 @@
   pointer-events: none;
 }
 
+.#{$iot-prefix}--date-time-pickerv2__wrapper--invalid {
+  outline: 2px solid $danger-01;
+}
+
 // open menu content
 .#{$iot-prefix}--flyout-menu--content.#{$iot-prefix}--date-time-picker--menu {
   --zIndex: 0;

package/lib/scss/components/Table/_table.scss

@@ -195,6 +195,11 @@ button.#{$prefix}--btn.#{$iot-prefix}--tooltip-svg-wrapper.#{$prefix}--btn--ghos
     left: unset;
     right: var(--row-nesting-offset);
   }
+
+  &__expand {
+    left: unset;
+    margin-left: var(--row-nesting-offset);
+  }
 }
 
 .#{$iot-prefix}--expanded-tablerow {

package/package.json

@@ -340,10 +340,11 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.152.0-next.13",
+  "version": "2.152.0-next.15",
   "resolutions": {
     "chokidar": "3.3.1",
-    "react-grid-layout": "1.2.2"
+    "react-grid-layout": "1.2.2",
+    "got": "11.8.5"
   },
-  "gitHead": "ab43b4e6fdb25afa273b641cc6790ca0b4cf7297"
+  "gitHead": "9837b38fd9d3f1400d5da9f40126c1c85a153a53"
 }

package/scss/components/DateTimePicker/_date-time-pickerv2.scss

@@ -101,10 +101,6 @@
     background-color: $field-02;
   }
 
-  .#{$iot-prefix}--date-time-picker__box--invalid {
-    outline: 2px solid $danger-01;
-  }
-
   .#{$iot-prefix}--date-time-picker__box--disabled {
     border: none;
   }
@@ -118,6 +114,10 @@
   pointer-events: none;
 }
 
+.#{$iot-prefix}--date-time-pickerv2__wrapper--invalid {
+  outline: 2px solid $danger-01;
+}
+
 // open menu content
 .#{$iot-prefix}--flyout-menu--content.#{$iot-prefix}--date-time-picker--menu {
   --zIndex: 0;

package/scss/components/Table/_table.scss

@@ -195,6 +195,11 @@ button.#{$prefix}--btn.#{$iot-prefix}--tooltip-svg-wrapper.#{$prefix}--btn--ghos
     left: unset;
     right: var(--row-nesting-offset);
   }
+
+  &__expand {
+    left: unset;
+    margin-left: var(--row-nesting-offset);
+  }
 }
 
 .#{$iot-prefix}--expanded-tablerow {