@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.
- package/es/components/Coachmark/Coachmark.js +12 -7
- package/es/components/CoachmarkFixed/CoachmarkFixed.js +13 -11
- package/es/components/CoachmarkStack/CoachmarkStack.js +7 -3
- package/es/components/CoachmarkStack/CoachmarkStackHome.js +8 -4
- package/es/components/CreateFullPage/CreateFullPage.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -2
- package/es/components/Datagrid/useSelectRows.js +2 -1
- package/es/components/Nav/NavItem.js +12 -3
- package/es/components/OptionsTile/OptionsTile.js +4 -5
- package/es/components/SidePanel/SidePanel.js +17 -20
- package/es/components/SidePanel/motion/variants.d.ts +4 -6
- package/es/components/SidePanel/motion/variants.js +10 -11
- package/es/components/Tearsheet/TearsheetShell.js +3 -1
- package/es/components/WebTerminal/WebTerminal.js +10 -12
- package/es/global/js/hooks/usePrefersReducedMotion.js +14 -8
- package/lib/components/Coachmark/Coachmark.js +12 -7
- package/lib/components/CoachmarkFixed/CoachmarkFixed.js +13 -11
- package/lib/components/CoachmarkStack/CoachmarkStack.js +7 -3
- package/lib/components/CoachmarkStack/CoachmarkStackHome.js +8 -4
- package/lib/components/CreateFullPage/CreateFullPage.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -2
- package/lib/components/Datagrid/useSelectRows.js +2 -1
- package/lib/components/Nav/NavItem.js +10 -1
- package/lib/components/OptionsTile/OptionsTile.js +4 -5
- package/lib/components/SidePanel/SidePanel.js +16 -19
- package/lib/components/SidePanel/motion/variants.d.ts +4 -6
- package/lib/components/SidePanel/motion/variants.js +10 -11
- package/lib/components/Tearsheet/TearsheetShell.js +3 -1
- package/lib/components/WebTerminal/WebTerminal.js +10 -12
- package/lib/global/js/hooks/usePrefersReducedMotion.js +13 -7
- package/package.json +2 -2
- package/es/global/js/utils/window.d.ts +0 -2
- package/es/global/js/utils/window.js +0 -12
- package/lib/global/js/utils/window.d.ts +0 -2
- 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
|
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 (
|
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: !
|
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 (
|
123
|
-
var rest = _extends({}, (_objectDestructuringEmpty(
|
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 (
|
128
|
-
var renderIcon =
|
129
|
-
onClick =
|
130
|
-
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
|
10
|
-
import {
|
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
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
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
|
-
|
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 :
|
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 =
|
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
|
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
|
-
|
90
|
-
if (prefersReducedMotion.matches) {
|
94
|
+
if (shouldReduceMotion) {
|
91
95
|
setIsOpen(false);
|
92
96
|
} else {
|
93
97
|
setFixedIsVisible(false);
|
94
98
|
}
|
95
|
-
}, [
|
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
|
-
|
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 =
|
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
|
-
|
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
|
-
|
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(
|
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(
|
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(
|
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) &&
|
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
|
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 && !
|
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 && !
|
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 =
|
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 && !
|
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
|
222
|
-
var innerComputed = (
|
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 && !
|
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,
|
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 (
|
278
|
+
if (shouldReduceMotion) {
|
282
279
|
setAnimationComplete(true);
|
283
280
|
}
|
284
|
-
}, [
|
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'] &&
|
300
|
+
if (!open && previousState && previousState['open'] && shouldReduceMotion) {
|
304
301
|
onUnmount === null || onUnmount === void 0 || onUnmount();
|
305
302
|
}
|
306
|
-
}, [open, onUnmount,
|
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 = !
|
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 = !
|
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,
|
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 && !
|
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"),
|
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(
|
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:
|
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:
|
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:
|
45
|
+
opacity: number;
|
48
46
|
};
|
49
47
|
export { exit_1 as exit };
|
50
48
|
}
|