@veritone-ce/design-system 2.0.7 → 2.1.0

package/dist/cjs/Menu/controlled.js

@@ -0,0 +1,149 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+var react = require('@floating-ui/react');
+var styles_module = require('./styles.module.scss.js');
+var utils = require('../popover/utils.js');
+
+function Menu({
+  open: isOpen,
+  role: assumeRole = "menu",
+  placement = "bottom-start",
+  strategy = "absolute",
+  enableTypeahead = true,
+  matchAnchorWidth = false,
+  options,
+  dismissEnabled = true,
+  className,
+  ...props
+}) {
+  const anchor = utils.resolvePopoverAnchor(props.anchor);
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const elementsRef = React.useRef([]);
+  const labelsRef = React.useRef([]);
+  const { floatingStyles, refs, context } = react.useFloating({
+    open: isOpen,
+    onOpenChange(newOpen) {
+      if (!newOpen && dismissEnabled) {
+        props.onDismiss?.();
+      }
+    },
+    elements: {
+      reference: anchor
+    },
+    placement,
+    strategy,
+    middleware: [
+      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 role = react.useRole(context, { role: assumeRole });
+  const dismiss = react.useDismiss(context, {
+    enabled: dismissEnabled,
+    bubbles: false
+  });
+  const listNavigation = react.useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: false,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = react.useTypeahead(context, {
+    enabled: enableTypeahead,
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = react.useInteractions([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, labelsRef, children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.FloatingFocusManager,
+    {
+      context,
+      modal: false,
+      order: ["reference", "content"],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-testid": props["data-testid"],
+          ref: refs.setFloating,
+          tabIndex: 0,
+          "aria-labelledby": anchor?.id || props.anchorId,
+          style: {
+            ...floatingStyles,
+            ...props.style
+          },
+          ...getFloatingProps(),
+          className: cx.cx(styles_module.default["menu"], className),
+          children: options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              role: "menuitem",
+              isActive: i === activeIndex,
+              ...getItemProps({
+                onClick(event) {
+                  option.onSelect(event);
+                }
+              }),
+              label: option.label,
+              icon: option.icon
+            },
+            i
+          ))
+        }
+      )
+    }
+  ) }) });
+}
+const MenuItem = React.forwardRef(({ label, 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("span", { className: styles_module.default["option-label"], children: label })
+      ]
+    }
+  );
+});
+
+exports.MenuItem = MenuItem;
+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 modules_efc4e723 = {"menu":"vt_ce_Menu_menu__f5f59292","option":"vt_ce_Menu_option__f5f59292","option-icon":"vt_ce_Menu_optionIcon__f5f59292","option-label":"vt_ce_Menu_optionLabel__f5f59292"};
+
+exports.default = modules_efc4e723;

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 usePaginationUntyped = require('@mui/material/usePagination');
+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');
+
+const usePagination = usePaginationUntyped;
+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
+        }
+      );
+    } else {
+      switch (type) {
+        case "next":
+          children = /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { type: "button", ...item, children: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "navigateNext" }) });
+          break;
+        case "previous":
+          children = /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { type: "button", ...item, children: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "navigateBefore" }) });
+          break;
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children }, index$2);
+  }) }) });
+}
+
+exports.default = Pagination;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"list":"vt_ce_Pagination_list__50478999","ellipsis":"vt_ce_Pagination_ellipsis__50478999"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/RadioButton/index.js

@@ -0,0 +1,75 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+const RadioButton = React.forwardRef(
+  ({ checked = false, disabled = false, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    const forkedRef = material.useForkRef(inputRef, ref);
+    const labelId = React.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "radio",
+        "aria-labelledby": labelId,
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        onClick: (e) => {
+          inputRef.current?.click();
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        "data-testid": props["data-testid"],
+        style: props.style,
+        className: cx.cx(styles_module.default["radio"], props.className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles_module.default["passthrough-label-container"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                name: props.name,
+                ref: forkedRef,
+                checked,
+                disabled,
+                onChange: props.onChange,
+                className: styles_module.default["invisible-radio"]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["icon-container"], children: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon, {}) })
+          ] }),
+          props.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["visible-label"], id: labelId, children: props.label })
+        ]
+      }
+    );
+  }
+);
+const RadioIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 9, cy: 9, r: 8.5, className: styles_module.default["radio-circle-outer"] }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 9, cy: 9, r: 5.625, className: styles_module.default["radio-circle-inner"] })
+    ]
+  }
+);
+
+exports.default = RadioButton;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__d49ab70a","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__d49ab70a","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__d49ab70a","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__d49ab70a","invisible-radio":"vt_ce_RadioButton_invisibleRadio__d49ab70a","visible-label":"vt_ce_RadioButton_visibleLabel__d49ab70a","icon-container":"vt_ce_RadioButton_iconContainer__d49ab70a"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Select/controlled.js

@@ -0,0 +1,144 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+var styles_module = require('./styles.module.scss.js');
+var iconsMaterial = require('@mui/icons-material');
+var controlled = require('../Menu/controlled.js');
+var wrappers = require('../Icon/wrappers.js');
+require('../Icon/factory.js');
+
+const DefaultEndIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowDropDown);
+const DefaultUnsetIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.Close);
+function ControlledSelect({
+  ref,
+  endIcon = /* @__PURE__ */ jsxRuntime.jsx(DefaultEndIcon, {}),
+  placeholder = "Select...",
+  clearable = true,
+  ...props
+}) {
+  const anchorId = React.useId();
+  const anchorRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const unsetIcon = /* @__PURE__ */ jsxRuntime.jsx(DefaultUnsetIcon, {});
+  const selectedOption = props.options.find(
+    (option) => option.value === props.value
+  );
+  let filteredOptions = props.options;
+  if (props.filterOptions) {
+    filteredOptions = props.filterOptions(filteredOptions);
+  }
+  filteredOptions = filteredOptions.filter(
+    (option) => option.label.toLowerCase().includes(props.inputValue.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        id: anchorId,
+        ref: anchorRef,
+        className: cx.cx(styles_module.default["select"], props.className),
+        "data-testid": props["data-testid"],
+        style: props.style,
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-focused": open,
+              "data-disabled": props.disabled ?? false,
+              "data-error": props.error !== void 0,
+              className: styles_module.default["inner-input-container"],
+              children: [
+                props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref,
+                    type: "text",
+                    size: props.size,
+                    "data-selected": Boolean(selectedOption),
+                    placeholder: selectedOption?.label ?? placeholder,
+                    value: props.inputValue,
+                    disabled: props.disabled,
+                    onChange: (e) => {
+                      setOpen(true);
+                      props.onInputChange(e, e.target.value);
+                    },
+                    className: styles_module.default["inner-input"]
+                  }
+                ),
+                selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: styles_module.default["select-icon"],
+                    onClick: (e) => {
+                      props.onChange?.(e, null);
+                      props.onInputChange(e, "");
+                    },
+                    children: unsetIcon
+                  }
+                ),
+                endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
+              ]
+            }
+          ),
+          props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
+          props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      controlled.default,
+      {
+        role: "select",
+        anchorId,
+        anchor: open ? anchorRef.current : null,
+        open,
+        portalEl: props.portalEl,
+        strategy: props.dropdownStrategy,
+        enableTypeahead: false,
+        matchAnchorWidth: true,
+        onDismiss: () => {
+          setOpen(false);
+        },
+        options: filteredOptions.map((option) => ({
+          label: option.label,
+          icon: option.icon,
+          onSelect(e) {
+            props.onChange(e, option.value);
+            props.onInputChange(e, "");
+            setOpen(false);
+          }
+        }))
+      }
+    )
+  ] });
+}
+const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
+  }
+);
+
+exports.default = ControlledSelect;

package/dist/cjs/Select/factory.js

@@ -0,0 +1,23 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var uncontrolled = require('./uncontrolled.js');
+var controlled = require('./controlled.js');
+
+function createSelectComponent({ portalEl }) {
+  return React.forwardRef(function ScopedSelect(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(uncontrolled.default, { portalEl, ref, ...props });
+  });
+}
+function createControlledSelectComponent({
+  portalEl
+}) {
+  return React.forwardRef(function ScopedControlledSelect(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(controlled.default, { portalEl, ref, ...props });
+  });
+}
+
+exports.createControlledSelectComponent = createControlledSelectComponent;
+exports.createSelectComponent = createSelectComponent;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"select":"vt_ce_Select_select__cb05e024","label":"vt_ce_Select_label__cb05e024","inner-input-container":"vt_ce_Select_innerInputContainer__cb05e024","inner-input":"vt_ce_Select_innerInput__cb05e024","select-icon":"vt_ce_Select_selectIcon__cb05e024","help-label":"vt_ce_Select_helpLabel__cb05e024","error-label":"vt_ce_Select_errorLabel__cb05e024"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Select/uncontrolled.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 controlled = require('./controlled.js');
+
+function Select({
+  ref,
+  defaultValue = null,
+  value: propsValue,
+  inputValue: propsInputValue,
+  onChange: propsOnChange,
+  onInputChange: propsOnInputChange,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const [value, onChange] = propsValue !== void 0 ? [
+    propsValue,
+    (e, newValue) => {
+      propsOnChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolled,
+    (e, newValue) => {
+      setUncontrolled(newValue);
+      propsOnChange?.(e, newValue);
+    }
+  ];
+  const [uncontrolledInputValue, setUncontrolledInputValue] = React.useState("");
+  const [inputValue, onInputChange] = propsInputValue !== void 0 ? [
+    propsInputValue,
+    (e, newValue) => {
+      propsOnInputChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolledInputValue,
+    (e, newValue) => {
+      setUncontrolledInputValue(newValue);
+      propsOnInputChange?.(e, newValue);
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.default,
+    {
+      ref,
+      ...props,
+      value,
+      onChange,
+      inputValue,
+      onInputChange
+    }
+  );
+}
+
+exports.default = Select;

package/dist/cjs/TablePagination/index.js

@@ -0,0 +1,75 @@
+'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('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+require('../Select/controlled.js');
+var uncontrolled = require('../Select/uncontrolled.js');
+require('react');
+
+function TablePagination({
+  page,
+  count,
+  rowsPerPage = 10,
+  rowsPerPageOptions = [10, 50, 100],
+  rowsPerPageLabel = "Rows per page:",
+  ...props
+}) {
+  const showPrev = page !== 1;
+  const showNext = page < count / rowsPerPage;
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["rows-per-page"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["rows-per-page-label"], children: rowsPerPageLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        uncontrolled.default,
+        {
+          defaultValue: rowsPerPage,
+          clearable: false,
+          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) - 1 : 3,
+          options: rowsPerPageOptions.map((option) => ({
+            label: option.toLocaleString(),
+            value: option
+          })),
+          className: styles_module.default["rows-per-page-select"]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["page-counts"], children: [
+      (page - 1) * rowsPerPage + 1,
+      "-",
+      page * rowsPerPage,
+      " of ",
+      count
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles_module.default["btn-list"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          type: "button",
+          disabled: !showPrev,
+          onClick: () => props.onChangePage(page - 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "navigateBefore" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          type: "button",
+          disabled: !showNext,
+          onClick: () => props.onChangePage(page + 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx(internal.DSIcon, { name: "navigateNext" })
+        }
+      ) })
+    ] })
+  ] });
+}
+const getDigits = (number) => {
+  return Math.max(Math.floor(Math.log10(Math.abs(number))), 0) + 1;
+};
+
+exports.default = TablePagination;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__8da45ccd","rows-per-page":"vt_ce_TablePagination_rowsPerPage__8da45ccd","rows-per-page-label":"vt_ce_TablePagination_rowsPerPageLabel__8da45ccd","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__8da45ccd","page-counts":"vt_ce_TablePagination_pageCounts__8da45ccd","btn-list":"vt_ce_TablePagination_btnList__8da45ccd","ellipsis":"vt_ce_TablePagination_ellipsis__8da45ccd"};
+
+exports.default = modules_efc4e723;