@popmenu/common-ui 0.17.0 → 0.18.0

package/build/components/AudioPlayer/util/index.d.ts

@@ -1,5 +1,4 @@
 export { audioPlayerReducer, initialAudioPlayerState } from './audioPlayerReducer';
-export { usePlaybackIcon } from './usePlaybackIcon';
 export { useVolumeIcon } from './useVolumeIcon';
 export { formatTime } from './formatTime';
 export { setupAudioRef } from './setupAudioRef';

package/build/components/AudioPlayer/util/setupAudioRef.d.ts

@@ -4,5 +4,5 @@ interface Config {
     audioRef: RefObject<HTMLAudioElement>;
     send: (event: AudioPlayerEvent) => void;
 }
-export declare const setupAudioRef: (config: Config) => () => () => void;
+export declare const setupAudioRef: (config: Config) => () => (() => void);
 export {};

package/build/components/AudioPlayer/util/types.d.ts

@@ -7,7 +7,8 @@ export declare enum AUDIO_PLAYER_EVENT_TYPES {
     TIME_CHANGE = "TIME_CHANGE",
     DURATION_CHANGE = "DURATION_CHANGE",
     SET_TIME = "SET_TIME",
-    CAN_PLAY = "CAN_PLAY"
+    CAN_PLAY = "CAN_PLAY",
+    RESET = "RESET"
 }
 interface SetVolumeEvent {
     type: AUDIO_PLAYER_EVENT_TYPES.VOLUME_CHANGE;
@@ -43,10 +44,12 @@ interface SetTimeEvent {
 interface CanPlayEvent {
     type: AUDIO_PLAYER_EVENT_TYPES.CAN_PLAY;
 }
-export declare type AudioPlayerEvent = TogglePlaybackEvent | ToggleVolumeControlEvent | SetVolumeEvent | TimeChangeEvent | DurationChangeEvent | ToggleMuteEvent | SetTimeEvent | CanPlayEvent;
+interface ResetEvent {
+    type: AUDIO_PLAYER_EVENT_TYPES.RESET;
+}
+export declare type AudioPlayerEvent = TogglePlaybackEvent | ToggleVolumeControlEvent | SetVolumeEvent | TimeChangeEvent | DurationChangeEvent | ToggleMuteEvent | SetTimeEvent | CanPlayEvent | ResetEvent;
 export declare enum PLAYBACK_STATES {
     NONE = "NONE",
-    PLAYABLE = "PLAYABLE",
     PAUSED = "PAUSED",
     PLAYING = "PLAYING"
 }

package/build/components/Table/TableProps.d.ts

@@ -13,6 +13,8 @@ export interface TableProps {
         label: string;
         action: (cell: Cell) => void;
     }>;
+    /** Styles the table to not shrink below the height of a full page. */
+    enableMinHeight?: boolean;
     /** Styles the table to take up its containers full width. */
     fullWidth?: boolean;
     /** Enables sortability for columns. */

package/build/index.es.js

@@ -3,7 +3,7 @@ import { makeStyles, Box as Box$1, Paper as Paper$1, Popper, Grow, Slider, useTh
 export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Breadcrumbs, ButtonBase, ClickAwayListener, Fab, GridList, Hidden, Modal, Popover, Popper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, ThemeProvider, Toolbar, alpha, createTheme, darken, decomposeColor, getLuminance, hexToRgb, lighten, makeStyles, recomposeColor, rgbToHex } from '@material-ui/core';
 export { default as AppBar } from '@material-ui/core/AppBar';
 import * as React from 'react';
-import React__default, { createElement, forwardRef, useRef, useState, useReducer, useEffect, Fragment, useMemo } from 'react';
+import React__default, { createElement, forwardRef, useRef, useState, useReducer, useEffect, useMemo, Fragment } from 'react';
 import MuiIconButton from '@material-ui/core/IconButton';
 import MuiTypography from '@material-ui/core/Typography';
 import { makeStyles as makeStyles$1, useTheme } from '@material-ui/core/styles';
@@ -104,6 +104,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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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: {}};
@@ -1517,11 +1679,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 = {}));
@@ -1547,22 +1709,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;
             }
@@ -1570,12 +1748,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;
@@ -1616,183 +1793,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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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) {
@@ -1824,7 +1835,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;
@@ -1837,27 +1848,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 = useRef(null);
     var audioRef = useRef(null);
-    var _f = useState(false), disableRipple = _f[0], setDisableRipple = _f[1];
-    var _g = useReducer(audioPlayerReducer, __assign(__assign({}, initialAudioPlayerState), { context: __assign(__assign({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _g[0], send = _g[1];
+    var _g = useState(false), disableRipple = _g[0], setDisableRipple = _g[1];
+    var _h = useReducer(audioPlayerReducer, __assign(__assign({}, initialAudioPlayerState), { context: __assign(__assign({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _h[0], send = _h[1];
     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 = 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 }); };
@@ -1878,11 +1894,11 @@ var AudioPlayer = function (props) {
                                 React__default.createElement(Slider, { color: "secondary", orientation: "vertical", value: state.context.volume, onChange: setVolume, max: 1, step: 0.01 })))));
                 }))),
         React__default.createElement(Box, { display: "flex", flexGrow: 1, alignItems: "center", gap: 1 },
-            React__default.createElement(Box, { flexBasis: 60 },
-                React__default.createElement(Typography, null, formatTime(((_a = state.context.audioRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) || 0))),
-            React__default.createElement(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.createElement(Box, { flexBasis: 60, textAlign: "end" },
-                React__default.createElement(Typography, null, formatTime(((_d = state.context.audioRef.current) === null || _d === void 0 ? void 0 : _d.duration) || 0))))));
+            React__default.createElement(Box, { flexBasis: 60, flexShrink: 0 },
+                React__default.createElement(Typography, null, formatTime(((_b = state.context.audioRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0))),
+            React__default.createElement(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.createElement(Box, { flexBasis: 60, flexShrink: 0, textAlign: "end" },
+                React__default.createElement(Typography, null, formatTime(((_f = state.context.audioRef.current) === null || _f === void 0 ? void 0 : _f.duration) || 0))))));
 };
 
 var LoadingStatus;
@@ -6964,14 +6980,16 @@ var useTableStyles = 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.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var openMenu = function (event) {
         setAnchorEl(event.currentTarget);
@@ -6988,10 +7006,14 @@ var TableActionsCell = function (props) {
             React__default.createElement(Icon, { icon: primary.icon }))),
         secondary && secondary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return secondary.action(props.cell); } },
             React__default.createElement(Icon, { icon: secondary.icon }))),
-        restActions && (React__default.createElement(React__default.Fragment, null,
+        !overflow && tertiary && tertiary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return tertiary.action(props.cell); } },
+            React__default.createElement(Icon, { icon: tertiary.icon }))),
+        overflow && restActions && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(IconButton, { size: "small", onClick: openMenu },
                 React__default.createElement(Icon, { icon: SvgMore })),
-            React__default.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(restActions).map(function (_a, i) {
+            React__default.createElement(Menu, { 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.createElement(MenuItem, { key: i, onClick: function () { return handleItemClick(action); } }, label));
             }))))));
@@ -7016,7 +7038,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 = useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
     // @ts-expect-error @types/react-table issue
@@ -7028,8 +7050,8 @@ var Table = function (props) {
     var handlePagination = function (_e, pageNumber) {
         gotoPage(pageNumber - 1);
     };
-    return (React__default.createElement(Box, { className: classes.root, minHeight: 706 },
-        React__default.createElement(Box, { className: classes.tableWrap },
+    return (React__default.createElement(Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
+        React__default.createElement(Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
             React__default.createElement("table", __assign({ className: classes.table }, getTableProps()),
                 React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default.createElement(TableHeaderCell
                 // @ts-expect-error @types/react-table issue
@@ -7048,6 +7070,7 @@ var Table = function (props) {
 };
 Table.defaultProps = {
     emptyMessage: 'No results.',
+    enableMinHeight: true,
 };
 
 var useToggleButtonStyles = makeStyles$1(function (theme) { return ({