@carbon/ibm-products 2.54.0-canary.71 → 2.54.0-canary.73

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 (5) hide show
  1. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +12 -0
  2. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +39 -8
  3. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +12 -0
  4. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +39 -8
  5. package/package.json +2 -2
package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts CHANGED
@@ -46,6 +46,18 @@ export interface CoachmarkOverlayElementsProps {
46
46
  * The label for the Close button.
47
47
  */
48
48
  closeButtonLabel?: string;
49
+ /**
50
+ * Callback called when clicking on the Next button.
51
+ */
52
+ onNext?: () => void;
53
+ /**
54
+ * Callback called when clicking on the Previous button.
55
+ */
56
+ onBack?: () => void;
57
+ /**
58
+ * Current step of the coachmarks.
59
+ */
60
+ currentStep?: number;
49
61
  }
50
62
  /**
51
63
  * Composable container to allow for the displaying of CoachmarkOverlayElement
package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js CHANGED
@@ -20,7 +20,7 @@ import { pkg } from '../../settings.js';
20
20
  import '../Coachmark/Coachmark.js';
21
21
  import { useCoachmark } from '../Coachmark/utils/context.js';
22
22
 
23
- var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
23
+ var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "currentStep", "nextButtonText", "previousButtonLabel", "closeButtonLabel", "onNext", "onBack"];
24
24
 
25
25
  // The block part of our conventional BEM class names (blockClass__E--M).
26
26
  var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-elements");
@@ -41,7 +41,10 @@ var defaults = {
41
41
  isVisible: false,
42
42
  nextButtonText: 'Next',
43
43
  previousButtonLabel: 'Back',
44
- closeButtonLabel: 'Got it'
44
+ closeButtonLabel: 'Got it',
45
+ onNext: undefined,
46
+ onBack: undefined,
47
+ currentStep: 0
45
48
  };
46
49
  /**
47
50
  * Composable container to allow for the displaying of CoachmarkOverlayElement
@@ -54,12 +57,18 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
54
57
  isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
55
58
  media = _ref.media,
56
59
  renderMedia = _ref.renderMedia,
60
+ _ref$currentStep = _ref.currentStep,
61
+ currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
57
62
  _ref$nextButtonText = _ref.nextButtonText,
58
63
  nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
59
64
  _ref$previousButtonLa = _ref.previousButtonLabel,
60
65
  previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
61
66
  _ref$closeButtonLabel = _ref.closeButtonLabel,
62
67
  closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
68
+ _ref$onNext = _ref.onNext,
69
+ onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
70
+ _ref$onBack = _ref.onBack,
71
+ onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
63
72
  rest = _objectWithoutProperties(_ref, _excluded);
64
73
  var buttonFocusRef = useRef(undefined);
65
74
  var scrollRef = useRef(undefined);
@@ -67,7 +76,7 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
67
76
  _useState2 = _slicedToArray(_useState, 2),
68
77
  scrollPosition = _useState2[0],
69
78
  setScrollPosition = _useState2[1];
70
- var _useState3 = useState(0),
79
+ var _useState3 = useState(currentStep),
71
80
  _useState4 = _slicedToArray(_useState3, 2),
72
81
  currentProgStep = _useState4[0],
73
82
  _setCurrentProgStep = _useState4[1];
@@ -90,6 +99,15 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
90
99
  playStep: currentProgStep
91
100
  });
92
101
  }, [currentProgStep, renderMedia]);
102
+ useEffect(function () {
103
+ var _scrollRef$current, _scrollRef$current$sc;
104
+ // When current step is set by props
105
+ // scroll to the appropriate view on the carrousel
106
+ var targetStep = clamp(currentStep, progStepFloor, progStepCeil);
107
+ scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
108
+ // Avoid circular call to this hook
109
+ // eslint-disable-next-line react-hooks/exhaustive-deps
110
+ }, [currentStep]);
93
111
  useEffect(function () {
94
112
  // On mount, one of the two primary buttons ("next" or "close")
95
113
  // will be rendered and must have focus. (a11y)
@@ -131,7 +149,6 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
131
149
  }, coachmark.closeButtonProps, {
132
150
  ref: buttonFocusRef
133
151
  }), closeButtonLabel))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Carousel, {
134
- disableArrowScroll: true,
135
152
  ref: scrollRef,
136
153
  onScroll: function onScroll(scrollPercent) {
137
154
  setScrollPosition(scrollPercent);
@@ -146,10 +163,11 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
146
163
  title: previousButtonLabel,
147
164
  disabled: scrollPosition === 0,
148
165
  onClick: function onClick() {
149
- var _scrollRef$current, _scrollRef$current$sc;
166
+ var _scrollRef$current2, _scrollRef$current2$s;
150
167
  var targetStep = clamp(currentProgStep - 1, progStepFloor, progStepCeil);
151
- scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
168
+ scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
152
169
  setCurrentProgStep(targetStep);
170
+ onBack === null || onBack === void 0 || onBack();
153
171
  }
154
172
  }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React__default.createElement(Button, {
155
173
  size: "sm",
@@ -157,10 +175,11 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
157
175
  title: nextButtonText,
158
176
  disabled: scrollPosition === 1,
159
177
  onClick: function onClick() {
160
- var _scrollRef$current2, _scrollRef$current2$s;
178
+ var _scrollRef$current3, _scrollRef$current3$s;
161
179
  var targetStep = clamp(currentProgStep + 1, progStepFloor, progStepCeil);
162
- scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
180
+ scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
163
181
  setCurrentProgStep(targetStep);
182
+ onNext === null || onNext === void 0 || onNext();
164
183
  }
165
184
  }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React__default.createElement(Button, _extends({
166
185
  size: "sm",
@@ -194,6 +213,10 @@ CoachmarkOverlayElements.propTypes = {
194
213
  * The label for the Close button.
195
214
  */
196
215
  closeButtonLabel: PropTypes.string,
216
+ /**
217
+ * Current step of the coachmarks
218
+ */
219
+ currentStep: PropTypes.number,
197
220
  /**
198
221
  * The visibility of CoachmarkOverlayElements is
199
222
  * managed in the parent component.
@@ -215,6 +238,14 @@ CoachmarkOverlayElements.propTypes = {
215
238
  * The label for the Next button.
216
239
  */
217
240
  nextButtonText: PropTypes.string,
241
+ /**
242
+ * Optional callback called when clicking on the Previous button.
243
+ */
244
+ onBack: PropTypes.func,
245
+ /**
246
+ * Optional callback called when clicking on the Next button.
247
+ */
248
+ onNext: PropTypes.func,
218
249
  /**
219
250
  * The label for the Previous button.
220
251
  */
package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts CHANGED
@@ -46,6 +46,18 @@ export interface CoachmarkOverlayElementsProps {
46
46
  * The label for the Close button.
47
47
  */
48
48
  closeButtonLabel?: string;
49
+ /**
50
+ * Callback called when clicking on the Next button.
51
+ */
52
+ onNext?: () => void;
53
+ /**
54
+ * Callback called when clicking on the Previous button.
55
+ */
56
+ onBack?: () => void;
57
+ /**
58
+ * Current step of the coachmarks.
59
+ */
60
+ currentStep?: number;
49
61
  }
50
62
  /**
51
63
  * Composable container to allow for the displaying of CoachmarkOverlayElement
package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js CHANGED
@@ -22,7 +22,7 @@ var settings = require('../../settings.js');
22
22
  require('../Coachmark/Coachmark.js');
23
23
  var context = require('../Coachmark/utils/context.js');
24
24
 
25
- var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
25
+ var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "currentStep", "nextButtonText", "previousButtonLabel", "closeButtonLabel", "onNext", "onBack"];
26
26
 
27
27
  // The block part of our conventional BEM class names (blockClass__E--M).
28
28
  var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
@@ -43,7 +43,10 @@ var defaults = {
43
43
  isVisible: false,
44
44
  nextButtonText: 'Next',
45
45
  previousButtonLabel: 'Back',
46
- closeButtonLabel: 'Got it'
46
+ closeButtonLabel: 'Got it',
47
+ onNext: undefined,
48
+ onBack: undefined,
49
+ currentStep: 0
47
50
  };
48
51
  /**
49
52
  * Composable container to allow for the displaying of CoachmarkOverlayElement
@@ -56,12 +59,18 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
56
59
  isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
57
60
  media = _ref.media,
58
61
  renderMedia = _ref.renderMedia,
62
+ _ref$currentStep = _ref.currentStep,
63
+ currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
59
64
  _ref$nextButtonText = _ref.nextButtonText,
60
65
  nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
61
66
  _ref$previousButtonLa = _ref.previousButtonLabel,
62
67
  previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
63
68
  _ref$closeButtonLabel = _ref.closeButtonLabel,
64
69
  closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
70
+ _ref$onNext = _ref.onNext,
71
+ onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
72
+ _ref$onBack = _ref.onBack,
73
+ onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
65
74
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
66
75
  var buttonFocusRef = React.useRef(undefined);
67
76
  var scrollRef = React.useRef(undefined);
@@ -69,7 +78,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
69
78
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
70
79
  scrollPosition = _useState2[0],
71
80
  setScrollPosition = _useState2[1];
72
- var _useState3 = React.useState(0),
81
+ var _useState3 = React.useState(currentStep),
73
82
  _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
74
83
  currentProgStep = _useState4[0],
75
84
  _setCurrentProgStep = _useState4[1];
@@ -92,6 +101,15 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
92
101
  playStep: currentProgStep
93
102
  });
94
103
  }, [currentProgStep, renderMedia]);
104
+ React.useEffect(function () {
105
+ var _scrollRef$current, _scrollRef$current$sc;
106
+ // When current step is set by props
107
+ // scroll to the appropriate view on the carrousel
108
+ var targetStep = lodash.clamp(currentStep, progStepFloor, progStepCeil);
109
+ scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
110
+ // Avoid circular call to this hook
111
+ // eslint-disable-next-line react-hooks/exhaustive-deps
112
+ }, [currentStep]);
95
113
  React.useEffect(function () {
96
114
  // On mount, one of the two primary buttons ("next" or "close")
97
115
  // will be rendered and must have focus. (a11y)
@@ -133,7 +151,6 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
133
151
  }, coachmark.closeButtonProps, {
134
152
  ref: buttonFocusRef
135
153
  }), closeButtonLabel))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Carousel.Carousel, {
136
- disableArrowScroll: true,
137
154
  ref: scrollRef,
138
155
  onScroll: function onScroll(scrollPercent) {
139
156
  setScrollPosition(scrollPercent);
@@ -148,10 +165,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
148
165
  title: previousButtonLabel,
149
166
  disabled: scrollPosition === 0,
150
167
  onClick: function onClick() {
151
- var _scrollRef$current, _scrollRef$current$sc;
168
+ var _scrollRef$current2, _scrollRef$current2$s;
152
169
  var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
153
- scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
170
+ scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
154
171
  setCurrentProgStep(targetStep);
172
+ onBack === null || onBack === void 0 || onBack();
155
173
  }
156
174
  }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React.createElement(react.Button, {
157
175
  size: "sm",
@@ -159,10 +177,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
159
177
  title: nextButtonText,
160
178
  disabled: scrollPosition === 1,
161
179
  onClick: function onClick() {
162
- var _scrollRef$current2, _scrollRef$current2$s;
180
+ var _scrollRef$current3, _scrollRef$current3$s;
163
181
  var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
164
- scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
182
+ scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
165
183
  setCurrentProgStep(targetStep);
184
+ onNext === null || onNext === void 0 || onNext();
166
185
  }
167
186
  }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
168
187
  size: "sm",
@@ -196,6 +215,10 @@ exports.CoachmarkOverlayElements.propTypes = {
196
215
  * The label for the Close button.
197
216
  */
198
217
  closeButtonLabel: index.default.string,
218
+ /**
219
+ * Current step of the coachmarks
220
+ */
221
+ currentStep: index.default.number,
199
222
  /**
200
223
  * The visibility of CoachmarkOverlayElements is
201
224
  * managed in the parent component.
@@ -217,6 +240,14 @@ exports.CoachmarkOverlayElements.propTypes = {
217
240
  * The label for the Next button.
218
241
  */
219
242
  nextButtonText: index.default.string,
243
+ /**
244
+ * Optional callback called when clicking on the Previous button.
245
+ */
246
+ onBack: index.default.func,
247
+ /**
248
+ * Optional callback called when clicking on the Next button.
249
+ */
250
+ onNext: index.default.func,
220
251
  /**
221
252
  * The label for the Previous button.
222
253
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.54.0-canary.71+1c918d160",
4
+ "version": "2.54.0-canary.73+36bd4f96c",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "1c918d1605f2a370988d7ade503c1e57e0d43df1"
123
+ "gitHead": "36bd4f96c4d5ab6f3fd5ef1a732e9efbf6ec5212"
124
124
  }