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

package/es/components/Coachmark/Coachmark.js

@@ -17,6 +17,7 @@ import { useClickOutsideElement, useWindowEvent } from './utils/hooks.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { throttle } from 'lodash';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["align", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "portalTarget", "positionTune", "target", "theme"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -36,7 +37,6 @@ var defaults = {
  */
 
 var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
     children = _ref.children,
@@ -55,7 +55,6 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === 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 = useState(isStacked),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -79,6 +78,11 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var backupRef = useRef();
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = useRef(null);
+  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);
   };
@@ -169,18 +173,19 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: _coachmarkRef
-  }, rest, getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }, rest, getDevtoolsProps(componentName)), target, isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
     className: cx(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' ? PropTypes.object : PropTypes.instanceOf(HTMLElement);
+var overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+PropTypes.instanceOf(HTMLElement);
 
 // Return a placeholder if not released and not enabled by feature flag
 Coachmark = pkg.checkComponentEnabled(Coachmark, componentName);

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -16,6 +16,8 @@ import { CoachmarkOverlay } from '../Coachmark/CoachmarkOverlay.js';
 import { CoachmarkTagline } from '../Coachmark/CoachmarkTagline.js';
 import { CoachmarkContext } from '../Coachmark/utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
+import { useReducedMotion } from 'framer-motion';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "onClose", "portalTarget", "tagline", "theme"];
 // Carbon and package components we use.
@@ -39,7 +41,6 @@ var defaults = {
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
 var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -51,7 +52,7 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var overlayRef = 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 = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -75,17 +76,19 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState10 = _slicedToArray(_useState9, 2),
     fixedIsVisible = _useState10[0],
     setFixedIsVisible = _useState10[1];
-  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  var shouldReduceMotion = useReducedMotion();
+  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 = 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();
@@ -164,7 +167,7 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: COACHMARK_OVERLAY_KIND.FIXED,
@@ -172,9 +175,8 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx(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/es/components/CoachmarkStack/CoachmarkStack.js

@@ -17,6 +17,7 @@ import { CoachmarkStackHome } from './CoachmarkStackHome.js';
 import { CoachmarkTagline } from '../Coachmark/CoachmarkTagline.js';
 import { CoachmarkContext } from '../Coachmark/utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "onClose", "description", "media", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title"];
 
@@ -47,7 +48,6 @@ var defaults = {
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
  */
 var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -63,7 +63,11 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
     rest = _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 = useRef();
+  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 = useRef();
   var stackedCoachmarkRefs = useRef([]);
   var _useState = useState(false),
@@ -206,7 +210,7 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
     title: title
-  }), /*#__PURE__*/createPortal(wrappedChildren, portalNode)));
+  }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/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/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -16,6 +16,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { createPortal } from 'react-dom';
 import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMedia.js';
 
 var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
@@ -33,7 +34,6 @@ var componentName = 'CoachmarkStackHome';
  * of other Onboarding components.
  */
 var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   var className = _ref.className,
     description = _ref.description,
     isOpen = _ref.isOpen,
@@ -57,11 +57,15 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }, 100);
   }, [isOpen]);
+  var portalNode = useRef();
+  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.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__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref,
     role: "main"
@@ -103,7 +107,7 @@ var CoachmarkStackHome = /*#__PURE__*/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.createElement("li", {

package/es/components/CreateFullPage/CreateFullPage.js

@@ -89,6 +89,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState10 = _slicedToArray(_useState9, 2),
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -146,8 +147,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
-    /**@ts-ignore */
-    open: open,
+    open: true,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
     /**@ts-ignore */

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

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

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -43,11 +43,12 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-  var _useState3 = useState(window.innerWidth),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     windowSize = _useState4[0],
     setWindowSize = _useState4[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -68,7 +69,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.createElement("th", {
     scope: "col",
-    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && (windowSize !== null && windowSize !== void 0 ? windowSize : 0) > 671))
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {

package/es/components/Datagrid/useSelectRows.js

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

package/es/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/es/components/EditInPlace/EditInPlace.js

@@ -15,7 +15,7 @@ import { pkg, carbon } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
 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(pkg.prefix, "--edit-in-place");
 var defaults = {
@@ -36,6 +36,7 @@ var EditInPlace = /*#__PURE__*/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,
@@ -103,15 +104,21 @@ var EditInPlace = /*#__PURE__*/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();
+        }
       }
     }
   };
@@ -251,6 +258,10 @@ EditInPlace.propTypes = _objectSpread2({
    * Provide the text that will be read by a screen reader when visiting this control
    */
   labelText: PropTypes.string.isRequired,
+  /**
+   * handler to add custom onBlur event
+   */
+  onBlur: PropTypes.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/es/components/Nav/NavItem.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect, useRef } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
@@ -51,11 +51,20 @@ var NavItem = function NavItem(_ref) {
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hrefHasDifferentHost = _useState2[0],
+    setHrefHasDifferentHost = _useState2[1];
+  useEffect(function () {
+    if (href.indexOf(window.location.host) === -1) {
+      setHrefHasDifferentHost(true);
+    }
+  }, [href]);
   var internalId = useRef(uuidv4());
   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/es/components/OptionsTile/OptionsTile.js

@@ -15,6 +15,7 @@ import { pkg } from '../../settings.js';
 import { Toggle, Layer } from '@carbon/react';
 import { ChevronDown, Locked, WarningFilled, WarningAltFilled } from '@carbon/react/icons';
 import * as carbonMotion from '@carbon/motion';
+import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { useControllableState } from '../../global/js/hooks/useControllableState.js';
 
 var _Locked;
@@ -71,9 +72,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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();
   if (open !== prevIsOpen) {
     if (isOpen && !open) {
       collapse();
@@ -83,7 +82,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     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),
@@ -112,7 +111,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }
   function collapse() {
-    if (contentRef.current && !reducedMotion.matches) {
+    if (contentRef.current && !shouldReduceMotion) {
       setClosing(true);
       var _getComputedStyle2 = getComputedStyle(contentRef.current),
         paddingTop = _getComputedStyle2.paddingTop,

package/es/components/SidePanel/SidePanel.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { moderate02 } from '@carbon/motion';
@@ -19,6 +19,7 @@ import { Button, IconButton } from '@carbon/react';
 import { ArrowLeft, Close } from '@carbon/react/icons';
 import { actionSetVariants, overlayVariants, panelVariants } from './motion/variants.js';
 import pconsole from '../../global/js/utils/pconsole.js';
+import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
@@ -44,7 +45,6 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -111,7 +111,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var previousOpen = usePreviousValue(open);
-  var shouldReduceMotion = useReducedMotion();
+  var shouldReduceMotion = usePrefersReducedMotion();
 
   // Title animation on scroll related state
   var _useState7 = useState(0),
@@ -154,9 +154,6 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       titleItemsStyles(animationProgress);
     }
   }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
-  var reducedMotion = typeof document !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
 
   // scroll panel to top going between steps
   useEffect(function () {
@@ -193,7 +190,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [launcherButtonRef, open, previousOpen]);
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
       var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
@@ -209,8 +206,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
       var scrollEl = innerContentRef.current;
       if (scrollEl) {
-        var _window2;
-        var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
+        var _window;
+        var innerComputed = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(innerContentRef.current);
         var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom) : 0;
         canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
       }
@@ -228,12 +225,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Calculate scroll distances
   useEffect(function () {
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       checkSetDoAnimateTitle();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, shouldReduceMotion, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   useEffect(function () {
@@ -269,10 +266,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
   useEffect(function () {
-    if (reducedMotion.matches) {
+    if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
-  }, [reducedMotion.matches]);
+  }, [shouldReduceMotion]);
 
   // initializes the side panel to open
   var onAnimationStart = function onAnimationStart() {
@@ -291,10 +288,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [open, placement, selectorPageContent, slideIn]);
   useEffect(function () {
-    if (!open && previousState && previousState['open'] && reducedMotion.matches) {
+    if (!open && previousState && previousState['open'] && shouldReduceMotion) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
-  }, [open, onUnmount, reducedMotion.matches, previousState]);
+  }, [open, onUnmount, shouldReduceMotion, previousState]);
 
   // used to set margins of content for slide in panel version
   useEffect(function () {
@@ -307,15 +304,15 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-end ".concat(moderate02) : '';
         pageContentElement.style.marginInlineEnd = SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginInlineStart = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(moderate02) : '';
         pageContentElement.style.marginInlineStart = SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
+  }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   useEffect(function () {
     if (open) {
       setTimeout(function () {
@@ -341,7 +338,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default.createElement("h2", {
+    }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React__default.createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -358,7 +355,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       });
     }
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
+      className: cx("".concat(blockClass, "__header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), shouldReduceMotion), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default.createElement(Button, {
       "aria-label": navigationBackIconDescription,

package/es/components/SidePanel/motion/variants.d.ts

@@ -16,15 +16,13 @@ export namespace overlayVariants {
     }
 }
 export namespace panelVariants {
-    export function visible_1({ shouldReduceMotion }: {
-        shouldReduceMotion: any;
-    }): {
+    export function visible_1(): {
         x: number;
         transition: {
             duration: number;
             ease: number[];
         };
-        opacity: any;
+        opacity: number;
     };
     export { visible_1 as visible };
     export function hidden_1({ placement, shouldReduceMotion }: {
@@ -32,7 +30,7 @@ export namespace panelVariants {
         shouldReduceMotion: any;
     }): {
         x: string | number;
-        opacity: any;
+        opacity: number;
     };
     export { hidden_1 as hidden };
     export function exit_1({ placement, shouldReduceMotion }: {
@@ -44,7 +42,7 @@ export namespace panelVariants {
             duration: number;
             ease: number[];
         };
-        opacity: any;
+        opacity: number;
     };
     export { exit_1 as exit };
 }