@carbon/ibm-products 2.43.2-canary.46 → 2.43.2-canary.54

package/es/components/SidePanel/motion/variants.js

@@ -23,35 +23,34 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: function visible(_ref) {
-    var shouldReduceMotion = _ref.shouldReduceMotion;
+  visible: function visible() {
     return {
       x: 0,
       transition: {
         duration: DURATIONS.moderate02,
         ease: EASINGS.productive.standard
       },
-      opacity: shouldReduceMotion && 1
+      opacity: 1
     };
   },
-  hidden: function hidden(_ref2) {
-    var placement = _ref2.placement,
-      shouldReduceMotion = _ref2.shouldReduceMotion;
+  hidden: function hidden(_ref) {
+    var placement = _ref.placement,
+      shouldReduceMotion = _ref.shouldReduceMotion;
     return {
       x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   },
-  exit: function exit(_ref3) {
-    var placement = _ref3.placement,
-      shouldReduceMotion = _ref3.shouldReduceMotion;
+  exit: function exit(_ref2) {
+    var placement = _ref2.placement,
+      shouldReduceMotion = _ref2.shouldReduceMotion;
     return {
       x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
       transition: {
         duration: DURATIONS.moderate01,
         ease: EASINGS.productive.exit
       },
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   }
 };

package/es/components/Tearsheet/TearsheetShell.js

@@ -313,7 +313,9 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
-var portalType = typeof Element === 'undefined' ? PropTypes.object : PropTypes.instanceOf(Element);
+var portalType = typeof Element === 'undefined' ? PropTypes.object
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+: PropTypes.instanceOf(Element);
 var deprecatedProps = {
   /**
    * **Deprecated**

package/es/components/WebTerminal/WebTerminal.js

@@ -15,6 +15,7 @@ import { OverflowMenu, OverflowMenuItem, Button, Theme } from '@carbon/react';
 import { moderate02 } from '@carbon/motion';
 import { useWebTerminal } from './hooks/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
 
 var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
@@ -56,10 +57,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
     setRender = _useState2[1];
-  var _ref2 = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-      matches: true
-    },
-    prefersReducedMotion = _ref2.matches;
+  var shouldReduceMotion = usePrefersReducedMotion();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(moderate02);
   var showDocumentationLinks = useMemo(function () {
     return documentationLinks.length > 0;
@@ -92,7 +90,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       If the user prefers reduced motion, we have to manually set render to false
       because onAnimationEnd will never be called.
     */
-    if (prefersReducedMotion) {
+    if (shouldReduceMotion) {
       setRender(false);
     }
     closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
@@ -101,7 +99,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     ref: ref,
     className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
-      animation: !prefersReducedMotion ? webTerminalAnimationName : ''
+      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement("header", {
@@ -119,15 +117,15 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     "aria-label": documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
-  }, documentationLinks.map(function (_ref4, i) {
-    var rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  }, documentationLinks.map(function (_ref3, i) {
+    var rest = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
       key: i
     }, rest));
-  })), actions.map(function (_ref5) {
-    var renderIcon = _ref5.renderIcon,
-      onClick = _ref5.onClick,
-      iconDescription = _ref5.iconDescription;
+  })), actions.map(function (_ref4) {
+    var renderIcon = _ref4.renderIcon,
+      onClick = _ref4.onClick,
+      iconDescription = _ref4.iconDescription;
     return /*#__PURE__*/React__default.createElement(Button, {
       key: iconDescription,
       hasIconOnly: true,

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -6,20 +6,26 @@
  */
 
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useEffect } from 'react';
-import { hasDocument } from '../utils/window.js';
+import { useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect.js';
 
 var usePrefersReducedMotion = function usePrefersReducedMotion() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     prefersReducedMotion = _useState2[0],
     setPrefersReducedMotion = _useState2[1];
-  useEffect(function () {
-    if (hasDocument()) {
-      var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
-        matches = _window$matchMedia.matches;
-      setPrefersReducedMotion(matches);
-    }
+  useIsomorphicEffect(function () {
+    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
+    var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: no-preference)'),
+      matches = _window$matchMedia.matches;
+    setPrefersReducedMotion(!matches);
+    var listener = function listener(event) {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addEventListener('change', listener);
+    return function () {
+      mediaQueryList.removeEventListener('change', listener);
+    };
   }, []);
   return prefersReducedMotion;
 };

package/lib/components/Coachmark/Coachmark.js

@@ -21,6 +21,7 @@ var hooks = require('./utils/hooks.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var lodash = require('lodash');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,7 +46,6 @@ var defaults = {
  */
 
 exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
     children = _ref.children,
@@ -64,7 +64,6 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === enums.COACHMARK_OVERLAY_KIND.STACKED;
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   var _useState = React.useState(isStacked),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -88,6 +87,11 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backupRef = React.useRef();
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var closeOverlay = function closeOverlay() {
     setIsOpen(false);
   };
@@ -178,18 +182,19 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: _coachmarkRef
-  }, rest, devtools.getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }, rest, devtools.getDevtoolsProps(componentName)), target, isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
     className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children),
-  // Default to `document.body` when `portalNode` is `null`
-  portalNode || document.body)));
+  }, children), // Default to `document.body` when `portalNode` is `null`
+  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object : index["default"].instanceOf(HTMLElement);
+var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+index["default"].instanceOf(HTMLElement);
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.Coachmark = settings.pkg.checkComponentEnabled(exports.Coachmark, componentName);

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -20,6 +20,8 @@ var CoachmarkOverlay = require('../Coachmark/CoachmarkOverlay.js');
 var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
 var context = require('../Coachmark/utils/context.js');
 var enums = require('../Coachmark/utils/enums.js');
+var framerMotion = require('framer-motion');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,7 +50,6 @@ var defaults = {
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
 exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -60,7 +61,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var overlayRef = React.useRef(null);
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  var portalNode = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -84,17 +85,19 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     fixedIsVisible = _useState10[0],
     setFixedIsVisible = _useState10[1];
-  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  var shouldReduceMotion = framerMotion.useReducedMotion();
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var handleClose = React.useCallback(function () {
-    console.log('HANDLING CLOSE HERE...');
-    if (prefersReducedMotion.matches) {
+    if (shouldReduceMotion) {
       setIsOpen(false);
     } else {
       setFixedIsVisible(false);
     }
-  }, [prefersReducedMotion.matches]);
+  }, [shouldReduceMotion]);
   var handleTransitionEnd = function handleTransitionEnd(e) {
-    console.log('Here at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
     if (e.propertyName === 'transform' && !fixedIsVisible) {
       setIsOpen(false);
       onClose();
@@ -173,7 +176,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(CoachmarkTagline.CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: enums.COACHMARK_OVERLAY_KIND.FIXED,
@@ -181,9 +184,8 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx__default["default"](fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
-  }, children),
-  // Default to `document.body` when `portalNode` is `null`
-  portalNode || document.body)));
+  }, children), // Default to `document.body` when `portalNode` is `null`
+  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -21,6 +21,7 @@ var CoachmarkStackHome = require('./CoachmarkStackHome.js');
 var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
 var context = require('../Coachmark/utils/context.js');
 var enums = require('../Coachmark/utils/enums.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -56,7 +57,6 @@ var defaults = {
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
  */
 exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -72,7 +72,11 @@ exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(funct
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  var portalNode = React.useRef();
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var stackHomeRef = React.useRef();
   var stackedCoachmarkRefs = React.useRef([]);
   var _useState = React.useState(false),
@@ -215,7 +219,7 @@ exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(funct
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
     title: title
-  }), /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode)));
+  }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -20,6 +20,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,7 +43,6 @@ var componentName = 'CoachmarkStackHome';
  * of other Onboarding components.
  */
 exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var className = _ref.className,
     description = _ref.description,
     isOpen = _ref.isOpen,
@@ -66,11 +66,15 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       }
     }, 100);
   }, [isOpen]);
+  var portalNode = React.useRef();
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   if (!navLinkLabels) {
     return pconsole["default"].warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
   }
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
-  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
     ref: ref,
     role: "main"
@@ -112,7 +116,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       setLinkFocusIndex(0);
       _onClose();
     }
-  }, closeButtonLabel))))), portalNode);
+  }, closeButtonLabel))))), portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null;
   function renderNavLink(index, label) {
     var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     return /*#__PURE__*/React__default["default"].createElement("li", {

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -98,6 +98,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
   var previousState = usePreviousValue.usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -155,8 +156,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
   useResetCreateComponent.useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
-    /**@ts-ignore */
-    open: open,
+    open: true,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
     /**@ts-ignore */

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -25,11 +25,12 @@ var _excluded = ["onChange"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -52,11 +52,12 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-  var _useState3 = React.useState(window.innerWidth),
+  var _useState3 = React.useState(),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     windowSize = _useState4[0],
     setWindowSize = _useState4[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -77,7 +78,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var isFirstColumnStickyLeft = (columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
-    className: cx__default["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx__default["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && (windowSize !== null && windowSize !== void 0 ? windowSize : 0) > 671))
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {

package/lib/components/Datagrid/useSelectRows.js

@@ -90,11 +90,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

package/lib/components/EditInPlace/EditInPlace.d.ts

@@ -50,6 +50,10 @@ interface EditInplaceProps extends PropsWithChildren {
      * Provide the text that will be read by a screen reader when visiting this control
      */
     labelText: string;
+    /**
+     * handler to add custom onBlur event
+     */
+    onBlur?: (value: string) => void;
     /**
      * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
      */

package/lib/components/EditInPlace/EditInPlace.js

@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close, _Checkmark, _Edit;
-var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "size", "tooltipAlignment", "value"];
+var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "onBlur", "saveLabel", "size", "tooltipAlignment", "value"];
 var componentName = 'EditInPlace';
 var blockClass = "".concat(settings.pkg.prefix, "--edit-in-place");
 var defaults = {
@@ -45,6 +45,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onCancel = _ref.onCancel,
     onChange = _ref.onChange,
     onSave = _ref.onSave,
+    onBlur = _ref.onBlur,
     saveLabel = _ref.saveLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
@@ -112,15 +113,21 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onCancel(initialValue);
   };
   var onBlurHandler = function onBlurHandler(e) {
-    // if (readOnly || escaping.current) {
-    if (escaping.current) {
-      return;
-    }
-    if (!isTargetingChild(e)) {
-      if (canSave) {
-        onSaveHandler();
-      } else {
-        onCancelHandler();
+    // Use custom function provided if passed through
+    if (typeof onBlur === 'function' && !isTargetingChild(e)) {
+      onBlur(initialValue);
+      setFocused(false);
+    } else {
+      // Use Default behavior if no custom function provided
+      if (escaping.current) {
+        return;
+      }
+      if (!isTargetingChild(e)) {
+        if (canSave) {
+          onSaveHandler();
+        } else {
+          onCancelHandler();
+        }
       }
     }
   };
@@ -260,6 +267,10 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Provide the text that will be read by a screen reader when visiting this control
    */
   labelText: index["default"].string.isRequired,
+  /**
+   * handler to add custom onBlur event
+   */
+  onBlur: index["default"].func,
   /**
    * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
    */

package/lib/components/Nav/NavItem.js

@@ -60,11 +60,20 @@ var NavItem = function NavItem(_ref) {
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    hrefHasDifferentHost = _useState2[0],
+    setHrefHasDifferentHost = _useState2[1];
+  React.useEffect(function () {
+    if (href.indexOf(window.location.host) === -1) {
+      setHrefHasDifferentHost(true);
+    }
+  }, [href]);
   var internalId = React.useRef(uuidv4["default"]());
   var instanceId = "".concat(blockClass, "__").concat(internalId.current);
   var navItemId = id || instanceId;
   var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
-  var externalLink = isAbsoluteLink.test(href) && href.indexOf(window.location.host) === -1;
+  var externalLink = isAbsoluteLink.test(href) && hrefHasDifferentHost;
   var linkClassName = "".concat(blockClass, "__link");
   var handleDisabled = function handleDisabled(action) {
     var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

package/lib/components/OptionsTile/OptionsTile.js

@@ -19,6 +19,7 @@ var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var carbonMotion = require('@carbon/motion');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var useControllableState = require('../../global/js/hooks/useControllableState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -99,9 +100,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
   var isInvalid = invalid;
   var isWarn = !isInvalid && warn;
   var isLocked = !isInvalid && !isWarn && locked;
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
+  var shouldReduceMotion = usePrefersReducedMotion["default"]();
   if (open !== prevIsOpen) {
     if (isOpen && !open) {
       collapse();
@@ -111,7 +110,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
     setPrevIsOpen(open);
   }
   function expand() {
-    if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
+    if (detailsRef.current && contentRef.current && !shouldReduceMotion) {
       setIsOpen(true);
       detailsRef.current.open = true;
       var _getComputedStyle = getComputedStyle(contentRef.current),
@@ -140,7 +139,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }
   function collapse() {
-    if (contentRef.current && !reducedMotion.matches) {
+    if (contentRef.current && !shouldReduceMotion) {
       setClosing(true);
       var _getComputedStyle2 = getComputedStyle(contentRef.current),
         paddingTop = _getComputedStyle2.paddingTop,