@veritone-ce/design-system 2.8.13-next.1 → 2.8.13

package/dist/cjs/Dialog/components.js

@@ -17,10 +17,10 @@ require('../styles/defaultTheme.js');
 require('../styles/provider.client.js');
 var portal = require('../styles/portal.js');
 require('../styles/css-vars.js');
-var index = require('../Button/index.js');
-var index$1 = require('../IconButton/index.js');
+var index$1 = require('../Button/index.js');
+var index = require('../Typography/index.js');
+var index$2 = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
-var components = require('../unstable/Card/components.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -50,18 +50,9 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
   overlayClassName,
   lockScroll = true,
   disableAutoFocus = false,
-  open,
-  onDismiss,
-  preventOutsideDismiss,
-  preventEscapeDismiss,
-  ...props
+  "data-testid": dataTestId,
+  ...options
 }, propRef) {
-  const options = {
-    open,
-    onDismiss,
-    preventOutsideDismiss,
-    preventEscapeDismiss
-  };
   const dialog = state.useDialog(options);
   const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = react.useTransitionStyles(dialog.context, {
     duration: 225,
@@ -93,11 +84,13 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
             context: dialog.context,
             disabled: disableAutoFocus,
             children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              components.default,
+              "div",
               {
                 ref,
+                "aria-labelledby": dialog.labelId,
+                "aria-describedby": dialog.descriptionId,
                 ...dialog.getFloatingProps(),
-                ...props,
+                "data-testid": dataTestId,
                 style: {
                   ...innerTransitionStyles,
                   ...style
@@ -115,41 +108,109 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
 });
 const DialogStart = React__namespace.forwardRef(
   function DialogStart2({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(components.CardStart, { ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["dialog-start"], props.className),
+        children
+      }
+    );
   }
 );
 const DialogContent = React__namespace.forwardRef(function DialogContent2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { ref, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-content"], props.className),
+      children
+    }
+  );
 });
 const DialogEnd = React__namespace.forwardRef(
   function DialogEnd2({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(components.CardEnd, { ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["dialog-end"], props.className),
+        children
+      }
+    );
   }
 );
-const DialogTitle = React__namespace.forwardRef(function DialogTitle2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    components.CardTitle,
+const DialogTitle = React__namespace.forwardRef(function DialogTitle2({ children, ...props }, ref) {
+  const { setLabelId } = state.useDialogContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogStart, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
     {
+      variant: "h4",
+      color: "primary",
       ref,
-      className: cx.cx(className, styles_module.default["dialog-title"]),
+      id,
+      leadingTrim: true,
       ...props,
+      className: cx.cx(styles_module.default["dialog-title"], props.className),
       children
     }
-  );
+  ) });
 });
 const DialogTypography = React__namespace.forwardRef(function DialogTypography2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(components.CardTypography, { ref, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-typography"], props.className),
+      children
+    }
+  );
 });
 const DialogDescription = React__namespace.forwardRef(function DialogDescription2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(components.CardDescription, { ref, ...props, children });
+  const { setDescriptionId } = state.useDialogContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
 });
 const DialogActions = React__namespace.forwardRef(function DialogActions2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(components.CardActions, { ref, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogEnd, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-actions"], props.className),
+      children
+    }
+  ) });
 });
 const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton2(props, ref) {
   const { dismiss } = state.useDialogContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index.default,
+    index$1.default,
     {
       variant: "tertiary",
       ...props,
@@ -164,7 +225,7 @@ const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton
 const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
   const { dismiss } = state.useDialogContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index$1.default,
+    index$2.default,
     {
       ...props,
       ref,

package/dist/cjs/Dialog/state.js

@@ -30,6 +30,8 @@ function useDialog({
   preventOutsideDismiss,
   preventEscapeDismiss
 }) {
+  const [labelId, setLabelId] = React__namespace.useState();
+  const [descriptionId, setDescriptionId] = React__namespace.useState();
   const data = react.useFloating({
     open,
     onOpenChange: (newOpen) => !newOpen && typeof dismissDialog === "function" && dismissDialog()
@@ -47,9 +49,13 @@ function useDialog({
       open,
       dismiss: dismissDialog,
       ...interactions,
-      ...data
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
     }),
-    [open, dismissDialog, interactions, data]
+    [open, dismissDialog, interactions, data, labelId, descriptionId]
   );
 }
 const DialogContext = React__namespace.createContext(null);

package/dist/cjs/Dialog/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551"};
+var css = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-start":"vt_ce_Dialog_dialog-start__3d0c37c9","dialog-end":"vt_ce_Dialog_dialog-end__d33601cf","dialog-content":"vt_ce_Dialog_dialog-content__237fe65e","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551","dialog-typography":"vt_ce_Dialog_dialog-typography__94d06942","dialog-actions":"vt_ce_Dialog_dialog-actions__e259c208"};
 
-exports.default = styles;
+exports.default = css;

package/dist/cjs/FileUploader/controlled.js

@@ -18,14 +18,7 @@ var index$2 = require('../IconButton/index.js');
 var wrappers = require('../Icon/wrappers.js');
 require('../Icon/factory.js');
 var styles_module = require('./styles.module.scss.js');
-require('../unstable/Breadcrumbs/index.js');
-require('../unstable/Card/components.js');
 var index$1 = require('../unstable/LinearProgress/index.js');
-require('@mui/material');
-require('../FormControl/index.js');
-require('../ErrorBoundary/index.js');
-require('../Button/index.js');
-require('../unstable/Tabs/index.js');
 
 const CloudUploadOutlinedIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.CloudUploadOutlined);
 const DeleteOutlineIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.DeleteOutline);

package/dist/cjs/Menu/controlled.js

@@ -15,6 +15,7 @@ require('../styles/provider.client.js');
 var portal = require('../styles/portal.js');
 require('../styles/css-vars.js');
 var react = require('@floating-ui/react');
+var reactVirtual = require('@tanstack/react-virtual');
 var utils = require('../popover/utils.js');
 var index = require('../Typography/index.js');
 var wrappers = require('../Icon/wrappers.js');
@@ -29,6 +30,9 @@ function Menu({
   strategy = "absolute",
   enableTypeahead = true,
   matchAnchorWidth = false,
+  virtualize = false,
+  onReachEnd,
+  reachEndOffset = 120,
   options,
   dismissEnabled = true,
   disableAutoFocus = false,
@@ -39,6 +43,13 @@ function Menu({
   const [activeIndex, setActiveIndex] = React.useState(null);
   const elementsRef = React.useRef([]);
   const labelsRef = React.useRef([]);
+  const menuScrollRef = React.useRef(null);
+  const hasNestedOptions = options.some((option) => Boolean(option.options));
+  const virtualizeConfig = virtualize && !hasNestedOptions ? {
+    itemSize: typeof virtualize === "object" ? virtualize.itemSize ?? 40 : 40,
+    overscan: typeof virtualize === "object" ? virtualize.overscan ?? 8 : 8,
+    maxHeight: typeof virtualize === "object" ? virtualize.maxHeight ?? 320 : 320
+  } : null;
   const { floatingStyles, refs, context, middlewareData } = react.useFloating({
     open: isOpen,
     onOpenChange(newOpen) {
@@ -68,19 +79,26 @@ function Menu({
     ],
     whileElementsMounted: react.autoUpdate
   });
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: options.length,
+    getScrollElement: () => menuScrollRef.current,
+    estimateSize: () => virtualizeConfig?.itemSize ?? 40,
+    overscan: virtualizeConfig?.overscan ?? 8
+  });
   const role = react.useRole(context, { role: assumeRole });
   const dismiss = react.useDismiss(context, {
     enabled: dismissEnabled,
     bubbles: false
   });
   const listNavigation = react.useListNavigation(context, {
+    enabled: !virtualizeConfig,
     listRef: elementsRef,
     activeIndex,
     nested: false,
     onNavigate: setActiveIndex
   });
   const typeahead = react.useTypeahead(context, {
-    enabled: enableTypeahead,
+    enabled: enableTypeahead && !virtualizeConfig,
     listRef: labelsRef,
     onMatch: isOpen ? setActiveIndex : void 0,
     activeIndex
@@ -98,6 +116,21 @@ function Menu({
       transform: `scale(95%)`
     }
   });
+  React.useEffect(() => {
+    labelsRef.current = options.map((option) => option.label);
+  }, [options]);
+  const handleMenuScroll = React.useCallback(
+    (event) => {
+      if (!onReachEnd)
+        return;
+      const target = event.currentTarget;
+      const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+      if (distanceToBottom <= reachEndOffset) {
+        onReachEnd();
+      }
+    },
+    [onReachEnd, reachEndOffset]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, labelsRef, children: isMounted && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.FloatingFocusManager,
     {
@@ -120,12 +153,54 @@ function Menu({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
+              ref: virtualizeConfig ? menuScrollRef : void 0,
+              onScroll: onReachEnd ? handleMenuScroll : void 0,
               style: {
                 ...transitionStyles,
+                ...virtualizeConfig ? { maxHeight: virtualizeConfig.maxHeight } : {},
                 ...props.style
               },
               className: cx.cx(styles_module.default["menu"], className),
-              children: options?.map((option, i) => {
+              children: virtualizeConfig ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    height: `${virtualizer.getTotalSize()}px`,
+                    position: "relative"
+                  },
+                  children: virtualizer.getVirtualItems().map((virtualItem) => {
+                    const option = options[virtualItem.index];
+                    if (!option) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      MenuItem,
+                      {
+                        role: "menuitem",
+                        isActive: virtualItem.index === activeIndex,
+                        disabled: option.disabled,
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          transform: `translateY(${virtualItem.start}px)`
+                        },
+                        ...getItemProps({
+                          onClick(event) {
+                            option.onSelect(
+                              event
+                            );
+                          }
+                        }),
+                        icon: option.icon,
+                        label: option.label
+                      },
+                      virtualItem.key
+                    );
+                  })
+                }
+              ) : options?.map((option, i) => {
                 if (option.options) {
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     NestedMenu,

package/dist/cjs/Select/controlled.js

@@ -172,6 +172,9 @@ function ControlledSelect({
         anchorId,
         anchor: open ? anchorRef.current : null,
         open: open && !freeSolo,
+        virtualize: props.virtualize,
+        onReachEnd: props.onMenuReachEnd,
+        reachEndOffset: props.menuReachEndOffset,
         portalEl: props.portalEl,
         strategy: props.dropdownStrategy,
         enableTypeahead: false,

package/dist/cjs/Table/AutoTable/controlled.js

@@ -84,8 +84,7 @@ function ControlledAutoTable({
               const size = rowsPerPage ?? 10;
               table.setPageSize(size);
               options.onRowsPerPageChange(size);
-            },
-            className: styles_module.default.pagination
+            }
           }
         ) }) }) })
       ]

package/dist/cjs/Table/AutoTable/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb","pagination":"vt_ce_AutoTable_pagination__1b911403"};
+var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb"};
 
 exports.default = styles;

package/dist/cjs/TablePagination/index.js

@@ -13,13 +13,6 @@ var uncontrolled = require('../Select/uncontrolled.js');
 var React = require('react');
 var index$1 = require('../Input/index.js');
 var index = require('../FormControl/index.js');
-var cx = require('../styles/cx.js');
-require('../styles/defaultThemeOptions.js');
-require('@capsizecss/core');
-require('color2k');
-require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
-require('../styles/css-vars.js');
 
 function TablePagination({
   page,
@@ -29,12 +22,6 @@ function TablePagination({
   rowsPerPageLabel = "Rows per page:",
   rowsPerPageVariant = "normal",
   showPageNumberInput = false,
-  onChangePage,
-  onRowsPerPageChange,
-  "data-pendo-prev": dataPendoPrev,
-  "data-pendo-next": dataPendoNext,
-  "data-pendo-select": dataPendoSelect,
-  className,
   ...props
 }) {
   const showPrev = page !== 1;
@@ -52,7 +39,7 @@ function TablePagination({
       Math.min(Math.ceil(count / rowsPerPage), Number(inputPage))
     );
     if (newPage !== page) {
-      onChangePage(newPage);
+      props.onChangePage(newPage);
     }
     setInputPage(newPage.toString());
   };
@@ -64,7 +51,7 @@ function TablePagination({
   React.useEffect(() => {
     setInputPage(page.toString());
   }, [page]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...props, className: cx.cx(styles_module.default["container"], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
     /* @__PURE__ */ jsxRuntime.jsx(index.default, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(
       uncontrolled.default,
       {
@@ -75,9 +62,9 @@ function TablePagination({
           label: option.toLocaleString(),
           value: option
         })),
-        onChange: (_, newRowsPerPage) => onRowsPerPageChange?.(newRowsPerPage),
+        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
         className: styles_module.default["rows-per-page-select"],
-        "data-pendo": dataPendoSelect,
+        "data-pendo": props["data-pendo-select"],
         tight: rowsPerPageVariant === "tight"
       }
     ) }),
@@ -106,8 +93,8 @@ function TablePagination({
         {
           type: "button",
           disabled: !showPrev,
-          onClick: () => onChangePage(page - 1),
-          "data-pendo": dataPendoPrev,
+          onClick: () => props.onChangePage(page - 1),
+          "data-pendo": props["data-pendo-prev"],
           children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateBeforeIcon, {})
         }
       ) }),
@@ -116,8 +103,8 @@ function TablePagination({
         {
           type: "button",
           disabled: !showNext,
-          onClick: () => onChangePage(page + 1),
-          "data-pendo": dataPendoNext,
+          onClick: () => props.onChangePage(page + 1),
+          "data-pendo": props["data-pendo-next"],
           children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateNextIcon, {})
         }
       ) })

package/dist/cjs/index.js

@@ -71,17 +71,6 @@ exports.useTheme = useTheme.default;
 exports.TypographyVariantKeys = typography.TypographyVariantKeys;
 exports.PortalThemeRelay = portal.PortalThemeRelay;
 exports.createPalette = createPalette.createPalette;
-exports.createPaletteAction = createPalette.createPaletteAction;
-exports.createPaletteActionVariantsColors = createPalette.createPaletteActionVariantsColors;
-exports.createPaletteBackground = createPalette.createPaletteBackground;
-exports.createPaletteBrand = createPalette.createPaletteBrand;
-exports.createPaletteColor = createPalette.createPaletteColor;
-exports.createPaletteIndicator = createPalette.createPaletteIndicator;
-exports.createPaletteStroke = createPalette.createPaletteStroke;
-exports.createPaletteSurfaceColors = createPalette.createPaletteSurfaceColors;
-exports.createPaletteTable = createPalette.createPaletteTable;
-exports.createPaletteText = createPalette.createPaletteText;
-exports.createPaletteTooltip = createPalette.createPaletteTooltip;
 exports.createTypography = createTypography.createTypography;
 exports.ThemeContext = provider_client.ThemeContext;
 exports.ThemeContextProvider = provider_client.ThemeContextProvider;

package/dist/cjs/styles/createPalette.js

@@ -225,14 +225,3 @@ function createPalette(options = {}) {
 }
 
 exports.createPalette = createPalette;
-exports.createPaletteAction = createPaletteAction;
-exports.createPaletteActionVariantsColors = createPaletteActionVariantsColors;
-exports.createPaletteBackground = createPaletteBackground;
-exports.createPaletteBrand = createPaletteBrand;
-exports.createPaletteColor = createPaletteColor;
-exports.createPaletteIndicator = createPaletteIndicator;
-exports.createPaletteStroke = createPaletteStroke;
-exports.createPaletteSurfaceColors = createPaletteSurfaceColors;
-exports.createPaletteTable = createPaletteTable;
-exports.createPaletteText = createPaletteText;
-exports.createPaletteTooltip = createPaletteTooltip;