@veritone-ce/design-system 1.12.62 → 1.12.63

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -14,12 +15,24 @@ 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); }
+var StyledAutocomplete = (0, _styles.styled)(_material.Autocomplete)({
+  '& .MuiOutlinedInput-root': {
+    padding: '0px 8px 4px'
+  }
+});
 function Autocomplete(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  var value = _react["default"].useMemo(function () {
+    var _props$items$find;
+    return props.value !== undefined ? (_props$items$find = props.items.find(function (v) {
+      return v.value === props.value;
+    })) !== null && _props$items$find !== void 0 ? _props$items$find : null : undefined;
+  }, [props.items, props.value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
     disablePortal: props.disablePortal,
     options: props.items,
     inputValue: props.inputValue,
     filterOptions: props.filterOptions,
+    value: value,
     isOptionEqualToValue: function isOptionEqualToValue(option, value) {
       return option.value === value.value;
     },
@@ -27,15 +40,25 @@ function Autocomplete(props) {
       return props.onInputChange(event, inputValue);
     },
     fullWidth: props.fullWidth,
+    disabled: props.disabled,
+    ListboxProps: {
+      style: {
+        maxHeight: '30rem'
+      }
+    },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+        InputLabelProps: _objectSpread(_objectSpread({}, params.InputLabelProps), {}, {
+          shrink: true
+        }),
         label: props.label,
         error: props.error,
+        placeholder: props.placeholder,
         helperText: props.error ? "Please select a ".concat(props.label) : ''
       }));
     },
-    onChange: function onChange(event, value) {
-      return props.onChange(event, value);
+    onChange: function onChange(event, item) {
+      return props.onChange(event, item !== null ? item.value : null);
     },
     sx: props.sx
   });

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

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var StyledCheckbox = (0, _styles.styled)(_material.Checkbox)({
+  '& .MuiSvgIcon-root': {
+    fontSize: 18
+  }
+});
 var Checkbox = function Checkbox(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
     label: props.label,
-    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCheckbox, {
       "data-testid": props['data-testid'],
       checked: props.checked,
       indeterminate: props.indeterminate,

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

@@ -10,9 +10,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Input = function Input(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-    InputLabelProps: {
-      shrink: false
-    },
     "data-testid": props['data-testid'],
     type: props.type,
     value: props.value,

package/dist/cjs/components/Input/input.theme.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var inputTheme = function inputTheme(theme) {
   return {
-    defaultProps: {},
+    defaultProps: {
+      InputLabelProps: {
+        shrink: true
+      }
+    },
     styleOverrides: {
       root: function root() {
         return {
@@ -18,19 +22,20 @@ var inputTheme = function inputTheme(theme) {
             fontWeight: 600,
             fontSize: '14px',
             lineHeight: '20px',
-            color: theme.palette.neutral.main,
+            color: theme.palette.text.secondary,
             '&.Mui-focused': {
-              color: theme.palette.neutral.main
+              color: theme.palette.text.secondary
             }
           },
           '& .MuiInputLabel-root.Mui-disabled': {
-            color: theme.palette.neutral.main
+            color: theme.palette.text.secondary
           },
           '& .MuiInputLabel-root.Mui-error': {
-            color: theme.palette.neutral.main
+            color: theme.palette.text.secondary
           },
           '& .MuiInputBase-root': {
-            padding: '0px 0px 4px',
+            marginTop: '3px',
+            padding: '0px 8px 4px',
             height: '36px',
             '& input': {
               boxSizing: 'border-box',
@@ -43,24 +48,25 @@ var inputTheme = function inputTheme(theme) {
               lineHeight: '20px',
               color: theme.palette.text.primary,
               border: 'none',
-              '&:disabled': {
-                background: theme.palette.action.disabledBackground,
-                borderColor: '#E0E8F0 !important'
+              zIndex: 1,
+              // put above fieldset
+              '&::placeholder': {
+                opacity: '0.6'
               }
             },
             '& fieldset': {
-              border: "1px solid ".concat(theme.palette.neutral.main),
+              zIndex: 0,
+              border: "1px solid ".concat(theme.palette.text.secondary),
               borderRadius: '4px',
-              '&:focus': {
-                border: "2px solid ".concat(theme.palette.secondary.main)
-              },
-              '&:disabled': {
-                background: theme.palette.action.disabledBackground,
-                borderColor: '#E0E8F0 !important'
-              },
               '& legend': {
                 display: 'none'
               }
+            },
+            '&.Mui-disabled': {
+              '& fieldset': {
+                background: theme.palette.action.disabledBackground,
+                borderColor: '#E0E8F0'
+              }
             }
           },
           '& .MuiInputBase-root.MuiInputBase-multiline': {

package/dist/cjs/components/Modal/modal.theme.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _material = require("@mui/material");
 var modalTheme = function modalTheme(theme) {
   return {
     defaultProps: {},
@@ -12,7 +13,7 @@ var modalTheme = function modalTheme(theme) {
         return {
           borderRadius: '4px',
           '& .MuiBackdrop-root': {
-            backgroundColor: theme.palette.neutral.main
+            backgroundColor: (0, _material.alpha)(theme.palette.neutral.main, 0.65)
           },
           margin: 'auto',
           '& .MuiPaper-root': {

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

@@ -6,13 +6,26 @@ 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); }
 import React from 'react';
 import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
+var StyledAutocomplete = styled(MuiAutocomplete)({
+  '& .MuiOutlinedInput-root': {
+    padding: '0px 8px 4px'
+  }
+});
 function Autocomplete(props) {
-  return /*#__PURE__*/_jsx(MuiAutocomplete, {
+  var value = React.useMemo(function () {
+    var _props$items$find;
+    return props.value !== undefined ? (_props$items$find = props.items.find(function (v) {
+      return v.value === props.value;
+    })) !== null && _props$items$find !== void 0 ? _props$items$find : null : undefined;
+  }, [props.items, props.value]);
+  return /*#__PURE__*/_jsx(StyledAutocomplete, {
     disablePortal: props.disablePortal,
     options: props.items,
     inputValue: props.inputValue,
     filterOptions: props.filterOptions,
+    value: value,
     isOptionEqualToValue: function isOptionEqualToValue(option, value) {
       return option.value === value.value;
     },
@@ -20,15 +33,25 @@ function Autocomplete(props) {
       return props.onInputChange(event, inputValue);
     },
     fullWidth: props.fullWidth,
+    disabled: props.disabled,
+    ListboxProps: {
+      style: {
+        maxHeight: '30rem'
+      }
+    },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, params), {}, {
+        InputLabelProps: _objectSpread(_objectSpread({}, params.InputLabelProps), {}, {
+          shrink: true
+        }),
         label: props.label,
         error: props.error,
+        placeholder: props.placeholder,
         helperText: props.error ? "Please select a ".concat(props.label) : ''
       }));
     },
-    onChange: function onChange(event, value) {
-      return props.onChange(event, value);
+    onChange: function onChange(event, item) {
+      return props.onChange(event, item !== null ? item.value : null);
     },
     sx: props.sx
   });

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

@@ -1,10 +1,16 @@
 import React from 'react';
 import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
+var StyledCheckbox = styled(MuiCheckbox)({
+  '& .MuiSvgIcon-root': {
+    fontSize: 18
+  }
+});
 var Checkbox = function Checkbox(props) {
   return /*#__PURE__*/_jsx(FormControlLabel, {
     label: props.label,
-    control: /*#__PURE__*/_jsx(MuiCheckbox, {
+    control: /*#__PURE__*/_jsx(StyledCheckbox, {
       "data-testid": props['data-testid'],
       checked: props.checked,
       indeterminate: props.indeterminate,

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

@@ -4,9 +4,6 @@ import { InputAdornment } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
 var Input = function Input(props) {
   return /*#__PURE__*/_jsx(TextField, {
-    InputLabelProps: {
-      shrink: false
-    },
     "data-testid": props['data-testid'],
     type: props.type,
     value: props.value,

package/dist/esm/components/Input/input.theme.js

@@ -1,6 +1,10 @@
 var inputTheme = function inputTheme(theme) {
   return {
-    defaultProps: {},
+    defaultProps: {
+      InputLabelProps: {
+        shrink: true
+      }
+    },
     styleOverrides: {
       root: function root() {
         return {
@@ -12,19 +16,20 @@ var inputTheme = function inputTheme(theme) {
             fontWeight: 600,
             fontSize: '14px',
             lineHeight: '20px',
-            color: theme.palette.neutral.main,
+            color: theme.palette.text.secondary,
             '&.Mui-focused': {
-              color: theme.palette.neutral.main
+              color: theme.palette.text.secondary
             }
           },
           '& .MuiInputLabel-root.Mui-disabled': {
-            color: theme.palette.neutral.main
+            color: theme.palette.text.secondary
           },
           '& .MuiInputLabel-root.Mui-error': {
-            color: theme.palette.neutral.main
+            color: theme.palette.text.secondary
           },
           '& .MuiInputBase-root': {
-            padding: '0px 0px 4px',
+            marginTop: '3px',
+            padding: '0px 8px 4px',
             height: '36px',
             '& input': {
               boxSizing: 'border-box',
@@ -37,24 +42,25 @@ var inputTheme = function inputTheme(theme) {
               lineHeight: '20px',
               color: theme.palette.text.primary,
               border: 'none',
-              '&:disabled': {
-                background: theme.palette.action.disabledBackground,
-                borderColor: '#E0E8F0 !important'
+              zIndex: 1,
+              // put above fieldset
+              '&::placeholder': {
+                opacity: '0.6'
               }
             },
             '& fieldset': {
-              border: "1px solid ".concat(theme.palette.neutral.main),
+              zIndex: 0,
+              border: "1px solid ".concat(theme.palette.text.secondary),
               borderRadius: '4px',
-              '&:focus': {
-                border: "2px solid ".concat(theme.palette.secondary.main)
-              },
-              '&:disabled': {
-                background: theme.palette.action.disabledBackground,
-                borderColor: '#E0E8F0 !important'
-              },
               '& legend': {
                 display: 'none'
               }
+            },
+            '&.Mui-disabled': {
+              '& fieldset': {
+                background: theme.palette.action.disabledBackground,
+                borderColor: '#E0E8F0'
+              }
             }
           },
           '& .MuiInputBase-root.MuiInputBase-multiline': {

package/dist/esm/components/Modal/modal.theme.js

@@ -1,3 +1,4 @@
+import { alpha } from '@mui/material';
 var modalTheme = function modalTheme(theme) {
   return {
     defaultProps: {},
@@ -6,7 +7,7 @@ var modalTheme = function modalTheme(theme) {
         return {
           borderRadius: '4px',
           '& .MuiBackdrop-root': {
-            backgroundColor: theme.palette.neutral.main
+            backgroundColor: alpha(theme.palette.neutral.main, 0.65)
           },
           margin: 'auto',
           '& .MuiPaper-root': {

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

@@ -8,11 +8,14 @@ type Item = {
 export type AutocompleteProps = {
     items: Item[];
     filterOptions?: (options: Item[], state: FilterOptionsState<Item>) => Item[];
-    label: string;
+    value?: string | null;
+    label?: string;
     disablePortal?: boolean;
+    placeholder?: string;
     inputValue?: string;
     onInputChange?: (event: React.SyntheticEvent, inputValue: string) => void;
-    onChange: (event: React.SyntheticEvent, value: Item | null) => void;
+    onChange: (event: React.SyntheticEvent, value: string | null) => void;
+    disabled?: boolean;
     error?: boolean;
     sx?: SxProps<Theme>;
     fullWidth?: boolean;

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

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 export type InputProps = {
     'data-testid'?: string;
     type?: React.InputHTMLAttributes<unknown>['type'];
-    value: unknown;
+    value?: unknown;
     helperText?: React.ReactNode;
     label?: React.ReactNode;
     disabled?: boolean;

package/package.json

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