@popmenu/common-ui 0.17.0 → 0.18.0

package/build/index.js

@@ -76,8 +76,8 @@ function _interopNamespace(e) {
 
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
 var MuiTypography__default = /*#__PURE__*/_interopDefaultLegacy(MuiTypography);
 var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
@@ -170,6 +170,168 @@ function __spreadArray(to, from, pack) {
     return to.concat(ar || from);
 }
 
+var _path$3K;
+
+function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
+
+function SvgMore(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3K || (_path$3K = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
+  })));
+}
+
+var _path$2X;
+
+function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
+
+function SvgChevronDown(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M4 6l4 4 4-4"
+  })));
+}
+
+var _path$2W;
+
+function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
+
+function SvgChevronUp(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3a({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$2W || (_path$2W = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 10L8 6l-4 4"
+  })));
+}
+
+var _path$1f;
+
+function _extends$1p() { _extends$1p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1p.apply(this, arguments); }
+
+function SvgPause(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1p({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$1f || (_path$1f = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.667 2.667H4v10.666h2.667V2.667zm5.333 0H9.333v10.666H12V2.667z"
+  })));
+}
+
+var _path$1d;
+
+function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
+
+function SvgPlay(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1n({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$1d || (_path$1d = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3.333 2l9.334 6-9.334 6V2z"
+  })));
+}
+
+var _path$10;
+
+function _extends$1a() { _extends$1a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
+
+function SvgVolumeDown(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1a({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.713"
+  })));
+}
+
+var _path$$;
+
+function _extends$19() { _extends$19 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
+
+function SvgVolumeMute(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$$ || (_path$$ = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333z"
+  })));
+}
+
+var _path$_;
+
+function _extends$18() { _extends$18 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
+
+function SvgVolumeOff(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm8 2.667l-4 4m0-4l4 4"
+  })));
+}
+
+var _path$Z;
+
+function _extends$17() { _extends$17 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
+
+function SvgVolumeUp(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$Z || (_path$Z = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm5.38-.046a6.667 6.667 0 010 9.426M10.36 5.64a3.333 3.333 0 010 4.713"
+  })));
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var classnames = {exports: {}};
@@ -1583,11 +1745,11 @@ var AUDIO_PLAYER_EVENT_TYPES;
     AUDIO_PLAYER_EVENT_TYPES["DURATION_CHANGE"] = "DURATION_CHANGE";
     AUDIO_PLAYER_EVENT_TYPES["SET_TIME"] = "SET_TIME";
     AUDIO_PLAYER_EVENT_TYPES["CAN_PLAY"] = "CAN_PLAY";
+    AUDIO_PLAYER_EVENT_TYPES["RESET"] = "RESET";
 })(AUDIO_PLAYER_EVENT_TYPES || (AUDIO_PLAYER_EVENT_TYPES = {}));
 var PLAYBACK_STATES;
 (function (PLAYBACK_STATES) {
     PLAYBACK_STATES["NONE"] = "NONE";
-    PLAYBACK_STATES["PLAYABLE"] = "PLAYABLE";
     PLAYBACK_STATES["PAUSED"] = "PAUSED";
     PLAYBACK_STATES["PLAYING"] = "PLAYING";
 })(PLAYBACK_STATES || (PLAYBACK_STATES = {}));
@@ -1613,22 +1775,38 @@ var initialAudioPlayerState = {
         volumeButtonLabel: CONTROL_LABELS.MUTE,
     },
 };
+var getPlayback = function (_a) {
+    var audio = _a.current;
+    var playback = PLAYBACK_STATES.NONE;
+    if (audio) {
+        var paused = audio.paused, readyState = audio.readyState;
+        if (readyState === 0) {
+            playback = PLAYBACK_STATES.NONE;
+        }
+        else if (paused) {
+            playback = PLAYBACK_STATES.PAUSED;
+        }
+        else {
+            playback = PLAYBACK_STATES.PLAYING;
+        }
+    }
+    return playback;
+};
 var audioPlayerReducer = function (state, event) {
     var _a, _b;
-    console.log(event.type);
     var audioRef = state.context.audioRef;
     var nextState = __assign({}, state);
     switch (state.playback) {
         case PLAYBACK_STATES.NONE:
             if (event.type === AUDIO_PLAYER_EVENT_TYPES.CAN_PLAY) {
-                nextState.playback = PLAYBACK_STATES.PAUSED;
+                nextState.playback = getPlayback(audioRef);
                 return nextState;
             }
             break;
         case PLAYBACK_STATES.PAUSED:
             if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
                 (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
-                nextState.playback = PLAYBACK_STATES.PLAYING;
+                nextState.playback = getPlayback(audioRef);
                 nextState.context.playbackButtonLabel = CONTROL_LABELS.PAUSE;
                 return nextState;
             }
@@ -1636,12 +1814,11 @@ var audioPlayerReducer = function (state, event) {
         case PLAYBACK_STATES.PLAYING:
             if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
                 (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
-                nextState.playback = PLAYBACK_STATES.PAUSED;
+                nextState.playback = getPlayback(audioRef);
                 nextState.context.playbackButtonLabel = CONTROL_LABELS.PLAY;
                 return nextState;
             }
             if (event.type === AUDIO_PLAYER_EVENT_TYPES.TIME_CHANGE) {
-                // time change is managed by audioRef automatically, return state to force re-render so ui stays synced
                 return nextState;
             }
             break;
@@ -1682,183 +1859,17 @@ var audioPlayerReducer = function (state, event) {
                 return nextState;
             }
             break;
+        case AUDIO_PLAYER_EVENT_TYPES.RESET:
+            if (audioRef.current) {
+                audioRef.current.currentTime = 0;
+                nextState.playback = getPlayback(audioRef);
+                return nextState;
+            }
+            break;
     }
     return state;
 };
 
-var _path$3K;
-
-function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
-
-function SvgMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3K || (_path$3K = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
-  })));
-}
-
-var _path$2X;
-
-function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
-
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4 6l4 4 4-4"
-  })));
-}
-
-var _path$2W;
-
-function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
-
-function SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3a({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2W || (_path$2W = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 10L8 6l-4 4"
-  })));
-}
-
-var _path$1f;
-
-function _extends$1p() { _extends$1p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1p.apply(this, arguments); }
-
-function SvgPause(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1p({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$1f || (_path$1f = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6.667 2.667H4v10.666h2.667V2.667zm5.333 0H9.333v10.666H12V2.667z"
-  })));
-}
-
-var _path$1d;
-
-function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
-
-function SvgPlay(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1n({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$1d || (_path$1d = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3.333 2l9.334 6-9.334 6V2z"
-  })));
-}
-
-var _path$10;
-
-function _extends$1a() { _extends$1a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
-
-function SvgVolumeDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1a({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.713"
-  })));
-}
-
-var _path$$;
-
-function _extends$19() { _extends$19 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
-
-function SvgVolumeMute(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$$ || (_path$$ = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333z"
-  })));
-}
-
-var _path$_;
-
-function _extends$18() { _extends$18 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
-
-function SvgVolumeOff(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm8 2.667l-4 4m0-4l4 4"
-  })));
-}
-
-var _path$Z;
-
-function _extends$17() { _extends$17 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
-
-function SvgVolumeUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$Z || (_path$Z = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm5.38-.046a6.667 6.667 0 010 9.426M10.36 5.64a3.333 3.333 0 010 4.713"
-  })));
-}
-
-var usePlaybackIcon = function (state) {
-    var _a;
-    var options = (_a = {},
-        _a[PLAYBACK_STATES.PAUSED] = SvgPlay,
-        _a[PLAYBACK_STATES.PLAYING] = SvgPause,
-        _a[PLAYBACK_STATES.NONE] = SvgPlay,
-        _a[PLAYBACK_STATES.PLAYABLE] = SvgPlay,
-        _a);
-    return options[state.playback];
-};
-
 var useVolumeIcon = function (state) {
     var volumeIcon = SvgVolumeUp;
     if (state.context.volume >= 0.5) {
@@ -1890,7 +1901,7 @@ var formatTime = function (time, remaning) {
 };
 
 var setupAudioRef = function (config) { return function () {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var audioRef = config.audioRef, send = config.send;
     var handleDurationChange = function (event) {
         var duration = event.target.duration;
@@ -1903,27 +1914,32 @@ var setupAudioRef = function (config) { return function () {
     var handleCanPlay = function () {
         send({ type: AUDIO_PLAYER_EVENT_TYPES.CAN_PLAY });
     };
+    var handleEnded = function () {
+        send({ type: AUDIO_PLAYER_EVENT_TYPES.RESET });
+    };
     (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('durationchange', handleDurationChange);
     (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('timeupdate', handleTimeUpdate);
     (_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('canplay', handleCanPlay);
+    (_d = audioRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('ended', handleEnded);
     return function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('durationchange', handleDurationChange);
         (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('timeupdate', handleTimeUpdate);
         (_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('canplay', handleCanPlay);
+        (_d = audioRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('ended', handleEnded);
     };
 }; };
 
 var AudioPlayer = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _f;
     var src = props.src;
     var volumeRef = React.useRef(null);
     var audioRef = React.useRef(null);
-    var _f = React.useState(false), disableRipple = _f[0], setDisableRipple = _f[1];
-    var _g = React.useReducer(audioPlayerReducer, __assign(__assign({}, initialAudioPlayerState), { context: __assign(__assign({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _g[0], send = _g[1];
+    var _g = React.useState(false), disableRipple = _g[0], setDisableRipple = _g[1];
+    var _h = React.useReducer(audioPlayerReducer, __assign(__assign({}, initialAudioPlayerState), { context: __assign(__assign({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _h[0], send = _h[1];
     React.useEffect(setupAudioRef({ audioRef: audioRef, send: send }), [audioRef]);
-    var PlaybackIcon = usePlaybackIcon(state);
-    var VolumeIcon = useVolumeIcon(state);
+    var PlaybackIcon = state.playback !== PLAYBACK_STATES.PAUSED ? SvgPause : SvgPlay;
+    var VolumeIcon = React.useMemo(function () { return useVolumeIcon(state); }, [state.context.volume, (_a = state.context.audioRef.current) === null || _a === void 0 ? void 0 : _a.muted]);
     var togglePlayback = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK }); };
     var toggleVolumeControl = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_VOLUME_CONTROL }); };
     var toggleMute = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_MUTE }); };
@@ -1944,11 +1960,11 @@ var AudioPlayer = function (props) {
                                 React__default['default'].createElement(core.Slider, { color: "secondary", orientation: "vertical", value: state.context.volume, onChange: setVolume, max: 1, step: 0.01 })))));
                 }))),
         React__default['default'].createElement(Box, { display: "flex", flexGrow: 1, alignItems: "center", gap: 1 },
-            React__default['default'].createElement(Box, { flexBasis: 60 },
-                React__default['default'].createElement(Typography, null, formatTime(((_a = state.context.audioRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) || 0))),
-            React__default['default'].createElement(core.Slider, { color: "secondary", value: ((_b = state.context.audioRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0, max: ((_c = state.context.audioRef.current) === null || _c === void 0 ? void 0 : _c.duration) || 1, onChange: setTime, disabled: state.playback === PLAYBACK_STATES.NONE }),
-            React__default['default'].createElement(Box, { flexBasis: 60, textAlign: "end" },
-                React__default['default'].createElement(Typography, null, formatTime(((_d = state.context.audioRef.current) === null || _d === void 0 ? void 0 : _d.duration) || 0))))));
+            React__default['default'].createElement(Box, { flexBasis: 60, flexShrink: 0 },
+                React__default['default'].createElement(Typography, null, formatTime(((_b = state.context.audioRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0))),
+            React__default['default'].createElement(core.Slider, { color: "secondary", value: ((_c = state.context.audioRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) || 0, max: ((_d = state.context.audioRef.current) === null || _d === void 0 ? void 0 : _d.duration) || 1, onChange: setTime, disabled: state.playback === PLAYBACK_STATES.NONE }),
+            React__default['default'].createElement(Box, { flexBasis: 60, flexShrink: 0, textAlign: "end" },
+                React__default['default'].createElement(Typography, null, formatTime(((_f = state.context.audioRef.current) === null || _f === void 0 ? void 0 : _f.duration) || 0))))));
 };
 
 var LoadingStatus;
@@ -7030,14 +7046,16 @@ var useTableStyles = core.makeStyles(function (_a) {
         },
         tableWrap: function () { return ({
             maxWidth: '100%',
-            overflowX: 'scroll',
+            overflowX: 'auto',
             overflowY: 'hidden',
         }); },
     });
 });
 
 var TableActionsCell = function (props) {
-    var _a = props.actions, primary = _a.primary, secondary = _a.secondary, restActions = __rest(_a, ["primary", "secondary"]);
+    var _a = props.actions, primary = _a.primary, secondary = _a.secondary, intermediate = __rest(_a, ["primary", "secondary"]);
+    var tertiary = intermediate.tertiary, restActions = __rest(intermediate, ["tertiary"]);
+    var overflow = Object.keys(props.actions).length > 3;
     var _b = React__default['default'].useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var openMenu = function (event) {
         setAnchorEl(event.currentTarget);
@@ -7054,10 +7072,14 @@ var TableActionsCell = function (props) {
             React__default['default'].createElement(Icon, { icon: primary.icon }))),
         secondary && secondary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return secondary.action(props.cell); } },
             React__default['default'].createElement(Icon, { icon: secondary.icon }))),
-        restActions && (React__default['default'].createElement(React__default['default'].Fragment, null,
+        !overflow && tertiary && tertiary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return tertiary.action(props.cell); } },
+            React__default['default'].createElement(Icon, { icon: tertiary.icon }))),
+        overflow && restActions && (React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(IconButton, { size: "small", onClick: openMenu },
                 React__default['default'].createElement(Icon, { icon: SvgMore })),
-            React__default['default'].createElement(Menu__default['default'], { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(restActions).map(function (_a, i) {
+            React__default['default'].createElement(Menu__default['default'], { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(__assign({ tertiary: tertiary }, restActions))
+                .filter(function (value) { return value; })
+                .map(function (_a, i) {
                 var label = _a.label, action = _a.action;
                 return (React__default['default'].createElement(MenuItem__default['default'], { key: i, onClick: function () { return handleItemClick(action); } }, label));
             }))))));
@@ -7082,7 +7104,7 @@ var makeColumns = function (config) {
 /* eslint-disable react/jsx-key */
 var Table = function (props) {
     var actionColumnId = 'table-actions-column';
-    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading;
+    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, enableMinHeight = props.enableMinHeight;
     var classes = useTableStyles(props);
     var columns = React.useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
     // @ts-expect-error @types/react-table issue
@@ -7094,8 +7116,8 @@ var Table = function (props) {
     var handlePagination = function (_e, pageNumber) {
         gotoPage(pageNumber - 1);
     };
-    return (React__default['default'].createElement(Box, { className: classes.root, minHeight: 706 },
-        React__default['default'].createElement(Box, { className: classes.tableWrap },
+    return (React__default['default'].createElement(Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
+        React__default['default'].createElement(Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
             React__default['default'].createElement("table", __assign({ className: classes.table }, getTableProps()),
                 React__default['default'].createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default['default'].createElement(TableHeaderCell
                 // @ts-expect-error @types/react-table issue
@@ -7114,6 +7136,7 @@ var Table = function (props) {
 };
 Table.defaultProps = {
     emptyMessage: 'No results.',
+    enableMinHeight: true,
 };
 
 var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({