@storybook/addon-interactions 6.4.0-beta.32 → 6.4.0-rc.10

package/dist/cjs/components/Interaction/Interaction.js

@@ -87,7 +87,7 @@ var RowContainer = (0, _theming.styled)('div', {
     borderBottom: "1px solid ".concat(theme.appBorderColor),
     fontFamily: _theming.typography.fonts.base,
     fontSize: 13
-  }, call.state === _instrumenter.CallStates.ERROR && {
+  }, call.status === _instrumenter.CallStates.ERROR && {
     backgroundColor: theme.base === 'dark' ? (0, _polished.transparentize)(0.93, theme.color.negative) : theme.background.warning
   });
 });
@@ -109,17 +109,17 @@ var RowLabel = (0, _theming.styled)('button', {
     margin: 0,
     padding: '8px 15px',
     textAlign: 'start',
-    cursor: disabled || call.state === _instrumenter.CallStates.ERROR ? 'default' : 'pointer',
-    '&:hover': {
+    cursor: disabled || call.status === _instrumenter.CallStates.ERROR ? 'default' : 'pointer',
+    '&:hover': disabled ? {} : {
       background: theme.background.hoverable
     },
     '&:focus-visible': {
       outline: 0,
-      boxShadow: "inset 3px 0 0 0 ".concat(call.state === _instrumenter.CallStates.ERROR ? theme.color.warning : theme.color.secondary),
-      background: call.state === _instrumenter.CallStates.ERROR ? 'transparent' : theme.background.hoverable
+      boxShadow: "inset 3px 0 0 0 ".concat(call.status === _instrumenter.CallStates.ERROR ? theme.color.warning : theme.color.secondary),
+      background: call.status === _instrumenter.CallStates.ERROR ? 'transparent' : theme.background.hoverable
     },
     '& > div': {
-      opacity: call.state === _instrumenter.CallStates.WAITING ? 0.5 : 1
+      opacity: call.status === _instrumenter.CallStates.WAITING ? 0.5 : 1
     }
   };
 });
@@ -132,9 +132,8 @@ var RowMessage = (0, _theming.styled)('pre')({
 var Interaction = function Interaction(_ref3) {
   var call = _ref3.call,
       callsById = _ref3.callsById,
-      onClick = _ref3.onClick,
-      isDisabled = _ref3.isDisabled,
-      isDebuggingEnabled = _ref3.isDebuggingEnabled;
+      controls = _ref3.controls,
+      controlStates = _ref3.controlStates;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -145,16 +144,18 @@ var Interaction = function Interaction(_ref3) {
     call: call
   }, /*#__PURE__*/React.createElement(RowLabel, {
     call: call,
-    onClick: onClick,
-    disabled: isDebuggingEnabled ? isDisabled : true,
+    onClick: function onClick() {
+      return controls.goto(call.id);
+    },
+    disabled: !controlStates.goto,
     onMouseEnter: function onMouseEnter() {
-      return isDebuggingEnabled && setIsHovered(true);
+      return controlStates.goto && setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return isDebuggingEnabled && setIsHovered(false);
+      return controlStates.goto && setIsHovered(false);
     }
   }, /*#__PURE__*/React.createElement(_StatusIcon.StatusIcon, {
-    status: isHovered ? _instrumenter.CallStates.ACTIVE : call.state
+    status: isHovered ? _instrumenter.CallStates.ACTIVE : call.status
   }), /*#__PURE__*/React.createElement(MethodCallWrapper, {
     style: {
       marginLeft: 6,
@@ -163,7 +164,7 @@ var Interaction = function Interaction(_ref3) {
   }, /*#__PURE__*/React.createElement(_MethodCall.MethodCall, {
     call: call,
     callsById: callsById
-  }))), call.state === _instrumenter.CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(_MatcherResult.MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
+  }))), call.status === _instrumenter.CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(_MatcherResult.MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
 };
 
 exports.Interaction = Interaction;

package/dist/cjs/components/Interaction/Interaction.stories.js

@@ -31,6 +31,10 @@ var _mocks = require("../../mocks");
 
 var _Interaction = require("./Interaction");
 
+var _Subnav = _interopRequireDefault(require("../Subnav/Subnav.stories"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -40,8 +44,8 @@ var _default = {
   component: _Interaction.Interaction,
   args: {
     callsById: new Map(),
-    isDisabled: false,
-    isDebuggingEnabled: true
+    controls: _Subnav.default.args.controls,
+    controlStates: _Subnav.default.args.controlStates
   }
 };
 exports.default = _default;
@@ -71,7 +75,9 @@ var Done = {
 exports.Done = Done;
 var Disabled = {
   args: Object.assign({}, Done.args, {
-    isDisabled: true
+    controlStates: Object.assign({}, _Subnav.default.args.controlStates, {
+      goto: false
+    })
   })
 };
 exports.Disabled = Disabled;

package/dist/cjs/components/Subnav/Subnav.js

@@ -103,15 +103,10 @@ var withTooltipModifiers = [{
 }];
 
 var Subnav = function Subnav(_ref6) {
-  var isDisabled = _ref6.isDisabled,
-      hasNext = _ref6.hasNext,
-      hasPrevious = _ref6.hasPrevious,
-      storyFileName = _ref6.storyFileName,
+  var controls = _ref6.controls,
+      controlStates = _ref6.controlStates,
       status = _ref6.status,
-      onStart = _ref6.onStart,
-      onPrevious = _ref6.onPrevious,
-      onNext = _ref6.onNext,
-      onEnd = _ref6.onEnd,
+      storyFileName = _ref6.storyFileName,
       onScrollToEnd = _ref6.onScrollToEnd;
   var buttonText = status === _instrumenter.CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
   return /*#__PURE__*/_react.default.createElement(_components.Bar, null, /*#__PURE__*/_react.default.createElement(StyledSubnav, null, /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(_StatusBadge.StatusBadge, {
@@ -122,49 +117,49 @@ var Subnav = function Subnav(_ref6) {
   }, buttonText), /*#__PURE__*/_react.default.createElement(StyledSeparator, null), /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasPrevious ? 'hover' : 'none',
+    trigger: controlStates.start ? 'hover' : 'none',
     tooltip: /*#__PURE__*/_react.default.createElement(Note, {
       note: "Go to start"
     })
   }, /*#__PURE__*/_react.default.createElement(RewindButton, {
-    onClick: onStart,
-    disabled: isDisabled || !hasPrevious
+    onClick: controls.start,
+    disabled: !controlStates.start
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
     icon: "rewind"
   }))), /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasPrevious ? 'hover' : 'none',
+    trigger: controlStates.back ? 'hover' : 'none',
     tooltip: /*#__PURE__*/_react.default.createElement(Note, {
       note: "Go back"
     })
   }, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
-    onClick: onPrevious,
-    disabled: isDisabled || !hasPrevious
+    onClick: controls.back,
+    disabled: !controlStates.back
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
     icon: "playback"
   }))), /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasNext ? 'hover' : 'none',
+    trigger: controlStates.next ? 'hover' : 'none',
     tooltip: /*#__PURE__*/_react.default.createElement(Note, {
       note: "Go forward"
     })
   }, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
-    onClick: onNext,
-    disabled: isDisabled || !hasNext
+    onClick: controls.next,
+    disabled: !controlStates.next
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
     icon: "playnext"
   }))), /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
     modifiers: withTooltipModifiers,
-    trigger: hasNext ? 'hover' : 'none',
+    trigger: controlStates.end ? 'hover' : 'none',
     hasChrome: false,
     tooltip: /*#__PURE__*/_react.default.createElement(Note, {
       note: "Go to end"
     })
   }, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
-    onClick: onEnd,
-    disabled: isDisabled || !hasNext
+    onClick: controls.end,
+    disabled: !controlStates.end
   }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
     icon: "fastforward"
   })))), storyFileName && /*#__PURE__*/_react.default.createElement(Group, null, /*#__PURE__*/_react.default.createElement(StyledLocation, null, storyFileName))));

package/dist/cjs/components/Subnav/Subnav.stories.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AtTheEnd = exports.AtTheBeginning = exports.Runs = exports.Fail = exports.Pass = exports.default = void 0;
+exports.Locked = exports.Midway = exports.AtStart = exports.Runs = exports.Fail = exports.Pass = exports.default = void 0;
+
+var _addonActions = require("@storybook/addon-actions");
 
 var _instrumenter = require("@storybook/instrumenter");
 
@@ -13,11 +15,21 @@ var _default = {
   title: 'Addons/Interactions/Subnav',
   component: _Subnav.Subnav,
   args: {
-    onPrevious: function onPrevious() {},
-    onNext: function onNext() {},
-    onReplay: function onReplay() {},
-    goToStart: function goToStart() {},
-    goToEnd: function goToEnd() {},
+    controls: {
+      start: (0, _addonActions.action)('start'),
+      back: (0, _addonActions.action)('back'),
+      goto: (0, _addonActions.action)('goto'),
+      next: (0, _addonActions.action)('next'),
+      end: (0, _addonActions.action)('end')
+    },
+    controlStates: {
+      debugger: true,
+      start: true,
+      back: true,
+      goto: true,
+      next: false,
+      end: false
+    },
     storyFileName: 'Subnav.stories.tsx',
     hasNext: true,
     hasPrevious: true
@@ -42,19 +54,45 @@ var Runs = {
   }
 };
 exports.Runs = Runs;
-var AtTheBeginning = {
-  name: 'at the beginning',
+var AtStart = {
+  args: {
+    status: _instrumenter.CallStates.WAITING,
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true
+    }
+  }
+};
+exports.AtStart = AtStart;
+var Midway = {
   args: {
-    status: _instrumenter.CallStates.DONE,
-    hasPrevious: false
+    status: _instrumenter.CallStates.WAITING,
+    controlStates: {
+      debugger: true,
+      start: true,
+      back: true,
+      goto: true,
+      next: true,
+      end: true
+    }
   }
 };
-exports.AtTheBeginning = AtTheBeginning;
-var AtTheEnd = {
-  name: 'at the end',
+exports.Midway = Midway;
+var Locked = {
   args: {
-    status: _instrumenter.CallStates.DONE,
-    hasNext: false
+    status: _instrumenter.CallStates.ACTIVE,
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: false,
+      next: false,
+      end: false
+    }
   }
 };
-exports.AtTheEnd = AtTheEnd;
+exports.Locked = Locked;

package/dist/cjs/mocks/index.js

@@ -9,9 +9,10 @@ require("core-js/modules/es.object.assign.js");
 
 var _instrumenter = require("@storybook/instrumenter");
 
-var getCall = function getCall(state) {
+var getCall = function getCall(status) {
   var defaultData = {
     id: 'addons-interactions-accountform--standard-email-filled [3] change',
+    cursor: 0,
     path: ['fireEvent'],
     method: 'change',
     storyId: 'addons-interactions-accountform--standard-email-filled',
@@ -25,11 +26,11 @@ var getCall = function getCall(state) {
     }],
     interceptable: true,
     retain: false,
-    state: state
+    status: status
   };
   var overrides = _instrumenter.CallStates.ERROR ? {
     exception: {
-      callId: '',
+      name: 'Error',
       stack: '',
       message: "Things didn't work!"
     }

package/dist/esm/Panel.js

@@ -25,8 +25,6 @@ import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.regexp.to-string.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
@@ -41,7 +39,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import global from 'global';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { useChannel, useParameter, useStorybookState } from '@storybook/api';
+import { useChannel, useParameter } from '@storybook/api';
 import { STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import { AddonPanel, Link, Placeholder } from '@storybook/components';
 import { EVENTS, CallStates } from '@storybook/instrumenter';
@@ -49,9 +47,14 @@ import { styled } from '@storybook/theming';
 import { StatusIcon } from './components/StatusIcon/StatusIcon';
 import { Subnav } from './components/Subnav/Subnav';
 import { Interaction } from './components/Interaction/Interaction';
-var FEATURES = global.FEATURES;
-var pendingStates = [CallStates.ACTIVE, CallStates.WAITING];
-var completedStates = [CallStates.DONE, CallStates.ERROR];
+var INITIAL_CONTROL_STATES = {
+  debugger: false,
+  start: false,
+  back: false,
+  goto: false,
+  next: false,
+  end: false
+};
 var TabIcon = styled(StatusIcon)({
   marginLeft: 5
 });
@@ -63,46 +66,31 @@ var TabStatus = function TabStatus(_ref) {
 };
 
 export var AddonPanelPure = /*#__PURE__*/React.memo(function (_ref2) {
-  var interactions = _ref2.interactions,
-      isDisabled = _ref2.isDisabled,
-      hasPrevious = _ref2.hasPrevious,
-      hasNext = _ref2.hasNext,
+  var calls = _ref2.calls,
+      controls = _ref2.controls,
+      controlStates = _ref2.controlStates,
+      interactions = _ref2.interactions,
       fileName = _ref2.fileName,
       hasException = _ref2.hasException,
       isPlaying = _ref2.isPlaying,
-      onStart = _ref2.onStart,
-      onPrevious = _ref2.onPrevious,
-      onNext = _ref2.onNext,
-      onEnd = _ref2.onEnd,
       onScrollToEnd = _ref2.onScrollToEnd,
-      calls = _ref2.calls,
-      onInteractionClick = _ref2.onInteractionClick,
       endRef = _ref2.endRef,
-      isDebuggingEnabled = _ref2.isDebuggingEnabled,
-      panelProps = _objectWithoutProperties(_ref2, ["interactions", "isDisabled", "hasPrevious", "hasNext", "fileName", "hasException", "isPlaying", "onStart", "onPrevious", "onNext", "onEnd", "onScrollToEnd", "calls", "onInteractionClick", "endRef", "isDebuggingEnabled"]);
+      panelProps = _objectWithoutProperties(_ref2, ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "onScrollToEnd", "endRef"]);
 
-  return /*#__PURE__*/React.createElement(AddonPanel, panelProps, isDebuggingEnabled && interactions.length > 0 && /*#__PURE__*/React.createElement(Subnav, {
-    isDisabled: isDisabled,
-    hasPrevious: hasPrevious,
-    hasNext: hasNext,
-    storyFileName: fileName,
+  return /*#__PURE__*/React.createElement(AddonPanel, panelProps, controlStates.debugger && interactions.length > 0 && /*#__PURE__*/React.createElement(Subnav, {
+    controls: controls,
+    controlStates: controlStates,
     status: // eslint-disable-next-line no-nested-ternary
     isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE,
-    onStart: onStart,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnd: onEnd,
+    storyFileName: fileName,
     onScrollToEnd: onScrollToEnd
   }), interactions.map(function (call) {
     return /*#__PURE__*/React.createElement(Interaction, {
       key: call.id,
       call: call,
       callsById: calls,
-      isDebuggingEnabled: isDebuggingEnabled,
-      isDisabled: isDisabled,
-      onClick: function onClick() {
-        return onInteractionClick(call.id);
-      }
+      controls: controls,
+      controlStates: controlStates
     });
   }), /*#__PURE__*/React.createElement("div", {
     ref: endRef
@@ -115,40 +103,46 @@ export var AddonPanelPure = /*#__PURE__*/React.memo(function (_ref2) {
 export var Panel = function Panel(props) {
   var _useChannel;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isLocked = _React$useState2[0],
-      setLock = _React$useState2[1];
+      storyId = _React$useState2[0],
+      setStoryId = _React$useState2[1];
 
-  var _React$useState3 = React.useState(true),
+  var _React$useState3 = React.useState(INITIAL_CONTROL_STATES),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isPlaying = _React$useState4[0],
-      setPlaying = _React$useState4[1];
+      controlStates = _React$useState4[0],
+      setControlStates = _React$useState4[1];
 
-  var _React$useState5 = React.useState(),
+  var _React$useState5 = React.useState(false),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      scrollTarget = _React$useState6[0],
-      setScrollTarget = _React$useState6[1];
+      isPlaying = _React$useState6[0],
+      setPlaying = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      scrollTarget = _React$useState8[0],
+      setScrollTarget = _React$useState8[1]; // Calls are tracked in a ref so we don't needlessly rerender.
+
 
   var calls = React.useRef(new Map());
 
   var setCall = function setCall(_ref3) {
-    var state = _ref3.state,
-        call = _objectWithoutProperties(_ref3, ["state"]);
+    var status = _ref3.status,
+        call = _objectWithoutProperties(_ref3, ["status"]);
 
     return calls.current.set(call.id, call);
   };
 
-  var _React$useState7 = React.useState([]),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      log = _React$useState8[0],
-      setLog = _React$useState8[1];
+  var _React$useState9 = React.useState([]),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      log = _React$useState10[0],
+      setLog = _React$useState10[1];
 
   var interactions = log.map(function (_ref4) {
     var callId = _ref4.callId,
-        state = _ref4.state;
+        status = _ref4.status;
     return Object.assign({}, calls.current.get(callId), {
-      state: state
+      status: status
     });
   });
   var endRef = React.useRef();
@@ -166,15 +160,43 @@ export var Panel = function Panel(props) {
       return observer.disconnect();
     };
   }, []);
-  var emit = useChannel((_useChannel = {}, _defineProperty(_useChannel, EVENTS.CALL, setCall), _defineProperty(_useChannel, EVENTS.SYNC, setLog), _defineProperty(_useChannel, EVENTS.LOCK, setLock), _defineProperty(_useChannel, STORY_RENDER_PHASE_CHANGED, function (_ref7) {
-    var newPhase = _ref7.newPhase;
-    setLock(false);
-    setPlaying(newPhase === 'playing');
-  }), _useChannel));
-
-  var _useStorybookState = useStorybookState(),
-      storyId = _useStorybookState.storyId;
-
+  var emit = useChannel((_useChannel = {}, _defineProperty(_useChannel, EVENTS.CALL, setCall), _defineProperty(_useChannel, EVENTS.SYNC, function (payload) {
+    setControlStates(payload.controlStates);
+    setLog(payload.logItems);
+  }), _defineProperty(_useChannel, STORY_RENDER_PHASE_CHANGED, function (event) {
+    setStoryId(event.storyId);
+    setPlaying(event.newPhase === 'playing');
+  }), _useChannel), []);
+  var controls = React.useMemo(function () {
+    return {
+      start: function start() {
+        return emit(EVENTS.START, {
+          storyId: storyId
+        });
+      },
+      back: function back() {
+        return emit(EVENTS.BACK, {
+          storyId: storyId
+        });
+      },
+      goto: function goto(callId) {
+        return emit(EVENTS.GOTO, {
+          storyId: storyId,
+          callId: callId
+        });
+      },
+      next: function next() {
+        return emit(EVENTS.NEXT, {
+          storyId: storyId
+        });
+      },
+      end: function end() {
+        return emit(EVENTS.END, {
+          storyId: storyId
+        });
+      }
+    };
+  }, [storyId]);
   var storyFilePath = useParameter('fileName', '');
 
   var _storyFilePath$toStri = storyFilePath.toString().split('/').slice(-1),
@@ -188,70 +210,23 @@ export var Panel = function Panel(props) {
     });
   };
 
-  var isDebuggingEnabled = FEATURES.interactionsDebugger === true;
   var showStatus = log.length > 0 && !isPlaying;
-  var isDebugging = log.some(function (item) {
-    return pendingStates.includes(item.state);
-  });
-  var hasPrevious = log.some(function (item) {
-    return completedStates.includes(item.state);
-  });
-  var hasNext = log.some(function (item) {
-    return item.state === CallStates.WAITING;
-  });
-  var hasActive = log.some(function (item) {
-    return item.state === CallStates.ACTIVE;
-  });
   var hasException = log.some(function (item) {
-    return item.state === CallStates.ERROR;
+    return item.status === CallStates.ERROR;
   });
-  var isDisabled = isDebuggingEnabled ? hasActive || isLocked || isPlaying && !isDebugging : true;
-  var onStart = React.useCallback(function () {
-    return emit(EVENTS.START, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onPrevious = React.useCallback(function () {
-    return emit(EVENTS.BACK, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onNext = React.useCallback(function () {
-    return emit(EVENTS.NEXT, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onEnd = React.useCallback(function () {
-    return emit(EVENTS.END, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onInteractionClick = React.useCallback(function (callId) {
-    return emit(EVENTS.GOTO, {
-      storyId: storyId,
-      callId: callId
-    });
-  }, [storyId]);
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: "interactions"
   }, /*#__PURE__*/React.createElement(TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(TabIcon, {
     status: CallStates.ERROR
   }) : " (".concat(interactions.length, ")"))), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
+    calls: calls.current,
+    controls: controls,
+    controlStates: controlStates,
     interactions: interactions,
-    isDisabled: isDisabled,
-    hasPrevious: hasPrevious,
-    hasNext: hasNext,
     fileName: fileName,
     hasException: hasException,
     isPlaying: isPlaying,
-    calls: calls.current,
     endRef: endRef,
-    isDebuggingEnabled: isDebuggingEnabled,
-    onStart: onStart,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnd: onEnd,
-    onInteractionClick: onInteractionClick,
     onScrollToEnd: scrollTarget && scrollToTarget
   }, props)));
 };

package/dist/esm/Panel.stories.js

@@ -3,11 +3,14 @@ import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.object.assign.js";
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { getCall } from './mocks';
 import { AddonPanelPure } from './Panel';
+import SubnavStories from './components/Subnav/Subnav.stories';
 var StyledWrapper = styled.div(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -35,16 +38,14 @@ export default {
   },
   args: {
     calls: new Map(),
-    endRef: null,
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates,
+    interactions: [getCall(CallStates.DONE)],
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
-    hasNext: false,
-    hasPrevious: true,
-    interactions: [getCall(CallStates.DONE)],
-    isDisabled: false,
     isPlaying: false,
-    showTabIcon: false,
-    isDebuggingEnabled: true,
+    onScrollToEnd: action('onScrollToEnd'),
+    endRef: null,
     // prop for the AddonPanel used as wrapper of Panel
     active: true
   }
@@ -57,7 +58,15 @@ export var Passing = {
 export var Paused = {
   args: {
     isPlaying: true,
-    interactions: [getCall(CallStates.WAITING)]
+    interactions: [getCall(CallStates.WAITING)],
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true
+    }
   }
 };
 export var Playing = {
@@ -74,7 +83,9 @@ export var Failed = {
 };
 export var WithDebuggingDisabled = {
   args: {
-    isDebuggingEnabled: false
+    controlStates: Object.assign({}, SubnavStories.args.controlStates, {
+      debugger: false
+    })
   }
 };
 export var NoInteractions = {