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

package/dist/esm/Menu/controlled.js

@@ -0,0 +1,414 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import { PortalThemeRelay } from '../styles/portal.js';
+import '../styles/css-vars.js';
+import { useListItem, useMergeRefs, useFloating, autoUpdate, hide, offset, flip, shift, size, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, useTransitionStyles, FloatingList, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { resolvePopoverAnchor } from '../popover/utils.js';
+import Typography from '../Typography/index.js';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { ArrowForwardIos } from '@mui/icons-material';
+import css from './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 = resolvePopoverAnchor(props.anchor);
+  const [activeIndex, setActiveIndex] = React__default.useState(null);
+  const elementsRef = React__default.useRef([]);
+  const labelsRef = React__default.useRef([]);
+  const menuScrollRef = React__default.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 } = useFloating({
+    open: isOpen,
+    onOpenChange(newOpen) {
+      if (!newOpen && dismissEnabled) {
+        props.onDismiss?.();
+      }
+    },
+    elements: {
+      reference: anchor
+    },
+    placement,
+    strategy,
+    middleware: [
+      hide(),
+      offset({ mainAxis: 4, alignmentAxis: 0 }),
+      flip(),
+      shift(),
+      size({
+        apply({ rects, elements }) {
+          if (matchAnchorWidth) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`
+            });
+          }
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  const virtualizer = useVirtualizer({
+    count: options.length,
+    getScrollElement: () => menuScrollRef.current,
+    estimateSize: () => virtualizeConfig?.itemSize ?? 40,
+    overscan: virtualizeConfig?.overscan ?? 8
+  });
+  const role = useRole(context, { role: assumeRole });
+  const dismiss = useDismiss(context, {
+    enabled: dismissEnabled,
+    bubbles: false
+  });
+  const listNavigation = useListNavigation(context, {
+    enabled: !virtualizeConfig,
+    listRef: elementsRef,
+    activeIndex,
+    nested: false,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = useTypeahead(context, {
+    enabled: enableTypeahead && !virtualizeConfig,
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = useInteractions([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      transform: `scale(95%)`
+    }
+  });
+  React__default.useEffect(() => {
+    labelsRef.current = options.map((option) => option.label);
+  }, [options]);
+  const handleMenuScroll = React__default.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__ */ jsx(FloatingList, { elementsRef, labelsRef, children: isMounted && /* @__PURE__ */ jsx(FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsx(
+    FloatingFocusManager,
+    {
+      context,
+      modal: false,
+      disabled: disableAutoFocus,
+      order: ["reference", "content"],
+      children: /* @__PURE__ */ jsx(PortalThemeRelay, { children: /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              ref: virtualizeConfig ? menuScrollRef : void 0,
+              onScroll: onReachEnd ? handleMenuScroll : void 0,
+              style: {
+                ...transitionStyles,
+                ...virtualizeConfig ? { maxHeight: virtualizeConfig.maxHeight } : {},
+                ...props.style
+              },
+              className: cx(css["menu"], className),
+              children: virtualizeConfig ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                    NestedMenu,
+                    {
+                      parentOpen: isOpen,
+                      option,
+                      dismissEnabled,
+                      disableAutoFocus
+                    },
+                    i
+                  );
+                } else {
+                  return /* @__PURE__ */ 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__default.forwardRef(({ label, render, disabled, isActive, ...props }, forwardedRef) => {
+  const item = useListItem({ label: disabled ? null : label });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref: useMergeRefs([item.ref, forwardedRef]),
+      type: "button",
+      role: "menuitem",
+      className: css["option"],
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      children: [
+        props.icon && /* @__PURE__ */ jsx("span", { className: css["option-icon"], children: props.icon }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "paragraph2",
+            leadingTrim: true,
+            color: "inherit",
+            className: css["option-label"],
+            children: render ?? label
+          }
+        )
+      ]
+    }
+  );
+});
+function NestedMenu({
+  parentOpen,
+  option,
+  disableAutoFocus,
+  dismissEnabled
+}) {
+  const SubMenuIcon = adaptMuiSvgIcon(ArrowForwardIos);
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const [activeIndex, setActiveIndex] = React__default.useState(null);
+  const elementsRef = React__default.useRef([]);
+  const labelsRef = React__default.useRef([]);
+  const { refs, context, floatingStyles, middlewareData } = useFloating({
+    open: isOpen,
+    onOpenChange(newOpen) {
+      if (!newOpen && dismissEnabled) {
+        setIsOpen(false);
+      }
+    },
+    placement: "right-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      hide(),
+      offset({ mainAxis: 0, alignmentAxis: -4 }),
+      // play with these
+      flip(),
+      shift()
+    ]
+  });
+  const dismiss = useDismiss(context, { enabled: dismissEnabled });
+  const role = useRole(context, { role: "menu" });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = useInteractions([
+    dismiss,
+    role,
+    listNavigation,
+    typeahead
+  ]);
+  const parentItemRef = React__default.useRef(null);
+  React__default.useLayoutEffect(() => {
+    if (parentItemRef.current) {
+      refs.setReference(parentItemRef.current);
+    }
+  }, [refs]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: css["nested-menu-wrapper"],
+      onMouseEnter: () => parentOpen && setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: useMergeRefs([parentItemRef]),
+            type: "button",
+            className: cx(css["option"], isOpen && css["active-option"]),
+            tabIndex: 0,
+            disabled: option.disabled,
+            onClick: () => {
+              if (!option.disabled) {
+                setIsOpen((o) => !o);
+              }
+            },
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: css["option-icon"], children: option.icon }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "paragraph2",
+                  leadingTrim: true,
+                  color: "inherit",
+                  className: css["option-label"],
+                  children: option.label
+                }
+              ),
+              /* @__PURE__ */ jsx(SubMenuIcon, { className: css["option-submenu-icon"] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FloatingList, { elementsRef, labelsRef, children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+          FloatingFocusManager,
+          {
+            context,
+            disabled: disableAutoFocus,
+            modal: false,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: refs.setFloating,
+                ...getFloatingProps({
+                  style: {
+                    ...floatingStyles,
+                    visibility: middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+                  }
+                }),
+                className: css["menu"],
+                children: (option.options ?? []).map((childOpt, i) => {
+                  if (childOpt.options?.length) {
+                    return /* @__PURE__ */ jsx(
+                      NestedMenu,
+                      {
+                        parentOpen: isOpen,
+                        option: childOpt,
+                        dismissEnabled,
+                        disableAutoFocus
+                      },
+                      i
+                    );
+                  } else {
+                    return /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        role: "menuitem",
+                        isActive: i === activeIndex,
+                        disabled: childOpt.disabled,
+                        ...getItemProps({
+                          onClick(e) {
+                            childOpt.onSelect(
+                              e
+                            );
+                          }
+                        }),
+                        icon: childOpt.icon,
+                        label: childOpt.label
+                      },
+                      i
+                    );
+                  }
+                })
+              }
+            )
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+export { MenuItem, NestedMenu, Menu as default };

package/dist/esm/Menu/factory.js

@@ -0,0 +1,11 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import Menu from './controlled.js';
+
+function createMenuComponent({ portalEl }) {
+  return function ScopedMenu(props) {
+    return /* @__PURE__ */ jsx(Menu, { portalEl, ...props });
+  };
+}
+
+export { createMenuComponent };

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

@@ -0,0 +1,3 @@
+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"};
+
+export { css as default };

package/dist/esm/Pagination/index.js

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

package/dist/esm/Pagination/styles.module.scss.js

@@ -0,0 +1,3 @@
+var css = {"list":"vt_ce_Pagination_list__006cb35b","ellipsis":"vt_ce_Pagination_ellipsis__c6ba7751"};
+
+export { css as default };

package/dist/esm/RadioButton/index.js

@@ -0,0 +1,81 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId } from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import css from './styles.module.scss.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+
+const RadioButton = forwardRef(
+  ({
+    defaultChecked,
+    checked,
+    label,
+    disabled = false,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const inputRef = useRef(null);
+    const forkedRef = useForkRef(inputRef, ref);
+    const labelId = useId();
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "radio",
+        "aria-labelledby": labelId,
+        "aria-checked": checked ?? defaultChecked,
+        "aria-disabled": disabled,
+        onClick: (e) => {
+          inputRef.current?.click();
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        "data-testid": dataTestId,
+        style,
+        className: cx(css["radio"], className),
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: css["passthrough-label-container"], children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...props,
+                type: "radio",
+                ref: forkedRef,
+                defaultChecked,
+                checked,
+                disabled,
+                className: css["invisible-radio"]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: css["icon-container"], children: /* @__PURE__ */ jsx(RadioIcon, {}) })
+          ] }),
+          label && /* @__PURE__ */ jsx("span", { className: css["visible-label"], id: labelId, children: label })
+        ]
+      }
+    );
+  }
+);
+const RadioIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: 9, cy: 9, r: 8.5, className: css["radio-circle-outer"] }),
+      /* @__PURE__ */ jsx("circle", { cx: 9, cy: 9, r: 5.625, className: css["radio-circle-inner"] })
+    ]
+  }
+);
+
+export { RadioButton as default };

package/dist/esm/RadioButton/styles.module.scss.js

@@ -0,0 +1,3 @@
+var css = {"radio":"vt_ce_RadioButton_radio__162f9a8e","radio-circle-outer":"vt_ce_RadioButton_radio-circle-outer__d3f9decf","radio-circle-inner":"vt_ce_RadioButton_radio-circle-inner__cf7da66b","passthrough-label-container":"vt_ce_RadioButton_passthrough-label-container__a7aa3abd","invisible-radio":"vt_ce_RadioButton_invisible-radio__610a0807","visible-label":"vt_ce_RadioButton_visible-label__5a55d508","icon-container":"vt_ce_RadioButton_icon-container__a4c0c8b4"};
+
+export { css as default };