@veritone-ce/design-system 1.12.60 → 1.12.62

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

@@ -4,10 +4,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PanelContent = PanelContent;
 exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _iconsMaterial = require("@mui/icons-material");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Panel = function Panel(props) {
   var _useTheme = (0, _material.useTheme)(),
     palette = _useTheme.palette;
@@ -33,10 +36,10 @@ var Panel = function Panel(props) {
         background: palette.common.white,
         width: props.size === 'medium' ? '560px' : props.size === 'small' ? '380px' : '720px',
         height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
+        display: 'grid',
+        gridTemplateRows: 'min-content 1fr',
         boxShadow: "0 4px 10px ".concat(palette.text.primary, "80"),
-        overflow: 'auto',
+        overflow: 'hidden',
         borderBottom: "5px solid ".concat(palette.secondary.main),
         zIndex: 2
       },
@@ -50,8 +53,6 @@ var Panel = function Panel(props) {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          position: 'sticky',
-          top: 0,
           zIndex: 1000
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -92,10 +93,6 @@ var Panel = function Panel(props) {
         component: "div",
         "data-testid": "panel-content",
         sx: {
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          padding: '30px',
           overflow: 'auto'
         },
         children: props.children
@@ -104,4 +101,31 @@ var Panel = function Panel(props) {
   });
 };
 var _default = Panel;
-exports["default"] = _default;
+exports["default"] = _default;
+function PanelContent(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      height: '100%',
+      display: 'grid',
+      gridTemplateRows: '1fr min-content',
+      overflowY: 'hidden',
+      paddingBottom: '30px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        overflowY: 'auto',
+        paddingTop: '30px',
+        paddingLeft: '30px',
+        paddingRight: '30px'
+      },
+      children: props.content
+    }), props.actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        marginTop: '30px',
+        paddingLeft: '30px',
+        paddingRight: '30px'
+      },
+      children: props.actions
+    })]
+  });
+}

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

@@ -18,7 +18,7 @@ function Select(props) {
       maxHeight: props.helperText ? '77px' : '56px'
     },
     className: props.className,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+    children: [props.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
       sx: {
         display: 'flex',
         alignItems: 'flex-end',

package/dist/cjs/index.js

@@ -160,6 +160,12 @@ Object.defineProperty(exports, "Panel", {
     return _index20["default"];
   }
 });
+Object.defineProperty(exports, "PanelContent", {
+  enumerable: true,
+  get: function get() {
+    return _index20.PanelContent;
+  }
+});
 Object.defineProperty(exports, "ProgressIndicator", {
   enumerable: true,
   get: function get() {
@@ -354,7 +360,7 @@ var _index16 = _interopRequireDefault(require("./components/ListItemButton/index
 var _index17 = _interopRequireDefault(require("./components/ListItemText/index.js"));
 var _index18 = _interopRequireDefault(require("./components/MenuFlyout/index.js"));
 var _index19 = _interopRequireDefault(require("./components/Modal/index.js"));
-var _index20 = _interopRequireDefault(require("./components/Panel/index.js"));
+var _index20 = _interopRequireWildcard(require("./components/Panel/index.js"));
 var _index21 = _interopRequireDefault(require("./components/ProgressIndicator/index.js"));
 var _index22 = _interopRequireDefault(require("./components/RadioButton/index.js"));
 var _index23 = _interopRequireDefault(require("./components/RadioGroup/index.js"));

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

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { Box, Typography, useTheme } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,10 +30,10 @@ var Panel = function Panel(props) {
         background: palette.common.white,
         width: props.size === 'medium' ? '560px' : props.size === 'small' ? '380px' : '720px',
         height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
+        display: 'grid',
+        gridTemplateRows: 'min-content 1fr',
         boxShadow: "0 4px 10px ".concat(palette.text.primary, "80"),
-        overflow: 'auto',
+        overflow: 'hidden',
         borderBottom: "5px solid ".concat(palette.secondary.main),
         zIndex: 2
       },
@@ -46,8 +47,6 @@ var Panel = function Panel(props) {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          position: 'sticky',
-          top: 0,
           zIndex: 1000
         },
         children: [/*#__PURE__*/_jsx(Typography, {
@@ -88,10 +87,6 @@ var Panel = function Panel(props) {
         component: "div",
         "data-testid": "panel-content",
         sx: {
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          padding: '30px',
           overflow: 'auto'
         },
         children: props.children
@@ -99,4 +94,31 @@ var Panel = function Panel(props) {
     })
   });
 };
-export default Panel;
+export default Panel;
+export function PanelContent(props) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      height: '100%',
+      display: 'grid',
+      gridTemplateRows: '1fr min-content',
+      overflowY: 'hidden',
+      paddingBottom: '30px'
+    },
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        overflowY: 'auto',
+        paddingTop: '30px',
+        paddingLeft: '30px',
+        paddingRight: '30px'
+      },
+      children: props.content
+    }), props.actions && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        marginTop: '30px',
+        paddingLeft: '30px',
+        paddingRight: '30px'
+      },
+      children: props.actions
+    })]
+  });
+}

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

@@ -10,7 +10,7 @@ function Select(props) {
       maxHeight: props.helperText ? '77px' : '56px'
     },
     className: props.className,
-    children: [/*#__PURE__*/_jsx(InputLabel, {
+    children: [props.label && /*#__PURE__*/_jsx(InputLabel, {
       sx: {
         display: 'flex',
         alignItems: 'flex-end',

package/dist/esm/index.js

@@ -20,7 +20,7 @@ export { default as ListItemButton } from './components/ListItemButton/index.js'
 export { default as ListItemText } from './components/ListItemText/index.js';
 export { default as MenuFlyout } from './components/MenuFlyout/index.js';
 export { default as Modal } from './components/Modal/index.js';
-export { default as Panel } from './components/Panel/index.js';
+export { default as Panel, PanelContent } from './components/Panel/index.js';
 export { default as ProgressIndicator } from './components/ProgressIndicator/index.js';
 export { default as RadioButton } from './components/RadioButton/index.js';
 export { default as RadioGroup } from './components/RadioGroup/index.js';

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export type PanelProps = {
     'data-testid'?: string;
     title: string;
@@ -8,5 +8,10 @@ export type PanelProps = {
     onClose?(): void;
     className?: string;
 };
-declare const Panel: (props: PanelProps) => import("react").JSX.Element;
+declare const Panel: (props: PanelProps) => React.JSX.Element;
 export default Panel;
+export type PanelContentProps = {
+    content: React.ReactNode;
+    actions?: ReactNode;
+};
+export declare function PanelContent(props: PanelContentProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -38,8 +38,8 @@ export { default as MenuFlyout } from './components/MenuFlyout/index.js';
 export type { MenuFlyoutProps } from './components/MenuFlyout/index.js';
 export { default as Modal } from './components/Modal/index.js';
 export type { ModalProps } from './components/Modal/index.js';
-export { default as Panel } from './components/Panel/index.js';
-export type { PanelProps } from './components/Panel/index.js';
+export { default as Panel, PanelContent } from './components/Panel/index.js';
+export type { PanelProps, PanelContentProps } from './components/Panel/index.js';
 export { default as ProgressIndicator } from './components/ProgressIndicator/index.js';
 export type { ProgressIndicatorProps } from './components/ProgressIndicator/index.js';
 export { default as RadioButton } from './components/RadioButton/index.js';

package/package.json

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