@carbon/ibm-products 2.43.2-canary.53 → 2.43.2-canary.55

package/lib/components/SidePanel/SidePanel.js

@@ -23,6 +23,7 @@ var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var variants = require('./motion/variants.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
@@ -53,7 +54,6 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -120,7 +120,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var previousOpen = usePreviousValue.usePreviousValue(open);
-  var shouldReduceMotion = framerMotion.useReducedMotion();
+  var shouldReduceMotion = usePrefersReducedMotion["default"]();
 
   // Title animation on scroll related state
   var _useState7 = React.useState(0),
@@ -163,9 +163,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       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
   React.useEffect(function () {
@@ -202,7 +199,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, [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;
@@ -218,8 +215,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       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;
       }
@@ -237,12 +234,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
 
   // Calculate scroll distances
   React.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
   React.useEffect(function () {
@@ -278,10 +275,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
   React.useEffect(function () {
-    if (reducedMotion.matches) {
+    if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
-  }, [reducedMotion.matches]);
+  }, [shouldReduceMotion]);
 
   // initializes the side panel to open
   var onAnimationStart = function onAnimationStart() {
@@ -300,10 +297,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [open, placement, selectorPageContent, slideIn]);
   React.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
   React.useEffect(function () {
@@ -316,15 +313,15 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginInlineStart = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
+  }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   React.useEffect(function () {
     if (open) {
       setTimeout(function () {
@@ -350,7 +347,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default["default"].createElement("h2", {
+    }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React__default["default"].createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -367,7 +364,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       });
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: cx__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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["default"].createElement(react.Button, {
       "aria-label": navigationBackIconDescription,

package/lib/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 };
 }

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

@@ -27,35 +27,34 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: function visible(_ref) {
-    var shouldReduceMotion = _ref.shouldReduceMotion;
+  visible: function visible() {
     return {
       x: 0,
       transition: {
         duration: motionConstants.DURATIONS.moderate02,
         ease: motionConstants.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: motionConstants.DURATIONS.moderate01,
         ease: motionConstants.EASINGS.productive.exit
       },
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   }
 };

package/lib/components/Tearsheet/TearsheetShell.js

@@ -322,7 +322,9 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 // 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' ? index["default"].object : index["default"].instanceOf(Element);
+var portalType = typeof Element === 'undefined' ? index["default"].object
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+: index["default"].instanceOf(Element);
 var deprecatedProps = {
   /**
    * **Deprecated**

package/lib/components/WebTerminal/WebTerminal.js

@@ -19,6 +19,7 @@ var react = require('@carbon/react');
 var carbonMotion = require('@carbon/motion');
 var index = require('./hooks/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -65,10 +66,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.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["default"]();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(carbonMotion.moderate02);
   var showDocumentationLinks = React.useMemo(function () {
     return documentationLinks.length > 0;
@@ -101,7 +99,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
       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();
@@ -110,7 +108,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: ref,
     className: cx__default["default"]([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
-      animation: !prefersReducedMotion ? webTerminalAnimationName : ''
+      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default["default"].createElement("header", {
@@ -128,15 +126,15 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-label": documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
-  }, documentationLinks.map(function (_ref4, i) {
-    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref4), _ref4));
+  }, documentationLinks.map(function (_ref3, i) {
+    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref3), _ref3));
     return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers["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["default"].createElement(react.Button, {
       key: iconDescription,
       hasIconOnly: true,

package/lib/global/js/hooks/usePrefersReducedMotion.js

@@ -11,19 +11,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var window$1 = require('../utils/window.js');
+var useIsomorphicEffect = require('./useIsomorphicEffect.js');
 
 var usePrefersReducedMotion = function usePrefersReducedMotion() {
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     prefersReducedMotion = _useState2[0],
     setPrefersReducedMotion = _useState2[1];
-  React.useEffect(function () {
-    if (window$1.hasDocument()) {
-      var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
-        matches = _window$matchMedia.matches;
-      setPrefersReducedMotion(matches);
-    }
+  useIsomorphicEffect.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.53+c833d06ba",
+  "version": "2.43.2-canary.55+9f0245063",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.40.0-rc.1",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.65+9f0245063",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "c833d06ba30ebdb02250058c28295add4bada977"
+  "gitHead": "9f0245063cc08bb494ef3dc9e2c768ab069ec5de"
 }

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -30,7 +30,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
-    .#{$block-class}__connector-button
+    .#{$block-class}__connector-button,
+    .#{$block-class}__add-button
   ) {
   background-color: $tag-background-red;
   color: $tag-color-red;
@@ -56,6 +57,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   opacity: 0;
   pointer-events: none;
   transition: all $duration-moderate-02 motion(exit, expressive);
+  .#{$block-class}__preview-condition {
+    display: flex;
+  }
 }
 .#{$block-class}__group-preview-animate {
   height: auto;

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -96,7 +96,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__item-date,
 .#{$block-class}__item-text,
 .#{$block-class}__item-number,
-#{$block-class}__item-time {
+.#{$block-class}__item-time {
   padding-block-end: $spacing-05;
   padding-inline: $spacing-05;
 }
@@ -236,6 +236,7 @@ $colors: (
 }
 .#{$block-class}__add_condition_group-wrapper {
   z-index: -1;
+  width: 0;
   margin-left: -50%;
   opacity: 0;
   pointer-events: none;
@@ -244,6 +245,7 @@ $colors: (
 }
 .#{$block-class}__add_condition_group-wrapper--show {
   z-index: 0;
+  width: auto;
   margin-left: 0;
   opacity: 1;
   pointer-events: all;

package/es/global/js/utils/window.d.ts

@@ -1,2 +0,0 @@
-export function hasDocument(): boolean;
-export function hasWindow(): boolean;

package/es/global/js/utils/window.js

@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasDocument = function hasDocument() {
-  return typeof document !== 'undefined';
-};
-
-export { hasDocument };

package/lib/global/js/utils/window.d.ts

@@ -1,2 +0,0 @@
-export function hasDocument(): boolean;
-export function hasWindow(): boolean;

package/lib/global/js/utils/window.js

@@ -1,16 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var hasDocument = function hasDocument() {
-  return typeof document !== 'undefined';
-};
-
-exports.hasDocument = hasDocument;