@veritone-ce/design-system 1.12.57 → 1.12.59

package/dist/cjs/components/Autocomplete/index.js

@@ -14,29 +14,40 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function ComboBox(_ref) {
-  var items = _ref.items,
-    label = _ref.label,
-    width = _ref.width,
-    _onChange = _ref.onChange,
-    error = _ref.error;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
-    disablePortal: true,
-    options: items,
-    sx: {
-      width: width
+var StyledAutocomplete = (0, _material.styled)(_material.Autocomplete, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'width';
+  }
+})(function (_ref) {
+  var width = _ref.width;
+  return {
+    width: width
+  };
+});
+function Autocomplete(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
+    disablePortal: props.disablePortal,
+    options: props.items,
+    width: props.width,
+    inputValue: props.inputValue,
+    filterOptions: props.filterOptions,
+    isOptionEqualToValue: function isOptionEqualToValue(option, value) {
+      return option.value === value.value;
+    },
+    onInputChange: props.onInputChange && function (event, inputValue) {
+      return props.onInputChange(event, inputValue);
     },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
-        label: label,
-        error: error,
-        helperText: error ? "Please select a ".concat(label) : ''
+        label: props.label,
+        error: props.error,
+        helperText: props.error ? "Please select a ".concat(props.label) : ''
       }));
     },
     onChange: function onChange(event, value) {
-      return _onChange(event, value);
+      return props.onChange(event, value);
     }
   });
 }
-var _default = ComboBox;
+var _default = Autocomplete;
 exports["default"] = _default;

package/dist/cjs/components/FileUploader/index.js

@@ -95,7 +95,7 @@ function FileUploader(props) {
           }
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             fontSize: '14px',
             width: '352px',
@@ -103,15 +103,22 @@ function FileUploader(props) {
             lineHeight: '22px',
             color: palette.text.primary
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-            component: "span",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             sx: {
-              marginRight: '4px',
-              textDecoration: 'underline',
-              color: palette.button.main
+              display: 'flex'
             },
-            children: "Browse files"
-          }), "from your computer or drag and drop here"]
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                marginRight: '4px',
+                textDecoration: 'underline',
+                color: palette.button.main,
+                fontWeight: 400
+              },
+              children: "Browse files"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: "from your computer or drag and drop here"
+            })]
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
           sx: {
             fontWeight: 600,

package/dist/cjs/components/Table/AutoTable/virtual.js

@@ -12,6 +12,7 @@ var _material = require("@mui/material");
 var _utils = require("@mui/utils");
 var _common = require("./common.js");
 var _reactVirtual = require("@tanstack/react-virtual");
+var _isPropValid = _interopRequireDefault(require("@emotion/is-prop-valid"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -23,7 +24,11 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var TableContainer = (0, _material.styled)(_material.Box)(function (_ref) {
+var TableContainer = (0, _material.styled)(_material.Box, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return (0, _isPropValid["default"])(prop);
+  }
+})(function (_ref) {
   var virtualizerTotalHeight = _ref.virtualizerTotalHeight;
   return {
     height: "".concat(virtualizerTotalHeight, "px")

package/dist/cjs/components/Table/index.js

@@ -40,7 +40,11 @@ var TableBody = function TableBody(props) {
   });
 };
 exports.TableBody = TableBody;
-var StyledMuiTableCell = (0, _styles.styled)(_material.TableCell)(function (_ref) {
+var StyledMuiTableCell = (0, _styles.styled)(_material.TableCell, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'noVerticalPadding';
+  }
+})(function (_ref) {
   var theme = _ref.theme,
     noVerticalPadding = _ref.noVerticalPadding;
   return {

package/dist/esm/components/Autocomplete/index.js

@@ -5,30 +5,41 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from 'react';
-import { Autocomplete, TextField } from '@mui/material';
+import { Autocomplete as MuiAutocomplete, TextField, styled } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
-function ComboBox(_ref) {
-  var items = _ref.items,
-    label = _ref.label,
-    width = _ref.width,
-    _onChange = _ref.onChange,
-    error = _ref.error;
-  return /*#__PURE__*/_jsx(Autocomplete, {
-    disablePortal: true,
-    options: items,
-    sx: {
-      width: width
+var StyledAutocomplete = styled(MuiAutocomplete, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'width';
+  }
+})(function (_ref) {
+  var width = _ref.width;
+  return {
+    width: width
+  };
+});
+function Autocomplete(props) {
+  return /*#__PURE__*/_jsx(StyledAutocomplete, {
+    disablePortal: props.disablePortal,
+    options: props.items,
+    width: props.width,
+    inputValue: props.inputValue,
+    filterOptions: props.filterOptions,
+    isOptionEqualToValue: function isOptionEqualToValue(option, value) {
+      return option.value === value.value;
+    },
+    onInputChange: props.onInputChange && function (event, inputValue) {
+      return props.onInputChange(event, inputValue);
     },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, params), {}, {
-        label: label,
-        error: error,
-        helperText: error ? "Please select a ".concat(label) : ''
+        label: props.label,
+        error: props.error,
+        helperText: props.error ? "Please select a ".concat(props.label) : ''
       }));
     },
     onChange: function onChange(event, value) {
-      return _onChange(event, value);
+      return props.onChange(event, value);
     }
   });
 }
-export default ComboBox;
+export default Autocomplete;

package/dist/esm/components/FileUploader/index.js

@@ -89,7 +89,7 @@ export default function FileUploader(props) {
           }
         })
       }), /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsxs(Typography, {
+        children: [/*#__PURE__*/_jsx(Typography, {
           sx: {
             fontSize: '14px',
             width: '352px',
@@ -97,15 +97,22 @@ export default function FileUploader(props) {
             lineHeight: '22px',
             color: palette.text.primary
           },
-          children: [/*#__PURE__*/_jsx(Box, {
-            component: "span",
+          children: /*#__PURE__*/_jsxs(Box, {
             sx: {
-              marginRight: '4px',
-              textDecoration: 'underline',
-              color: palette.button.main
+              display: 'flex'
             },
-            children: "Browse files"
-          }), "from your computer or drag and drop here"]
+            children: [/*#__PURE__*/_jsx(Typography, {
+              sx: {
+                marginRight: '4px',
+                textDecoration: 'underline',
+                color: palette.button.main,
+                fontWeight: 400
+              },
+              children: "Browse files"
+            }), /*#__PURE__*/_jsx(Typography, {
+              children: "from your computer or drag and drop here"
+            })]
+          })
         }), /*#__PURE__*/_jsxs(Typography, {
           sx: {
             fontWeight: 600,

package/dist/esm/components/Table/AutoTable/virtual.js

@@ -16,9 +16,14 @@ import { Box, CircularProgress, styled } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 import { DefaultErrorContainer, useAutoTable } from './common.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import isPropValid from '@emotion/is-prop-valid';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var TableContainer = styled(Box)(function (_ref) {
+var TableContainer = styled(Box, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return isPropValid(prop);
+  }
+})(function (_ref) {
   var virtualizerTotalHeight = _ref.virtualizerTotalHeight;
   return {
     height: "".concat(virtualizerTotalHeight, "px")

package/dist/esm/components/Table/index.js

@@ -31,7 +31,11 @@ export var TableBody = function TableBody(props) {
     children: props.children
   });
 };
-var StyledMuiTableCell = styled(MuiTableCell)(function (_ref) {
+var StyledMuiTableCell = styled(MuiTableCell, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'noVerticalPadding';
+  }
+})(function (_ref) {
   var theme = _ref.theme,
     noVerticalPadding = _ref.noVerticalPadding;
   return {

package/dist/types/components/Autocomplete/index.d.ts

@@ -1,14 +1,21 @@
 import React from 'react';
+import { FilterOptionsState } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
 type Item = {
     label: string;
     value: string;
 };
 export type AutocompleteProps = {
     items: Item[];
+    filterOptions?: (options: Item[], state: FilterOptionsState<Item>) => Item[];
     label: string;
     width: number;
+    disablePortal?: boolean;
+    inputValue?: string;
+    onInputChange?: (event: React.SyntheticEvent, inputValue: string) => void;
     onChange: (event: React.SyntheticEvent, value: Item | null) => void;
     error?: boolean;
+    sx?: SxProps<Theme>;
 };
-declare function ComboBox({ items, label, width, onChange, error }: AutocompleteProps): React.JSX.Element;
-export default ComboBox;
+declare function Autocomplete(props: AutocompleteProps): React.JSX.Element;
+export default Autocomplete;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.57",
+  "version": "1.12.59",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [