@veritone-ce/design-system 2.8.14-next.2.0 → 2.8.14

package/dist/cjs/Icon/wrappers.js

@@ -0,0 +1,51 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.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 adaptMuiSvgIcon(MuiIcon) {
+  return React.forwardRef(
+    function MuiIconWrapper({ size, ...props }, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-size": size,
+          "data-testid": props["data-testid"],
+          style: props.style,
+          className: cx.cx(styles_module.default["icon"], props.className),
+          children: /* @__PURE__ */ jsxRuntime.jsx(MuiIcon, { color: "inherit" })
+        }
+      );
+    }
+  );
+}
+function adaptSvgIcon(svg) {
+  return React.forwardRef(
+    function SVGIconWrapper({ size, ...props }, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-size": size,
+          "data-testid": props["data-testid"],
+          style: props.style,
+          className: cx.cx(styles_module.default["icon"], props.className),
+          children: svg
+        }
+      );
+    }
+  );
+}
+
+exports.adaptMuiSvgIcon = adaptMuiSvgIcon;
+exports.adaptSvgIcon = adaptSvgIcon;

package/dist/cjs/IconButton/index.js

@@ -0,0 +1,59 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../CircularProgress/index.js');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+
+const IconButton = React.forwardRef(
+  ({
+    variant = "primary",
+    palette = defaultTheme.defaultThemeCssVariableUsages.palette.action.text,
+    loading = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const variantCn = styles_module.default[variant];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ...props,
+        ref,
+        type: props.type,
+        "data-loading": loading,
+        disabled: loading || disabled,
+        onClick: props.onClick,
+        "data-testid": props["data-testid"],
+        style: {
+          ...{
+            "--vt-ce-icon-button-palette-base-surface": palette.base.surface,
+            "--vt-ce-icon-button-palette-base-on": palette.base.on,
+            "--vt-ce-icon-button-palette-hover-surface": palette.hover.surface,
+            "--vt-ce-icon-button-palette-hover-on": palette.hover.on,
+            "--vt-ce-icon-button-palette-disabled-surface": palette.disabled.surface,
+            "--vt-ce-icon-button-palette-disabled-on": palette.disabled.on
+          },
+          ...props.style
+        },
+        className: cx.cx(styles_module.default["button"], variantCn, props.className),
+        children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["loading-container"], children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { fillParentHeight: true }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-icon"], children: props.children })
+        ]
+      }
+    );
+  }
+);
+
+exports.default = IconButton;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"button":"vt_ce_IconButton_button__c53546bc","primary":"vt_ce_IconButton_primary__11aa1cdd","secondary":"vt_ce_IconButton_secondary__3caaccf7","inner-icon":"vt_ce_IconButton_inner-icon__ad7792b9","loading-container":"vt_ce_IconButton_loading-container__145031e7"};
+
+exports.default = styles;

package/dist/cjs/Input/index.js

@@ -0,0 +1,63 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var context = require('../FormControl/context.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');
+
+const Input = React.forwardRef(
+  ({
+    placeholder,
+    value,
+    error: propsError,
+    disabled: propsDisabled,
+    startIcon,
+    endIcon,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = context.useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["input"], className),
+        children: [
+          startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: startIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-input-container"], children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              ...props,
+              placeholder,
+              value,
+              disabled,
+              className: styles_module.default["inner-input"]
+            }
+          ) }),
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: endIcon })
+        ]
+      }
+    );
+  }
+);
+
+exports.default = Input;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"input":"vt_ce_Input_input__f153ee87","inner-input-container":"vt_ce_Input_inner-input-container__66aa5203","inner-input":"vt_ce_Input_inner-input__7219c4b4","input-icon":"vt_ce_Input_input-icon__998ff0e7"};
+
+exports.default = css;

package/dist/cjs/Menu/controlled.js

@@ -0,0 +1,420 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/defaultTheme.js');
+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');
+require('../Icon/factory.js');
+var iconsMaterial = require('@mui/icons-material');
+var styles_module = require('./styles.module.scss.js');
+
+function Menu({
+  open: isOpen,
+  role: assumeRole = "menu",
+  placement = "bottom-start",
+  strategy = "absolute",
+  enableTypeahead = true,
+  matchAnchorWidth = false,
+  virtualize = false,
+  onReachEnd,
+  reachEndOffset = 120,
+  options,
+  dismissEnabled = true,
+  disableAutoFocus = false,
+  className,
+  ...props
+}) {
+  const anchor = utils.resolvePopoverAnchor(props.anchor);
+  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) {
+      if (!newOpen && dismissEnabled) {
+        props.onDismiss?.();
+      }
+    },
+    elements: {
+      reference: anchor
+    },
+    placement,
+    strategy,
+    middleware: [
+      react.hide(),
+      react.offset({ mainAxis: 4, alignmentAxis: 0 }),
+      react.flip(),
+      react.shift(),
+      react.size({
+        apply({ rects, elements }) {
+          if (matchAnchorWidth) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`
+            });
+          }
+        }
+      })
+    ],
+    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 && !virtualizeConfig,
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = react.useInteractions([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  const { isMounted, styles: transitionStyles } = react.useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      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,
+    {
+      context,
+      modal: false,
+      disabled: disableAutoFocus,
+      order: ["reference", "content"],
+      children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-testid": props["data-testid"],
+          ref: refs.setFloating,
+          tabIndex: 0,
+          "aria-labelledby": anchor?.id || props.anchorId,
+          style: {
+            ...floatingStyles,
+            visibility: middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+          },
+          ...getFloatingProps(),
+          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: 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,
+                    {
+                      parentOpen: isOpen,
+                      option,
+                      dismissEnabled,
+                      disableAutoFocus
+                    },
+                    i
+                  );
+                } else {
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    MenuItem,
+                    {
+                      role: "menuitem",
+                      isActive: i === activeIndex,
+                      disabled: option.disabled,
+                      ...getItemProps({
+                        onClick(event) {
+                          option.onSelect(
+                            event
+                          );
+                        }
+                      }),
+                      icon: option.icon,
+                      label: option.label
+                    },
+                    i
+                  );
+                }
+              })
+            }
+          )
+        }
+      ) })
+    }
+  ) }) });
+}
+const MenuItem = React.forwardRef(({ label, render, disabled, isActive, ...props }, forwardedRef) => {
+  const item = react.useListItem({ label: disabled ? null : label });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...props,
+      ref: react.useMergeRefs([item.ref, forwardedRef]),
+      type: "button",
+      role: "menuitem",
+      className: styles_module.default["option"],
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      children: [
+        props.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["option-icon"], children: props.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            variant: "paragraph2",
+            leadingTrim: true,
+            color: "inherit",
+            className: styles_module.default["option-label"],
+            children: render ?? label
+          }
+        )
+      ]
+    }
+  );
+});
+function NestedMenu({
+  parentOpen,
+  option,
+  disableAutoFocus,
+  dismissEnabled
+}) {
+  const SubMenuIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowForwardIos);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const elementsRef = React.useRef([]);
+  const labelsRef = React.useRef([]);
+  const { refs, context, floatingStyles, middlewareData } = react.useFloating({
+    open: isOpen,
+    onOpenChange(newOpen) {
+      if (!newOpen && dismissEnabled) {
+        setIsOpen(false);
+      }
+    },
+    placement: "right-start",
+    whileElementsMounted: react.autoUpdate,
+    middleware: [
+      react.hide(),
+      react.offset({ mainAxis: 0, alignmentAxis: -4 }),
+      // play with these
+      react.flip(),
+      react.shift()
+    ]
+  });
+  const dismiss = react.useDismiss(context, { enabled: dismissEnabled });
+  const role = react.useRole(context, { role: "menu" });
+  const listNavigation = react.useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = react.useTypeahead(context, {
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = react.useInteractions([
+    dismiss,
+    role,
+    listNavigation,
+    typeahead
+  ]);
+  const parentItemRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (parentItemRef.current) {
+      refs.setReference(parentItemRef.current);
+    }
+  }, [refs]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles_module.default["nested-menu-wrapper"],
+      onMouseEnter: () => parentOpen && setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: react.useMergeRefs([parentItemRef]),
+            type: "button",
+            className: cx.cx(styles_module.default["option"], isOpen && styles_module.default["active-option"]),
+            tabIndex: 0,
+            disabled: option.disabled,
+            onClick: () => {
+              if (!option.disabled) {
+                setIsOpen((o) => !o);
+              }
+            },
+            children: [
+              option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["option-icon"], children: option.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                index.default,
+                {
+                  variant: "paragraph2",
+                  leadingTrim: true,
+                  color: "inherit",
+                  className: styles_module.default["option-label"],
+                  children: option.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(SubMenuIcon, { className: styles_module.default["option-submenu-icon"] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, labelsRef, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.FloatingFocusManager,
+          {
+            context,
+            disabled: disableAutoFocus,
+            modal: false,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: refs.setFloating,
+                ...getFloatingProps({
+                  style: {
+                    ...floatingStyles,
+                    visibility: middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+                  }
+                }),
+                className: styles_module.default["menu"],
+                children: (option.options ?? []).map((childOpt, i) => {
+                  if (childOpt.options?.length) {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      NestedMenu,
+                      {
+                        parentOpen: isOpen,
+                        option: childOpt,
+                        dismissEnabled,
+                        disableAutoFocus
+                      },
+                      i
+                    );
+                  } else {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      MenuItem,
+                      {
+                        role: "menuitem",
+                        isActive: i === activeIndex,
+                        disabled: childOpt.disabled,
+                        ...getItemProps({
+                          onClick(e) {
+                            childOpt.onSelect(
+                              e
+                            );
+                          }
+                        }),
+                        icon: childOpt.icon,
+                        label: childOpt.label
+                      },
+                      i
+                    );
+                  }
+                })
+              }
+            )
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+exports.MenuItem = MenuItem;
+exports.NestedMenu = NestedMenu;
+exports.default = Menu;

package/dist/cjs/Menu/factory.js

@@ -0,0 +1,13 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var controlled = require('./controlled.js');
+
+function createMenuComponent({ portalEl }) {
+  return function ScopedMenu(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(controlled.default, { portalEl, ...props });
+  };
+}
+
+exports.createMenuComponent = createMenuComponent;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"menu":"vt_ce_Menu_menu__e27bc3e6","option":"vt_ce_Menu_option__d4cf0a15","active-option":"vt_ce_Menu_active-option__ba9899cc","option-icon":"vt_ce_Menu_option-icon__7d26b6ae","option-label":"vt_ce_Menu_option-label__198156e9","option-submenu-icon":"vt_ce_Menu_option-submenu-icon__711cdeae"};
+
+exports.default = css;

package/dist/cjs/Pagination/index.js

@@ -0,0 +1,54 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles_module = require('./styles.module.scss.js');
+var index = require('../Button/index.js');
+var index$1 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+var usePagination$1 = require('../bundled_modules/@mui/material/usePagination/usePagination.js');
+
+const usePagination = usePagination$1.default;
+function Pagination(props) {
+  const { items } = usePagination({
+    count: props.numPages,
+    page: props.page,
+    onChange(e, pageNum) {
+      props.onChangePage(pageNum);
+    },
+    showFirstButton: false,
+    showLastButton: false
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles_module.default["list"], children: items.map(({ page, type, selected, ...item }, index$2) => {
+    let children = null;
+    if (type === "start-ellipsis" || type === "end-ellipsis") {
+      children = /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["ellipsis"], children: "\u2026" });
+    } else if (type === "page") {
+      children = /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          variant: "tertiary",
+          type: "button",
+          active: selected,
+          ...item,
+          children: page.toLocaleString()
+        }
+      );
+    } else {
+      switch (type) {
+        case "next":
+          children = /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { type: "button", ...item, children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateNextIcon, {}) });
+          break;
+        case "previous":
+          children = /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { type: "button", ...item, children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateBeforeIcon, {}) });
+          break;
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children }, index$2);
+  }) }) });
+}
+
+exports.default = Pagination;