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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/es/components/Coachmark/Coachmark.js +12 -7
  2. package/es/components/CoachmarkFixed/CoachmarkFixed.js +13 -11
  3. package/es/components/CoachmarkStack/CoachmarkStack.js +7 -3
  4. package/es/components/CoachmarkStack/CoachmarkStackHome.js +8 -4
  5. package/es/components/CreateFullPage/CreateFullPage.js +2 -2
  6. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +2 -1
  7. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -2
  8. package/es/components/Datagrid/useSelectRows.js +2 -1
  9. package/es/components/Nav/NavItem.js +12 -3
  10. package/es/components/OptionsTile/OptionsTile.js +4 -5
  11. package/es/components/SidePanel/SidePanel.js +17 -20
  12. package/es/components/SidePanel/motion/variants.d.ts +4 -6
  13. package/es/components/SidePanel/motion/variants.js +10 -11
  14. package/es/components/Tearsheet/TearsheetShell.js +3 -1
  15. package/es/components/WebTerminal/WebTerminal.js +10 -12
  16. package/es/global/js/hooks/usePrefersReducedMotion.js +14 -8
  17. package/lib/components/Coachmark/Coachmark.js +12 -7
  18. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +13 -11
  19. package/lib/components/CoachmarkStack/CoachmarkStack.js +7 -3
  20. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +8 -4
  21. package/lib/components/CreateFullPage/CreateFullPage.js +2 -2
  22. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +2 -1
  23. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -2
  24. package/lib/components/Datagrid/useSelectRows.js +2 -1
  25. package/lib/components/Nav/NavItem.js +10 -1
  26. package/lib/components/OptionsTile/OptionsTile.js +4 -5
  27. package/lib/components/SidePanel/SidePanel.js +16 -19
  28. package/lib/components/SidePanel/motion/variants.d.ts +4 -6
  29. package/lib/components/SidePanel/motion/variants.js +10 -11
  30. package/lib/components/Tearsheet/TearsheetShell.js +3 -1
  31. package/lib/components/WebTerminal/WebTerminal.js +10 -12
  32. package/lib/global/js/hooks/usePrefersReducedMotion.js +13 -7
  33. package/package.json +2 -2
  34. package/es/global/js/utils/window.d.ts +0 -2
  35. package/es/global/js/utils/window.js +0 -12
  36. package/lib/global/js/utils/window.d.ts +0 -2
  37. package/lib/global/js/utils/window.js +0 -16
@@ -15,6 +15,7 @@ import { OverflowMenu, OverflowMenuItem, Button, Theme } from '@carbon/react';
15
15
  import { moderate02 } from '@carbon/motion';
16
16
  import { useWebTerminal } from './hooks/index.js';
17
17
  import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
18
+ import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
18
19
 
19
20
  var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
20
21
 
@@ -56,10 +57,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
56
57
  _useState2 = _slicedToArray(_useState, 2),
57
58
  shouldRender = _useState2[0],
58
59
  setRender = _useState2[1];
59
- var _ref2 = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
60
- matches: true
61
- },
62
- prefersReducedMotion = _ref2.matches;
60
+ var shouldReduceMotion = usePrefersReducedMotion();
63
61
  var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(moderate02);
64
62
  var showDocumentationLinks = useMemo(function () {
65
63
  return documentationLinks.length > 0;
@@ -92,7 +90,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
92
90
  If the user prefers reduced motion, we have to manually set render to false
93
91
  because onAnimationEnd will never be called.
94
92
  */
95
- if (prefersReducedMotion) {
93
+ if (shouldReduceMotion) {
96
94
  setRender(false);
97
95
  }
98
96
  closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
@@ -101,7 +99,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
101
99
  ref: ref,
102
100
  className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
103
101
  style: {
104
- animation: !prefersReducedMotion ? webTerminalAnimationName : ''
102
+ animation: !shouldReduceMotion ? webTerminalAnimationName : ''
105
103
  },
106
104
  onAnimationEnd: onAnimationEnd
107
105
  }), /*#__PURE__*/React__default.createElement("header", {
@@ -119,15 +117,15 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
119
117
  "aria-label": documentationLinksIconDescription,
120
118
  menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
121
119
  size: "lg"
122
- }, documentationLinks.map(function (_ref4, i) {
123
- var rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
120
+ }, documentationLinks.map(function (_ref3, i) {
121
+ var rest = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
124
122
  return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
125
123
  key: i
126
124
  }, rest));
127
- })), actions.map(function (_ref5) {
128
- var renderIcon = _ref5.renderIcon,
129
- onClick = _ref5.onClick,
130
- iconDescription = _ref5.iconDescription;
125
+ })), actions.map(function (_ref4) {
126
+ var renderIcon = _ref4.renderIcon,
127
+ onClick = _ref4.onClick,
128
+ iconDescription = _ref4.iconDescription;
131
129
  return /*#__PURE__*/React__default.createElement(Button, {
132
130
  key: iconDescription,
133
131
  hasIconOnly: true,
@@ -6,20 +6,26 @@
6
6
  */
7
7
 
8
8
  import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
9
- import { useState, useEffect } from 'react';
10
- import { hasDocument } from '../utils/window.js';
9
+ import { useState } from 'react';
10
+ import { useIsomorphicEffect } from './useIsomorphicEffect.js';
11
11
 
12
12
  var usePrefersReducedMotion = function usePrefersReducedMotion() {
13
13
  var _useState = useState(false),
14
14
  _useState2 = _slicedToArray(_useState, 2),
15
15
  prefersReducedMotion = _useState2[0],
16
16
  setPrefersReducedMotion = _useState2[1];
17
- useEffect(function () {
18
- if (hasDocument()) {
19
- var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
20
- matches = _window$matchMedia.matches;
21
- setPrefersReducedMotion(matches);
22
- }
17
+ useIsomorphicEffect(function () {
18
+ var mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
19
+ var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: no-preference)'),
20
+ matches = _window$matchMedia.matches;
21
+ setPrefersReducedMotion(!matches);
22
+ var listener = function listener(event) {
23
+ setPrefersReducedMotion(!event.matches);
24
+ };
25
+ mediaQueryList.addEventListener('change', listener);
26
+ return function () {
27
+ mediaQueryList.removeEventListener('change', listener);
28
+ };
23
29
  }, []);
24
30
  return prefersReducedMotion;
25
31
  };
@@ -21,6 +21,7 @@ var hooks = require('./utils/hooks.js');
21
21
  var devtools = require('../../global/js/utils/devtools.js');
22
22
  var settings = require('../../settings.js');
23
23
  var lodash = require('lodash');
24
+ var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
24
25
 
25
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
27
 
@@ -45,7 +46,6 @@ var defaults = {
45
46
  */
46
47
 
47
48
  exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
48
- var _document$querySelect;
49
49
  var _ref$align = _ref.align,
50
50
  align = _ref$align === void 0 ? defaults.align : _ref$align,
51
51
  children = _ref.children,
@@ -64,7 +64,6 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
64
64
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
65
65
  var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
66
66
  var isStacked = overlayKind === enums.COACHMARK_OVERLAY_KIND.STACKED;
67
- var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
68
67
  var _useState = React.useState(isStacked),
69
68
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
70
69
  isOpen = _useState2[0],
@@ -88,6 +87,11 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
88
87
  var backupRef = React.useRef();
89
88
  var _coachmarkRef = ref || backupRef;
90
89
  var _overlayRef = overlayRef || overlayBackupRef;
90
+ var portalNode = React.useRef(null);
91
+ useIsomorphicEffect.useIsomorphicEffect(function () {
92
+ var _document$querySelect, _document, _document2, _document3;
93
+ 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');
94
+ }, [portalTarget]);
91
95
  var closeOverlay = function closeOverlay() {
92
96
  setIsOpen(false);
93
97
  };
@@ -178,18 +182,19 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
178
182
  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
179
183
  className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme), className),
180
184
  ref: _coachmarkRef
181
- }, rest, devtools.getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
185
+ }, 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, {
182
186
  ref: _overlayRef,
183
187
  fixedIsVisible: false,
184
188
  kind: overlayKind,
185
189
  onClose: handleClose,
186
190
  theme: theme,
187
191
  className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
188
- }, children),
189
- // Default to `document.body` when `portalNode` is `null`
190
- portalNode || document.body)));
192
+ }, children), // Default to `document.body` when `portalNode` is `null`
193
+ portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
191
194
  });
192
- var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object : index["default"].instanceOf(HTMLElement);
195
+ var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object :
196
+ // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
197
+ index["default"].instanceOf(HTMLElement);
193
198
 
194
199
  // Return a placeholder if not released and not enabled by feature flag
195
200
  exports.Coachmark = settings.pkg.checkComponentEnabled(exports.Coachmark, componentName);
@@ -20,6 +20,8 @@ var CoachmarkOverlay = require('../Coachmark/CoachmarkOverlay.js');
20
20
  var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
21
21
  var context = require('../Coachmark/utils/context.js');
22
22
  var enums = require('../Coachmark/utils/enums.js');
23
+ var framerMotion = require('framer-motion');
24
+ var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
23
25
 
24
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
27
 
@@ -48,7 +50,6 @@ var defaults = {
48
50
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
49
51
  */
50
52
  exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
51
- var _document$querySelect;
52
53
  var children = _ref.children,
53
54
  className = _ref.className,
54
55
  _ref$onClose = _ref.onClose,
@@ -60,7 +61,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
60
61
  theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
61
62
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
62
63
  var overlayRef = React.useRef(null);
63
- var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
64
+ var portalNode = React.useRef(null);
64
65
  var _useState = React.useState(false),
65
66
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
66
67
  isOpen = _useState2[0],
@@ -84,17 +85,19 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
84
85
  _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
85
86
  fixedIsVisible = _useState10[0],
86
87
  setFixedIsVisible = _useState10[1];
87
- var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
88
+ var shouldReduceMotion = framerMotion.useReducedMotion();
89
+ useIsomorphicEffect.useIsomorphicEffect(function () {
90
+ var _document$querySelect, _document, _document2, _document3;
91
+ 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');
92
+ }, [portalTarget]);
88
93
  var handleClose = React.useCallback(function () {
89
- console.log('HANDLING CLOSE HERE...');
90
- if (prefersReducedMotion.matches) {
94
+ if (shouldReduceMotion) {
91
95
  setIsOpen(false);
92
96
  } else {
93
97
  setFixedIsVisible(false);
94
98
  }
95
- }, [prefersReducedMotion.matches]);
99
+ }, [shouldReduceMotion]);
96
100
  var handleTransitionEnd = function handleTransitionEnd(e) {
97
- console.log('Here at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
98
101
  if (e.propertyName === 'transform' && !fixedIsVisible) {
99
102
  setIsOpen(false);
100
103
  onClose();
@@ -173,7 +176,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
173
176
  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(CoachmarkTagline.CoachmarkTagline, {
174
177
  title: tagline,
175
178
  onClose: onClose
176
- }), isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
179
+ }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
177
180
  ref: overlayRef,
178
181
  fixedIsVisible: fixedIsVisible,
179
182
  kind: enums.COACHMARK_OVERLAY_KIND.FIXED,
@@ -181,9 +184,8 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
181
184
  onTransitionEnd: handleTransitionEnd,
182
185
  theme: theme,
183
186
  className: cx__default["default"](fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
184
- }, children),
185
- // Default to `document.body` when `portalNode` is `null`
186
- portalNode || document.body)));
187
+ }, children), // Default to `document.body` when `portalNode` is `null`
188
+ portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
187
189
  });
188
190
 
189
191
  // Return a placeholder if not released and not enabled by feature flag
@@ -21,6 +21,7 @@ var CoachmarkStackHome = require('./CoachmarkStackHome.js');
21
21
  var CoachmarkTagline = require('../Coachmark/CoachmarkTagline.js');
22
22
  var context = require('../Coachmark/utils/context.js');
23
23
  var enums = require('../Coachmark/utils/enums.js');
24
+ var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
24
25
 
25
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
27
 
@@ -56,7 +57,6 @@ var defaults = {
56
57
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
57
58
  */
58
59
  exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
59
- var _document$querySelect;
60
60
  var children = _ref.children,
61
61
  className = _ref.className,
62
62
  _ref$onClose = _ref.onClose,
@@ -72,7 +72,11 @@ exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(funct
72
72
  theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
73
73
  title = _ref.title,
74
74
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
75
- var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
75
+ var portalNode = React.useRef();
76
+ useIsomorphicEffect.useIsomorphicEffect(function () {
77
+ var _document$querySelect, _document, _document2, _document3;
78
+ 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');
79
+ }, [portalTarget]);
76
80
  var stackHomeRef = React.useRef();
77
81
  var stackedCoachmarkRefs = React.useRef([]);
78
82
  var _useState = React.useState(false),
@@ -215,7 +219,7 @@ exports.CoachmarkStack = /*#__PURE__*/React__default["default"].forwardRef(funct
215
219
  portalTarget: portalTarget,
216
220
  closeButtonLabel: closeButtonLabel,
217
221
  title: title
218
- }), /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode)));
222
+ }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
219
223
  });
220
224
 
221
225
  // Return a placeholder if not released and not enabled by feature flag
@@ -20,6 +20,7 @@ var devtools = require('../../global/js/utils/devtools.js');
20
20
  var settings = require('../../settings.js');
21
21
  var reactDom = require('react-dom');
22
22
  var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
23
+ var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
23
24
  var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
24
25
 
25
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,7 +43,6 @@ var componentName = 'CoachmarkStackHome';
42
43
  * of other Onboarding components.
43
44
  */
44
45
  exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
45
- var _document$querySelect;
46
46
  var className = _ref.className,
47
47
  description = _ref.description,
48
48
  isOpen = _ref.isOpen,
@@ -66,11 +66,15 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
66
66
  }
67
67
  }, 100);
68
68
  }, [isOpen]);
69
+ var portalNode = React.useRef();
70
+ useIsomorphicEffect.useIsomorphicEffect(function () {
71
+ var _document$querySelect, _document, _document2, _document3;
72
+ 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');
73
+ }, [portalTarget]);
69
74
  if (!navLinkLabels) {
70
75
  return pconsole["default"].warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
71
76
  }
72
- var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
73
- return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
77
+ return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
74
78
  className: cx__default["default"](blockClass, className),
75
79
  ref: ref,
76
80
  role: "main"
@@ -112,7 +116,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
112
116
  setLinkFocusIndex(0);
113
117
  _onClose();
114
118
  }
115
- }, closeButtonLabel))))), portalNode);
119
+ }, closeButtonLabel))))), portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null;
116
120
  function renderNavLink(index, label) {
117
121
  var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
118
122
  return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -98,6 +98,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
98
98
  _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
99
99
  modalIsOpen = _useState10[0],
100
100
  setModalIsOpen = _useState10[1];
101
+ // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
101
102
  var previousState = usePreviousValue.usePreviousValue({
102
103
  currentStep: currentStep,
103
104
  open: open
@@ -155,8 +156,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
155
156
  useResetCreateComponent.useResetCreateComponent({
156
157
  firstIncludedStep: firstIncludedStep,
157
158
  previousState: previousState,
158
- /**@ts-ignore */
159
- open: open,
159
+ open: true,
160
160
  setCurrentStep: setCurrentStep,
161
161
  stepData: stepData,
162
162
  /**@ts-ignore */
@@ -25,11 +25,12 @@ var _excluded = ["onChange"];
25
25
  var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
26
26
  var SelectAll = function SelectAll(datagridState) {
27
27
  var _columns$;
28
- var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
28
+ var _useState = React.useState(),
29
29
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
30
30
  windowSize = _useState2[0],
31
31
  setWindowSize = _useState2[1];
32
32
  React.useLayoutEffect(function () {
33
+ setWindowSize(window.innerWidth);
33
34
  /* istanbul ignore next */
34
35
  function updateSize() {
35
36
  setWindowSize(window.innerWidth);
@@ -52,11 +52,12 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
52
52
  onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
53
53
  }
54
54
  }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
55
- var _useState3 = React.useState(window.innerWidth),
55
+ var _useState3 = React.useState(),
56
56
  _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
57
57
  windowSize = _useState4[0],
58
58
  setWindowSize = _useState4[1];
59
59
  React.useLayoutEffect(function () {
60
+ setWindowSize(window.innerWidth);
60
61
  function updateSize() {
61
62
  setWindowSize(window.innerWidth);
62
63
  }
@@ -77,7 +78,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
77
78
  var isFirstColumnStickyLeft = (columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
78
79
  return /*#__PURE__*/React__default["default"].createElement("th", {
79
80
  scope: "col",
80
- className: cx__default["default"]("".concat(blockClass, "__select-all-toggle-on"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
81
+ 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))
81
82
  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, _rollupPluginBabelHelpers["extends"]({}, selectProps, {
82
83
  name: "".concat(tableId, "-select-all-checkbox-name"),
83
84
  onClick: function onClick(e) {
@@ -90,11 +90,12 @@ var SelectRow = function SelectRow(datagridState) {
90
90
  withStickyColumn = datagridState.withStickyColumn,
91
91
  dispatch = datagridState.dispatch,
92
92
  getRowId = datagridState.getRowId;
93
- var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
93
+ var _useState = React.useState(),
94
94
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
95
95
  windowSize = _useState2[0],
96
96
  setWindowSize = _useState2[1];
97
97
  React.useLayoutEffect(function () {
98
+ setWindowSize(window.innerWidth);
98
99
  function updateSize() {
99
100
  setWindowSize(window.innerWidth);
100
101
  }
@@ -60,11 +60,20 @@ var NavItem = function NavItem(_ref) {
60
60
  _ref$tabIndex = _ref.tabIndex,
61
61
  tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
62
62
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
63
+ var _useState = React.useState(false),
64
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
65
+ hrefHasDifferentHost = _useState2[0],
66
+ setHrefHasDifferentHost = _useState2[1];
67
+ React.useEffect(function () {
68
+ if (href.indexOf(window.location.host) === -1) {
69
+ setHrefHasDifferentHost(true);
70
+ }
71
+ }, [href]);
63
72
  var internalId = React.useRef(uuidv4["default"]());
64
73
  var instanceId = "".concat(blockClass, "__").concat(internalId.current);
65
74
  var navItemId = id || instanceId;
66
75
  var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
67
- var externalLink = isAbsoluteLink.test(href) && href.indexOf(window.location.host) === -1;
76
+ var externalLink = isAbsoluteLink.test(href) && hrefHasDifferentHost;
68
77
  var linkClassName = "".concat(blockClass, "__link");
69
78
  var handleDisabled = function handleDisabled(action) {
70
79
  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -19,6 +19,7 @@ var settings = require('../../settings.js');
19
19
  var react = require('@carbon/react');
20
20
  var icons = require('@carbon/react/icons');
21
21
  var carbonMotion = require('@carbon/motion');
22
+ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
22
23
  var useControllableState = require('../../global/js/hooks/useControllableState.js');
23
24
 
24
25
  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
99
100
  var isInvalid = invalid;
100
101
  var isWarn = !isInvalid && warn;
101
102
  var isLocked = !isInvalid && !isWarn && locked;
102
- var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
103
- matches: true
104
- };
103
+ var shouldReduceMotion = usePrefersReducedMotion["default"]();
105
104
  if (open !== prevIsOpen) {
106
105
  if (isOpen && !open) {
107
106
  collapse();
@@ -111,7 +110,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
111
110
  setPrevIsOpen(open);
112
111
  }
113
112
  function expand() {
114
- if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
113
+ if (detailsRef.current && contentRef.current && !shouldReduceMotion) {
115
114
  setIsOpen(true);
116
115
  detailsRef.current.open = true;
117
116
  var _getComputedStyle = getComputedStyle(contentRef.current),
@@ -140,7 +139,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
140
139
  }
141
140
  }
142
141
  function collapse() {
143
- if (contentRef.current && !reducedMotion.matches) {
142
+ if (contentRef.current && !shouldReduceMotion) {
144
143
  setClosing(true);
145
144
  var _getComputedStyle2 = getComputedStyle(contentRef.current),
146
145
  paddingTop = _getComputedStyle2.paddingTop,
@@ -23,6 +23,7 @@ var react = require('@carbon/react');
23
23
  var icons = require('@carbon/react/icons');
24
24
  var variants = require('./motion/variants.js');
25
25
  var pconsole = require('../../global/js/utils/pconsole.js');
26
+ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
26
27
  var ActionSet = require('../ActionSet/ActionSet.js');
27
28
  var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
28
29
  var useFocus = require('../../global/js/hooks/useFocus.js');
@@ -53,7 +54,6 @@ var defaults = {
53
54
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
54
55
  */
55
56
  exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
56
- var _window;
57
57
  var actionToolbarButtons = _ref.actionToolbarButtons,
58
58
  actions = _ref.actions,
59
59
  _ref$animateTitle = _ref.animateTitle,
@@ -120,7 +120,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
120
120
  keyDownListener = _useFocus.keyDownListener;
121
121
  var panelRefValue = sidePanelRef.current;
122
122
  var previousOpen = usePreviousValue.usePreviousValue(open);
123
- var shouldReduceMotion = framerMotion.useReducedMotion();
123
+ var shouldReduceMotion = usePrefersReducedMotion["default"]();
124
124
 
125
125
  // Title animation on scroll related state
126
126
  var _useState7 = React.useState(0),
@@ -163,9 +163,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
163
163
  titleItemsStyles(animationProgress);
164
164
  }
165
165
  }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
166
- var reducedMotion = typeof document !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
167
- matches: true
168
- };
169
166
 
170
167
  // scroll panel to top going between steps
171
168
  React.useEffect(function () {
@@ -202,7 +199,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
202
199
  }, [launcherButtonRef, open, previousOpen]);
203
200
  var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
204
201
  var canDoAnimateTitle = false;
205
- if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
202
+ if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
206
203
  var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
207
204
  var titleEl = titleRef.current;
208
205
  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 (
218
215
  panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
219
216
  var scrollEl = innerContentRef.current;
220
217
  if (scrollEl) {
221
- var _window2;
222
- var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
218
+ var _window;
219
+ var innerComputed = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(innerContentRef.current);
223
220
  var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom) : 0;
224
221
  canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
225
222
  }
@@ -237,12 +234,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
237
234
 
238
235
  // Calculate scroll distances
239
236
  React.useEffect(function () {
240
- if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
237
+ if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
241
238
  checkSetDoAnimateTitle();
242
239
  }
243
240
 
244
241
  // eslint-disable-next-line react-hooks/exhaustive-deps
245
- }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
242
+ }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, shouldReduceMotion, id]);
246
243
 
247
244
  // click outside functionality if `includeOverlay` prop is set
248
245
  React.useEffect(function () {
@@ -278,10 +275,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
278
275
  // Set the internal state `animationComplete` to true if
279
276
  // prefers reduced motion is true
280
277
  React.useEffect(function () {
281
- if (reducedMotion.matches) {
278
+ if (shouldReduceMotion) {
282
279
  setAnimationComplete(true);
283
280
  }
284
- }, [reducedMotion.matches]);
281
+ }, [shouldReduceMotion]);
285
282
 
286
283
  // initializes the side panel to open
287
284
  var onAnimationStart = function onAnimationStart() {
@@ -300,10 +297,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
300
297
  }
301
298
  }, [open, placement, selectorPageContent, slideIn]);
302
299
  React.useEffect(function () {
303
- if (!open && previousState && previousState['open'] && reducedMotion.matches) {
300
+ if (!open && previousState && previousState['open'] && shouldReduceMotion) {
304
301
  onUnmount === null || onUnmount === void 0 || onUnmount();
305
302
  }
306
- }, [open, onUnmount, reducedMotion.matches, previousState]);
303
+ }, [open, onUnmount, shouldReduceMotion, previousState]);
307
304
 
308
305
  // used to set margins of content for slide in panel version
309
306
  React.useEffect(function () {
@@ -316,15 +313,15 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
316
313
  }
317
314
  if (placement && placement === 'right' && pageContentElement) {
318
315
  pageContentElement.style.marginInlineEnd = '0';
319
- pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
316
+ pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
320
317
  pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
321
318
  } else if (pageContentElement) {
322
319
  pageContentElement.style.marginInlineStart = '0';
323
- pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
320
+ pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
324
321
  pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
325
322
  }
326
323
  }
327
- }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
324
+ }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
328
325
  React.useEffect(function () {
329
326
  if (open) {
330
327
  setTimeout(function () {
@@ -350,7 +347,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
350
347
  className: "".concat(blockClass, "__title-text"),
351
348
  title: title,
352
349
  "aria-hidden": false
353
- }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default["default"].createElement("h2", {
350
+ }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React__default["default"].createElement("h2", {
354
351
  className: "".concat(blockClass, "__collapsed-title-text"),
355
352
  title: title,
356
353
  "aria-hidden": true
@@ -367,7 +364,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
367
364
  });
368
365
  }
369
366
  return /*#__PURE__*/React__default["default"].createElement("div", {
370
- 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)),
367
+ 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)),
371
368
  ref: headerRef
372
369
  }, currentStep > 0 && /*#__PURE__*/React__default["default"].createElement(react.Button, {
373
370
  "aria-label": navigationBackIconDescription,
@@ -16,15 +16,13 @@ export namespace overlayVariants {
16
16
  }
17
17
  }
18
18
  export namespace panelVariants {
19
- export function visible_1({ shouldReduceMotion }: {
20
- shouldReduceMotion: any;
21
- }): {
19
+ export function visible_1(): {
22
20
  x: number;
23
21
  transition: {
24
22
  duration: number;
25
23
  ease: number[];
26
24
  };
27
- opacity: any;
25
+ opacity: number;
28
26
  };
29
27
  export { visible_1 as visible };
30
28
  export function hidden_1({ placement, shouldReduceMotion }: {
@@ -32,7 +30,7 @@ export namespace panelVariants {
32
30
  shouldReduceMotion: any;
33
31
  }): {
34
32
  x: string | number;
35
- opacity: any;
33
+ opacity: number;
36
34
  };
37
35
  export { hidden_1 as hidden };
38
36
  export function exit_1({ placement, shouldReduceMotion }: {
@@ -44,7 +42,7 @@ export namespace panelVariants {
44
42
  duration: number;
45
43
  ease: number[];
46
44
  };
47
- opacity: any;
45
+ opacity: number;
48
46
  };
49
47
  export { exit_1 as exit };
50
48
  }