@popmenu/table 0.64.0 → 0.65.0

package/build/index.es.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { createElement, forwardRef, createContext, useContext, useState, useRef, isValidElement } from 'react';
 import { Pagination } from '@material-ui/lab';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
-import { makeStyles, Typography as Typography$2, Link as Link$2, Paper as Paper$2, Box, Select, TextField, Popover, ButtonBase, InputAdornment, useTheme as useTheme$1 } from '@material-ui/core';
+import { makeStyles, Typography as Typography$2, Link as Link$2, Paper as Paper$2, Box, FormControl, InputLabel, Select, TextField, Popover, ButtonBase, InputAdornment, useTheme as useTheme$1 } from '@material-ui/core';
 import CommonAlert from '@material-ui/lab/Alert';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
@@ -786,7 +786,7 @@ Link$1.defaultProps = {
 };
 Link$1.displayName = 'Link';
 
-var useStyles$7 = makeStyles(function (_a) {
+var useStyles$8 = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -800,7 +800,7 @@ var useStyles$7 = makeStyles(function (_a) {
 });
 var Paper$1 = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest$2(props, ["legacyStyles"]);
-    var classes = useStyles$7(props);
+    var classes = useStyles$8(props);
     return React__default.createElement(Paper$2, __assign$2({}, ref, { classes: __assign$2({}, (legacyStyles && classes)) }, restProps));
 });
 Paper$1.displayName = 'Paper';
@@ -1015,7 +1015,7 @@ var TableBody = function (props) {
     return React__default.createElement("tbody", __assign$3({}, restProps), children);
 };
 
-var useStyles$6 = makeStyles(function (_a) {
+var useStyles$7 = makeStyles(function (_a) {
     var typography = _a.typography;
     return ({
         root: function (_a) {
@@ -1046,7 +1046,7 @@ var TableFooter = function (props) {
     return (React__default.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
 };
 
-var useStyles$4 = makeStyles(function (theme) { return ({
+var useStyles$6 = makeStyles(function (theme) { return ({
     buttonLabel: {
         fontWeight: 400,
     },
@@ -1200,18 +1200,20 @@ function SvgSearch(props) {
   })));
 }
 
-var useStyles$3 = makeStyles(function (theme) { return ({
+var useStyles$4 = makeStyles(function (theme) { return ({
     icon: {
         marginRight: theme.spacing(1.5),
         marginTop: theme.spacing(0.5),
         scale: 1.5,
     },
-    placeholder: {
-        opacity: 0.5,
-    },
     selectContainer: {
         padding: '8px 0',
     },
+    selectRoot: {
+        '&:focus': {
+            backgroundColor: 'transparent',
+        },
+    },
     hidden: {
         display: 'none',
     },
@@ -1220,12 +1222,14 @@ var useStyles$3 = makeStyles(function (theme) { return ({
 var TableContext = createContext({});
 
 var SelectFilter = function (props) {
+    var _a, _b, _c;
     var options = props.options, columnId = props.columnId, multiple = props.multiple;
-    var classes = useStyles$3();
+    var classes = useStyles$4();
     var table = useContext(TableContext);
-    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
     var column = table.getColumn(columnId);
     var meta = column.columnDef.meta;
+    var filterName = (_a = meta === null || meta === void 0 ? void 0 : meta.filter) === null || _a === void 0 ? void 0 : _a.name;
     var value = column.getFilterValue();
     var fallbackValue = multiple ? [] : '';
     var filteredOptions = options.map(function (option) {
@@ -1242,6 +1246,18 @@ var SelectFilter = function (props) {
         return __assign$3(__assign$3({}, option), { hide: false });
     });
     var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
+    var renderedValue = '';
+    if (value && filteredOptions && filteredOptionsCount > 0) {
+        if (typeof value === 'string' || typeof value === 'number') {
+            renderedValue = (_c = (_b = filteredOptions.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filterName;
+        }
+        else if (Array.isArray(value) && value.length > 0) {
+            renderedValue = value.length + " selected";
+        }
+        else {
+            renderedValue = filterName;
+        }
+    }
     var handleChange = function (event) {
         event.stopPropagation();
         column.setFilterValue(event.target.value);
@@ -1254,23 +1270,25 @@ var SelectFilter = function (props) {
         }
     };
     return (React__default.createElement(Box, { className: classes.selectContainer },
-        React__default.createElement(Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: function () { return React__default.createElement(Typography$1, { className: classes.placeholder }, meta === null || meta === void 0 ? void 0 : meta.filter.name); }, disabled: !filteredOptionsCount, IconComponent: SvgChevronDown, onChange: handleChange, fullWidth: true, classes: {
-                root: classes.selectInput,
-                icon: classes.icon,
-            }, MenuProps: {
-                disablePortal: true,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                },
-                getContentAnchorEl: null,
-            } }, filteredOptions.map(function (option, index) {
-            return (React__default.createElement(MenuItem, { classes: { root: option.hide ? classes.hidden : undefined }, key: "option-" + value + "-" + index, value: option.value, onClick: handleItemClick }, option.label));
-        }))));
+        React__default.createElement(FormControl, { variant: "outlined", fullWidth: true },
+            React__default.createElement(InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
+            React__default.createElement(Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: function () { return React__default.createElement(Typography$1, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: SvgChevronDown, onChange: handleChange, fullWidth: true, classes: {
+                    root: classes.selectRoot,
+                    icon: classes.icon,
+                }, MenuProps: {
+                    disablePortal: true,
+                    anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                    getContentAnchorEl: null,
+                } }, filteredOptions.map(function (option, index) {
+                return (React__default.createElement(MenuItem, { classes: { root: option.hide ? classes.hidden : undefined }, key: "option-" + value + "-" + index, value: option.value, onClick: handleItemClick }, option.label));
+            })))));
 };
 
 var FilterControl = function (props) {
@@ -1359,7 +1377,7 @@ function makeFormatSelectedFilterText(table) {
 
 var Panel = function (props) {
     var anchorEl = props.anchorEl, onClose = props.onClose;
-    var classes = useStyles$4();
+    var classes = useStyles$6();
     var table = useContext(TableContext);
     var paperRef = useRef(null);
     var columnFilters = useColumnFilters(table).columnFilters;
@@ -3156,7 +3174,7 @@ createTheme(adminLightOptions);
 var adminDarkOptions = __assign$1(__assign$1(__assign$1(__assign$1({ themeName: 'Admin Dark', palette: __assign$1(__assign$1(__assign$1({}, basePalette), adminDarkPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
 createTheme(adminDarkOptions);
 
-var useStyles$2 = makeStyles({
+var useStyles$3 = makeStyles({
     root: {
         justifySelf: 'end',
     },
@@ -3164,7 +3182,7 @@ var useStyles$2 = makeStyles({
 
 var Trigger = function (props) {
     var _a = props.label, label = _a === void 0 ? 'Filter' : _a, onClick = props.onClick;
-    var classes = useStyles$2();
+    var classes = useStyles$3();
     return (React__default.createElement(Button, { className: classes.root, onClick: onClick, startIcon: React__default.createElement(Icon$1, { icon: SvgFilter }), textTransform: "none", variant: "ghost" }, label));
 };
 
@@ -3181,16 +3199,18 @@ var FilterPanel = function () {
         React__default.createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
 };
 
-var useStyles$1 = makeStyles({
+var useStyles$2 = makeStyles({
     root: {
         justifySelf: 'start',
-        width: 300,
+        maxWidth: 300,
+        minWidth: 200,
+        width: '100%',
     },
 });
 
 var GlobalFilter = function (props) {
     var value = props.value, setValue = props.setValue, restProps = __rest$3(props, ["value", "setValue"]);
-    var classes = useStyles$1();
+    var classes = useStyles$2();
     var handleChange = function (e) {
         setValue(e.target.value);
     };
@@ -3225,7 +3245,7 @@ var TableHeaderRow = function (props) {
 //   }
 //   return width
 // }
-var useStyles = makeStyles(function (theme) { return ({
+var useStyles$1 = makeStyles(function (theme) { return ({
     root: {
         borderBottomStyle: 'solid',
         borderBottomWidth: 2,
@@ -3242,31 +3262,706 @@ var useStyles = makeStyles(function (theme) { return ({
     },
 }); });
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+/**
+ * A specialized version of `_.reduce` for arrays without support for
+ * iteratee shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @param {*} [accumulator] The initial value.
+ * @param {boolean} [initAccum] Specify using the first element of `array` as
+ *  the initial value.
+ * @returns {*} Returns the accumulated value.
+ */
+
+function arrayReduce$1(array, iteratee, accumulator, initAccum) {
+  var index = -1,
+      length = array == null ? 0 : array.length;
+
+  if (initAccum && length) {
+    accumulator = array[++index];
+  }
+  while (++index < length) {
+    accumulator = iteratee(accumulator, array[index], index, array);
+  }
+  return accumulator;
+}
+
+var _arrayReduce = arrayReduce$1;
+
+/**
+ * The base implementation of `_.propertyOf` without support for deep paths.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Function} Returns the new accessor function.
+ */
+
+function basePropertyOf$1(object) {
+  return function(key) {
+    return object == null ? undefined : object[key];
+  };
+}
+
+var _basePropertyOf = basePropertyOf$1;
+
+var basePropertyOf = _basePropertyOf;
+
+/** Used to map Latin Unicode letters to basic Latin letters. */
+var deburredLetters = {
+  // Latin-1 Supplement block.
+  '\xc0': 'A',  '\xc1': 'A', '\xc2': 'A', '\xc3': 'A', '\xc4': 'A', '\xc5': 'A',
+  '\xe0': 'a',  '\xe1': 'a', '\xe2': 'a', '\xe3': 'a', '\xe4': 'a', '\xe5': 'a',
+  '\xc7': 'C',  '\xe7': 'c',
+  '\xd0': 'D',  '\xf0': 'd',
+  '\xc8': 'E',  '\xc9': 'E', '\xca': 'E', '\xcb': 'E',
+  '\xe8': 'e',  '\xe9': 'e', '\xea': 'e', '\xeb': 'e',
+  '\xcc': 'I',  '\xcd': 'I', '\xce': 'I', '\xcf': 'I',
+  '\xec': 'i',  '\xed': 'i', '\xee': 'i', '\xef': 'i',
+  '\xd1': 'N',  '\xf1': 'n',
+  '\xd2': 'O',  '\xd3': 'O', '\xd4': 'O', '\xd5': 'O', '\xd6': 'O', '\xd8': 'O',
+  '\xf2': 'o',  '\xf3': 'o', '\xf4': 'o', '\xf5': 'o', '\xf6': 'o', '\xf8': 'o',
+  '\xd9': 'U',  '\xda': 'U', '\xdb': 'U', '\xdc': 'U',
+  '\xf9': 'u',  '\xfa': 'u', '\xfb': 'u', '\xfc': 'u',
+  '\xdd': 'Y',  '\xfd': 'y', '\xff': 'y',
+  '\xc6': 'Ae', '\xe6': 'ae',
+  '\xde': 'Th', '\xfe': 'th',
+  '\xdf': 'ss',
+  // Latin Extended-A block.
+  '\u0100': 'A',  '\u0102': 'A', '\u0104': 'A',
+  '\u0101': 'a',  '\u0103': 'a', '\u0105': 'a',
+  '\u0106': 'C',  '\u0108': 'C', '\u010a': 'C', '\u010c': 'C',
+  '\u0107': 'c',  '\u0109': 'c', '\u010b': 'c', '\u010d': 'c',
+  '\u010e': 'D',  '\u0110': 'D', '\u010f': 'd', '\u0111': 'd',
+  '\u0112': 'E',  '\u0114': 'E', '\u0116': 'E', '\u0118': 'E', '\u011a': 'E',
+  '\u0113': 'e',  '\u0115': 'e', '\u0117': 'e', '\u0119': 'e', '\u011b': 'e',
+  '\u011c': 'G',  '\u011e': 'G', '\u0120': 'G', '\u0122': 'G',
+  '\u011d': 'g',  '\u011f': 'g', '\u0121': 'g', '\u0123': 'g',
+  '\u0124': 'H',  '\u0126': 'H', '\u0125': 'h', '\u0127': 'h',
+  '\u0128': 'I',  '\u012a': 'I', '\u012c': 'I', '\u012e': 'I', '\u0130': 'I',
+  '\u0129': 'i',  '\u012b': 'i', '\u012d': 'i', '\u012f': 'i', '\u0131': 'i',
+  '\u0134': 'J',  '\u0135': 'j',
+  '\u0136': 'K',  '\u0137': 'k', '\u0138': 'k',
+  '\u0139': 'L',  '\u013b': 'L', '\u013d': 'L', '\u013f': 'L', '\u0141': 'L',
+  '\u013a': 'l',  '\u013c': 'l', '\u013e': 'l', '\u0140': 'l', '\u0142': 'l',
+  '\u0143': 'N',  '\u0145': 'N', '\u0147': 'N', '\u014a': 'N',
+  '\u0144': 'n',  '\u0146': 'n', '\u0148': 'n', '\u014b': 'n',
+  '\u014c': 'O',  '\u014e': 'O', '\u0150': 'O',
+  '\u014d': 'o',  '\u014f': 'o', '\u0151': 'o',
+  '\u0154': 'R',  '\u0156': 'R', '\u0158': 'R',
+  '\u0155': 'r',  '\u0157': 'r', '\u0159': 'r',
+  '\u015a': 'S',  '\u015c': 'S', '\u015e': 'S', '\u0160': 'S',
+  '\u015b': 's',  '\u015d': 's', '\u015f': 's', '\u0161': 's',
+  '\u0162': 'T',  '\u0164': 'T', '\u0166': 'T',
+  '\u0163': 't',  '\u0165': 't', '\u0167': 't',
+  '\u0168': 'U',  '\u016a': 'U', '\u016c': 'U', '\u016e': 'U', '\u0170': 'U', '\u0172': 'U',
+  '\u0169': 'u',  '\u016b': 'u', '\u016d': 'u', '\u016f': 'u', '\u0171': 'u', '\u0173': 'u',
+  '\u0174': 'W',  '\u0175': 'w',
+  '\u0176': 'Y',  '\u0177': 'y', '\u0178': 'Y',
+  '\u0179': 'Z',  '\u017b': 'Z', '\u017d': 'Z',
+  '\u017a': 'z',  '\u017c': 'z', '\u017e': 'z',
+  '\u0132': 'IJ', '\u0133': 'ij',
+  '\u0152': 'Oe', '\u0153': 'oe',
+  '\u0149': "'n", '\u017f': 's'
+};
+
+/**
+ * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A
+ * letters to basic Latin letters.
+ *
+ * @private
+ * @param {string} letter The matched letter to deburr.
+ * @returns {string} Returns the deburred letter.
+ */
+var deburrLetter$1 = basePropertyOf(deburredLetters);
+
+var _deburrLetter = deburrLetter$1;
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$1 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$1;
+
+var root = _root;
+
+/** Built-in value references. */
+var Symbol$3 = root.Symbol;
+
+var _Symbol = Symbol$3;
+
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+
+function arrayMap$1(array, iteratee) {
+  var index = -1,
+      length = array == null ? 0 : array.length,
+      result = Array(length);
+
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+
+var _arrayMap = arrayMap$1;
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+
+var isArray$1 = Array.isArray;
+
+var isArray_1 = isArray$1;
+
+var Symbol$2 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol$1 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$1;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+
+function isObjectLike$1(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike$1;
+
+var baseGetTag = _baseGetTag,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+var isSymbol_1 = isSymbol$1;
+
+var Symbol = _Symbol,
+    arrayMap = _arrayMap,
+    isArray = isArray_1,
+    isSymbol = isSymbol_1;
+
+/** Used as references for various `Number` constants. */
+var INFINITY = 1 / 0;
+
+/** Used to convert symbols to primitives and strings. */
+var symbolProto = Symbol ? Symbol.prototype : undefined,
+    symbolToString = symbolProto ? symbolProto.toString : undefined;
+
+/**
+ * The base implementation of `_.toString` which doesn't convert nullish
+ * values to empty strings.
+ *
+ * @private
+ * @param {*} value The value to process.
+ * @returns {string} Returns the string.
+ */
+function baseToString$1(value) {
+  // Exit early for strings to avoid a performance hit in some environments.
+  if (typeof value == 'string') {
+    return value;
+  }
+  if (isArray(value)) {
+    // Recursively convert values (susceptible to call stack limits).
+    return arrayMap(value, baseToString$1) + '';
+  }
+  if (isSymbol(value)) {
+    return symbolToString ? symbolToString.call(value) : '';
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+var _baseToString = baseToString$1;
+
+var baseToString = _baseToString;
+
+/**
+ * Converts `value` to a string. An empty string is returned for `null`
+ * and `undefined` values. The sign of `-0` is preserved.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ * @example
+ *
+ * _.toString(null);
+ * // => ''
+ *
+ * _.toString(-0);
+ * // => '-0'
+ *
+ * _.toString([1, 2, 3]);
+ * // => '1,2,3'
+ */
+function toString$2(value) {
+  return value == null ? '' : baseToString(value);
+}
+
+var toString_1 = toString$2;
+
+var deburrLetter = _deburrLetter,
+    toString$1 = toString_1;
+
+/** Used to match Latin Unicode letters (excluding mathematical operators). */
+var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
+
+/** Used to compose unicode character classes. */
+var rsComboMarksRange$1 = '\\u0300-\\u036f',
+    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
+    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1;
+
+/** Used to compose unicode capture groups. */
+var rsCombo$1 = '[' + rsComboRange$1 + ']';
+
+/**
+ * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and
+ * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).
+ */
+var reComboMark = RegExp(rsCombo$1, 'g');
+
+/**
+ * Deburrs `string` by converting
+ * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)
+ * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)
+ * letters to basic Latin letters and removing
+ * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category String
+ * @param {string} [string=''] The string to deburr.
+ * @returns {string} Returns the deburred string.
+ * @example
+ *
+ * _.deburr('déjà vu');
+ * // => 'deja vu'
+ */
+function deburr$1(string) {
+  string = toString$1(string);
+  return string && string.replace(reLatin, deburrLetter).replace(reComboMark, '');
+}
+
+var deburr_1 = deburr$1;
+
+/** Used to match words composed of alphanumeric characters. */
+
+var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+
+/**
+ * Splits an ASCII `string` into an array of its words.
+ *
+ * @private
+ * @param {string} The string to inspect.
+ * @returns {Array} Returns the words of `string`.
+ */
+function asciiWords$1(string) {
+  return string.match(reAsciiWord) || [];
+}
+
+var _asciiWords = asciiWords$1;
+
+/** Used to detect strings that need a more robust regexp to match words. */
+
+var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;
+
+/**
+ * Checks if `string` contains a word composed of Unicode symbols.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {boolean} Returns `true` if a word is found, else `false`.
+ */
+function hasUnicodeWord$1(string) {
+  return reHasUnicodeWord.test(string);
+}
+
+var _hasUnicodeWord = hasUnicodeWord$1;
+
+/** Used to compose unicode character classes. */
+
+var rsAstralRange = '\\ud800-\\udfff',
+    rsComboMarksRange = '\\u0300-\\u036f',
+    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange = '\\u20d0-\\u20ff',
+    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
+    rsDingbatRange = '\\u2700-\\u27bf',
+    rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff',
+    rsMathOpRange = '\\xac\\xb1\\xd7\\xf7',
+    rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf',
+    rsPunctuationRange = '\\u2000-\\u206f',
+    rsSpaceRange = ' \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000',
+    rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde',
+    rsVarRange = '\\ufe0e\\ufe0f',
+    rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;
+
+/** Used to compose unicode capture groups. */
+var rsApos$1 = "['\u2019]",
+    rsBreak = '[' + rsBreakRange + ']',
+    rsCombo = '[' + rsComboRange + ']',
+    rsDigits = '\\d+',
+    rsDingbat = '[' + rsDingbatRange + ']',
+    rsLower = '[' + rsLowerRange + ']',
+    rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']',
+    rsFitz = '\\ud83c[\\udffb-\\udfff]',
+    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
+    rsNonAstral = '[^' + rsAstralRange + ']',
+    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
+    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
+    rsUpper = '[' + rsUpperRange + ']',
+    rsZWJ = '\\u200d';
+
+/** Used to compose unicode regexes. */
+var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',
+    rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',
+    rsOptContrLower = '(?:' + rsApos$1 + '(?:d|ll|m|re|s|t|ve))?',
+    rsOptContrUpper = '(?:' + rsApos$1 + '(?:D|LL|M|RE|S|T|VE))?',
+    reOptMod = rsModifier + '?',
+    rsOptVar = '[' + rsVarRange + ']?',
+    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
+    rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])',
+    rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])',
+    rsSeq = rsOptVar + reOptMod + rsOptJoin,
+    rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq;
+
+/** Used to match complex or compound words. */
+var reUnicodeWord = RegExp([
+  rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')',
+  rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')',
+  rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,
+  rsUpper + '+' + rsOptContrUpper,
+  rsOrdUpper,
+  rsOrdLower,
+  rsDigits,
+  rsEmoji
+].join('|'), 'g');
+
+/**
+ * Splits a Unicode `string` into an array of its words.
+ *
+ * @private
+ * @param {string} The string to inspect.
+ * @returns {Array} Returns the words of `string`.
+ */
+function unicodeWords$1(string) {
+  return string.match(reUnicodeWord) || [];
+}
+
+var _unicodeWords = unicodeWords$1;
+
+var asciiWords = _asciiWords,
+    hasUnicodeWord = _hasUnicodeWord,
+    toString = toString_1,
+    unicodeWords = _unicodeWords;
+
+/**
+ * Splits `string` into an array of its words.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category String
+ * @param {string} [string=''] The string to inspect.
+ * @param {RegExp|string} [pattern] The pattern to match words.
+ * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
+ * @returns {Array} Returns the words of `string`.
+ * @example
+ *
+ * _.words('fred, barney, & pebbles');
+ * // => ['fred', 'barney', 'pebbles']
+ *
+ * _.words('fred, barney, & pebbles', /[^, ]+/g);
+ * // => ['fred', 'barney', '&', 'pebbles']
+ */
+function words$1(string, pattern, guard) {
+  string = toString(string);
+  pattern = guard ? undefined : pattern;
+
+  if (pattern === undefined) {
+    return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string);
+  }
+  return string.match(pattern) || [];
+}
+
+var words_1 = words$1;
+
+var arrayReduce = _arrayReduce,
+    deburr = deburr_1,
+    words = words_1;
+
+/** Used to compose unicode capture groups. */
+var rsApos = "['\u2019]";
+
+/** Used to match apostrophes. */
+var reApos = RegExp(rsApos, 'g');
+
+/**
+ * Creates a function like `_.camelCase`.
+ *
+ * @private
+ * @param {Function} callback The function to combine each word.
+ * @returns {Function} Returns the new compounder function.
+ */
+function createCompounder$1(callback) {
+  return function(string) {
+    return arrayReduce(words(deburr(string).replace(reApos, '')), callback, '');
+  };
+}
+
+var _createCompounder = createCompounder$1;
+
+var createCompounder = _createCompounder;
+
+/**
+ * Converts `string` to
+ * [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles).
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category String
+ * @param {string} [string=''] The string to convert.
+ * @returns {string} Returns the kebab cased string.
+ * @example
+ *
+ * _.kebabCase('Foo Bar');
+ * // => 'foo-bar'
+ *
+ * _.kebabCase('fooBar');
+ * // => 'foo-bar'
+ *
+ * _.kebabCase('__FOO_BAR__');
+ * // => 'foo-bar'
+ */
+var kebabCase = createCompounder(function(result, word, index) {
+  return result + (index ? '-' : '') + word.toLowerCase();
+});
+
+var kebabCase_1 = kebabCase;
+
 var TableHeaderCell = function (props) {
+    var _a;
     var children = props.children, context = props.context, restProps = __rest$3(props, ["children", "context"]);
     var sortable = context.header.column.getCanSort();
     var sorted = context.header.column.getIsSorted();
     var handleSort = context.header.column.getToggleSortingHandler();
-    var classes = useStyles(__assign$3(__assign$3({}, props), { sortable: sortable }));
-    var _a = useTheme$1(), spacing = _a.spacing, palette = _a.palette;
+    var classes = useStyles$1(__assign$3(__assign$3({}, props), { sortable: sortable }));
+    var _b = useTheme$1(), spacing = _b.spacing, palette = _b.palette;
     var sortIndicators = {
         asc: SvgChevronUp,
         desc: SvgChevronDown,
     };
+    var idBase = (_a = context.table.options.meta) === null || _a === void 0 ? void 0 : _a.idBase;
+    var dataTourIdProps = idBase && sortable ? { 'data-tour-id': kebabCase_1("sort " + idBase + " on " + context.header.column.id) } : {};
     return (React__default.createElement("th", __assign$3({ className: classes.root }, restProps),
-        React__default.createElement(Box, { className: classes.box, display: "flex", alignItems: "center", gridGap: spacing(1), onClick: handleSort },
+        React__default.createElement(Box, __assign$3({ className: classes.box, display: "flex", alignItems: "center", gridGap: spacing(1), onClick: handleSort }, dataTourIdProps),
             children,
             sortable && !sorted && React__default.createElement(Icon$1, { icon: SvgSort, color: palette.grey[500] }),
             sortable && sorted && React__default.createElement(Icon$1, { icon: sortIndicators[sorted] }))));
 };
 
+var useStyles = makeStyles({
+    chip: {
+        overflow: 'visible',
+        height: 'auto',
+    },
+    label: {
+        whiteSpace: 'normal',
+    },
+});
+
 var ColumnFilterChip = function (props) {
     var columnFilter = props.columnFilter, onClick = props.onClick, label = props.label;
-    return (React__default.createElement(Chip, { onDelete: function () { return onClick(columnFilter); }, label: React__default.createElement(Box, { display: "flex", gridGap: 4 },
+    var classes = useStyles();
+    return (React__default.createElement(Chip, { className: classes.chip, onDelete: function () { return onClick(columnFilter); }, label: React__default.createElement(Box, { display: "flex", gridGap: 4, flexWrap: "wrap" },
             React__default.createElement(Typography$1, null,
                 label[0],
                 ":"),
-            React__default.createElement(Typography$1, __assign$3({ weight: "semi-bold" }, { component: 'span' }), label[1])) }));
+            React__default.createElement(Typography$1, __assign$3({ className: classes.label, weight: "semi-bold" }, { component: 'span' }), label[1])) }));
 };
 
 var ColumnFilterResetButton = function (props) {
@@ -3275,13 +3970,14 @@ var ColumnFilterResetButton = function (props) {
 };
 
 var defaultTableProps = {
+    enableSortingRemoval: true,
     fullWidth: true,
     sortable: false,
     searchable: false,
 };
 var Table = function (props) {
-    var data = props.data, columns = props.columns, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty;
-    var classes = useStyles$6(props);
+    var data = props.data, columns = props.columns, enableSortingRemoval = props.enableSortingRemoval, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase;
+    var classes = useStyles$7(props);
     var rootRef = useRef(null);
     // Prepare Empty State
     var isEmpty = data.length === 0;
@@ -3306,7 +4002,7 @@ var Table = function (props) {
     var columnVisibility = (externalVisibilityState || [])[0];
     var isControlledColumnVisibility = Boolean(externalVisibilityState);
     // Init table instance
-    var table = useReactTable(__assign$3(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3(__assign$3({}, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), (isControlledColumnSort && { sorting: sorting })), enableSorting: sortable, globalFilterFn: coercedValueIncludesString, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel() }, (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)));
+    var table = useReactTable(__assign$3(__assign$3(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3(__assign$3({}, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), (isControlledColumnSort && { sorting: sorting })), enableSorting: sortable, enableSortingRemoval: enableSortingRemoval, globalFilterFn: coercedValueIncludesString, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel() }, (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
     var _f = useColumnFilters(table), selectedColumnFilters = _f.selectedColumnFilters, hasColumnFilters = _f.hasColumnFilters, deselectColumnFilter = _f.deselectColumnFilter, formatSelectedFilterText = _f.formatSelectedFilterText, resetColumnFilters = _f.resetColumnFilters;
     var handlePagination = function (_e, pageNumber) {
         var pageIndex = pageNumber - 1;
@@ -3318,7 +4014,7 @@ var Table = function (props) {
             minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
         })),
             showControls && (React__default.createElement(Box, null,
-                React__default.createElement(Box, { display: "grid", gridAutoFlow: "column", marginBottom: 3 },
+                React__default.createElement(Box, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", marginBottom: 3 },
                     (searchable || isControlledGlobalFilter) && (React__default.createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
                     hasColumnFilters && React__default.createElement(FilterPanel, null)),
                 React__default.createElement(Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },