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

package/dist/esm/Select/controlled.js

@@ -0,0 +1,204 @@
+'use strict';
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useState } 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 '../styles/css-vars.js';
+import css from './styles.module.scss.js';
+import { ArrowDropDown, Close } from '@mui/icons-material';
+import Menu from '../Menu/controlled.js';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { useFormControlContext } from '../FormControl/context.js';
+import Chip from '../Chip/index.js';
+
+const DefaultEndIcon = adaptMuiSvgIcon(ArrowDropDown);
+const DefaultUnsetIcon = adaptMuiSvgIcon(Close);
+function ControlledSelect({
+  ref,
+  value,
+  freeSolo = false,
+  triggerChangeOnBlur = false,
+  multiple = false,
+  endIcon = /* @__PURE__ */ jsx(DefaultEndIcon, {}),
+  placeholder = "Select",
+  clearable = true,
+  tight = false,
+  ...props
+}) {
+  const ctx = useFormControlContext();
+  const error = props.error ?? ctx.error;
+  const disabled = props.disabled ?? ctx.disabled;
+  const anchorId = useId();
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const unsetIcon = /* @__PURE__ */ jsx(DefaultUnsetIcon, {});
+  const selectedOption = !multiple ? props.options.find((option) => option.value === value) : void 0;
+  let filteredOptions = props.options;
+  if (props.filterOptions) {
+    filteredOptions = props.filterOptions(filteredOptions);
+  }
+  filteredOptions = filteredOptions.filter(
+    (option) => option.label.toLowerCase().includes(props.inputValue.toLowerCase())
+  );
+  let startAdornment = null;
+  if (multiple) {
+    const multiValue = value;
+    if (multiValue && multiValue.length > 0) {
+      startAdornment = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: css["value-chips"], children: multiValue.map((optionValue, index) => {
+        const option = props.options.find(
+          (option2) => option2.value === optionValue
+        );
+        return /* @__PURE__ */ jsx(
+          Chip,
+          {
+            clearable: true,
+            onClear: (e) => {
+              const old = [...value];
+              old.splice(index, 1);
+              props.onChange(
+                e,
+                old
+              );
+            },
+            className: css["value-chip"],
+            children: option?.label ?? optionValue?.toString()
+          },
+          option?.value?.toString() ?? optionValue?.toString() ?? `i-${index}`
+        );
+      }) }) });
+    }
+  }
+  const handleAddInputValue = (e) => {
+    if (freeSolo && props.inputValue !== "") {
+      if (!e.currentTarget.validity.patternMismatch) {
+        props.onChange(
+          e,
+          multiple ? [
+            // Don't add duplicates
+            .../* @__PURE__ */ new Set([
+              ...value ?? [],
+              props.inputValue
+            ])
+          ] : props.inputValue
+        );
+        props.onInputChange(e, "");
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        id: anchorId,
+        ref: anchorRef,
+        "data-focused": open,
+        "data-disabled": disabled,
+        "data-error": error,
+        onClick: () => {
+          if (!disabled) {
+            setOpen(true);
+          }
+        },
+        "data-testid": props["data-testid"],
+        style: props.style,
+        className: cx(
+          css["select"],
+          multiple && css["select-multi"],
+          tight && css["tight"],
+          props.className
+        ),
+        children: [
+          props.startIcon && /* @__PURE__ */ jsx("span", { className: css["select-icon"], children: props.startIcon }),
+          startAdornment,
+          /* @__PURE__ */ jsx("span", { className: css["inner-input-container"], children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              size: props.size,
+              "data-selected": Boolean(selectedOption) || (value ?? []).length > 0,
+              placeholder: selectedOption?.label ?? placeholder,
+              value: props.inputValue,
+              disabled: props.disabled,
+              pattern: props.pattern,
+              onChange: (e) => {
+                setOpen(true);
+                props.onInputChange(e, e.target.value);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleAddInputValue(e);
+                }
+              },
+              onBlur: (e) => {
+                if (triggerChangeOnBlur) {
+                  handleAddInputValue(e);
+                }
+              },
+              className: css["inner-input"],
+              "data-pendo": props["data-pendo"]
+            }
+          ) }),
+          selectedOption && clearable && !freeSolo && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: css["select-icon"],
+              onClick: (e) => {
+                props.onChange?.(e, null);
+                props.onInputChange(e, "");
+              },
+              children: unsetIcon
+            }
+          ),
+          endIcon && !freeSolo && /* @__PURE__ */ jsx("span", { className: css["select-icon"], children: endIcon })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        className: css["select-menu"],
+        role: "select",
+        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,
+        matchAnchorWidth: true,
+        onDismiss: () => {
+          setOpen(false);
+          props.onBlur?.();
+        },
+        options: filteredOptions.map((option) => ({
+          label: option.label,
+          icon: option.icon,
+          onSelect(e) {
+            if (multiple) {
+              const multiValue = value || [];
+              const hasValue = multiValue && multiValue.some((val) => val === option.value);
+              if (!hasValue) {
+                props.onChange(e, [...multiValue, option.value]);
+              }
+            } else {
+              props.onChange(e, option.value);
+            }
+            props.onInputChange(e, "");
+            setOpen(false);
+          }
+        }))
+      }
+    )
+  ] });
+}
+
+export { ControlledSelect as default };

package/dist/esm/Select/factory.js

@@ -0,0 +1,20 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import Select from './uncontrolled.js';
+import ControlledSelect from './controlled.js';
+
+function createSelectComponent({ portalEl }) {
+  return forwardRef(function ScopedSelect(props, ref) {
+    return /* @__PURE__ */ jsx(Select, { portalEl, ref, ...props });
+  });
+}
+function createControlledSelectComponent({
+  portalEl
+}) {
+  return forwardRef(function ScopedControlledSelect(props, ref) {
+    return /* @__PURE__ */ jsx(ControlledSelect, { portalEl, ref, ...props });
+  });
+}
+
+export { createControlledSelectComponent, createSelectComponent };

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

@@ -0,0 +1,3 @@
+var css = {"select":"vt_ce_Select_select__b63e11a6","select-multi":"vt_ce_Select_select-multi__b4d53651","tight":"vt_ce_Select_tight__b64bac2c","value-chips":"vt_ce_Select_value-chips__f38b862b","value-chip":"vt_ce_Select_value-chip__edb4413e","inner-input-container":"vt_ce_Select_inner-input-container__b9ca36fc","inner-input":"vt_ce_Select_inner-input__d94e8d90","select-icon":"vt_ce_Select_select-icon__c2e4bcaf","select-menu":"vt_ce_Select_select-menu__1bc3932d"};
+
+export { css as default };

package/dist/esm/Select/uncontrolled.js

@@ -0,0 +1,57 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import ControlledSelect from './controlled.js';
+
+function Select({
+  ref,
+  defaultValue = null,
+  value: propsValue,
+  inputValue: propsInputValue,
+  onChange: propsOnChange,
+  onInputChange: propsOnInputChange,
+  tight = false,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = 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] = useState("");
+  const [inputValue, onInputChange] = propsInputValue !== void 0 ? [
+    propsInputValue,
+    (e, newValue) => {
+      propsOnInputChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolledInputValue,
+    (e, newValue) => {
+      setUncontrolledInputValue(newValue);
+      propsOnInputChange?.(e, newValue);
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    ControlledSelect,
+    {
+      ref,
+      ...props,
+      value,
+      onChange,
+      inputValue,
+      onInputChange,
+      tight
+    }
+  );
+}
+
+export { Select as default };

package/dist/esm/StatusChip/index.js

@@ -0,0 +1,35 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import css from './styles.module.scss.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import Typography from '../Typography/index.js';
+
+const StatusChip = ({
+  children,
+  palette = defaultThemeCssVariableUsages.palette.indicator.info,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-status-chip-base-surface": palette.base.surface,
+        "--vt-ce-status-chip-base-on": palette.base.on,
+        ...props.style
+      },
+      className: cx(css.statusChip, props.className),
+      children: /* @__PURE__ */ jsx(Typography, { variant: "statusChip", color: "inherit", leadingTrim: true, children })
+    }
+  );
+};
+
+export { StatusChip as default };

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

@@ -0,0 +1,3 @@
+var css = {"statusChip":"vt_ce_StatusChip_statusChip__6cf32317"};
+
+export { css as default };

package/dist/esm/Stepper/auto.js

@@ -0,0 +1,123 @@
+'use strict';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import styles from './styles.module.scss.js';
+import Button from '../Button/index.js';
+import Stepper from './stepper.js';
+
+function AutoStepper({
+  steps,
+  onCancel,
+  onFinish,
+  backLabel = "Back",
+  cancelLabel = "Cancel",
+  nextLabel = "Next",
+  finishLabel = "Finish"
+}) {
+  const validatedSteps = steps.map((step) => {
+    const valid = !step.validateStep || step.validateStep();
+    return {
+      ...step,
+      disabled: step.disabled && valid,
+      valid
+    };
+  });
+  const [activeStepIndex, setActiveStepIndex] = React__default.useState(0);
+  const [completed, setCompleted] = React__default.useState({});
+  const activeStep = useMemo(
+    () => validatedSteps[activeStepIndex],
+    [activeStepIndex, validatedSteps]
+  );
+  const totalSteps = () => {
+    return steps.length;
+  };
+  const completedSteps = () => {
+    return Object.keys(completed).length;
+  };
+  const isLastStep = () => {
+    return activeStepIndex === totalSteps() - 1;
+  };
+  const allStepsCompleted = () => {
+    return completedSteps() === totalSteps();
+  };
+  const handleNext = () => {
+    const newActiveStep = isLastStep() && !allStepsCompleted() ? (
+      // It's the last step, but not all steps have been completed,
+      // find the first step that has been completed
+      steps.findIndex((step, i) => !(i in completed))
+    ) : activeStepIndex + 1;
+    setActiveStepIndex(newActiveStep);
+  };
+  const handleBack = () => {
+    handleChangeStep(activeStepIndex - 1);
+  };
+  const handleChangeStep = (selectedStep) => {
+    if (selectedStep < activeStepIndex) {
+      if (selectedStep >= 0) {
+        setActiveStepIndex(selectedStep);
+      }
+      return;
+    }
+    const prevStep = validatedSteps[activeStepIndex];
+    if (!prevStep || prevStep.valid) {
+      setActiveStepIndex(selectedStep);
+    }
+  };
+  const handleCompleteStep = () => {
+    const newCompleted = completed;
+    newCompleted[activeStepIndex] = true;
+    setCompleted(newCompleted);
+    if (!isLastStep()) {
+      handleNext();
+    } else {
+      handleFinishForm();
+    }
+  };
+  const handleCancel = () => {
+    setActiveStepIndex(0);
+    setCompleted({});
+    onCancel();
+  };
+  const handleFinishForm = () => {
+    onFinish();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.autoStepperWrapper, children: [
+    /* @__PURE__ */ jsx(
+      Stepper,
+      {
+        steps,
+        activeStep: activeStepIndex,
+        onChangeStep: handleChangeStep,
+        className: styles.autoStepperTopWrapper
+      }
+    ),
+    activeStep && /* @__PURE__ */ jsx("div", { children: activeStep.step }),
+    /* @__PURE__ */ jsx("div", { className: styles.verticalSpacer }),
+    /* @__PURE__ */ jsxs("div", { className: styles.buttonRowBottom, children: [
+      activeStepIndex !== 0 && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          disabled: activeStepIndex === 0,
+          onClick: handleBack,
+          children: backLabel
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.horizontalSpacer }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            onClick: handleCancel,
+            style: { marginRight: "10px" },
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { disabled: !activeStep?.valid, onClick: handleCompleteStep, children: isLastStep() ? finishLabel : nextLabel })
+      ] })
+    ] })
+  ] });
+}
+
+export { AutoStepper as default };

package/dist/esm/Stepper/stepper.js

@@ -0,0 +1,44 @@
+'use strict';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Button from '../Button/index.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import styles from './styles.module.scss.js';
+
+const Stepper = ({
+  steps,
+  activeStep,
+  onChangeStep,
+  style,
+  className
+}) => {
+  return /* @__PURE__ */ jsx("div", { style, className: cx(styles.stepperContainer, className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.step,
+      "aria-disabled": step.disabled,
+      onClick: () => !step.disabled && onChangeStep(index),
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            palette: defaultThemeCssVariableUsages.palette.action.secondary,
+            variant: activeStep === index ? "primary" : "secondary",
+            className: styles.stepButton,
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles.stepLabelContainer, children: /* @__PURE__ */ jsx("label", { className: styles.stepLabel, children: step.label }) }),
+        index !== steps.length - 1 && /* @__PURE__ */ jsx("hr", { className: styles.stepperLine })
+      ]
+    },
+    index
+  )) });
+};
+
+export { Stepper as default };

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

@@ -0,0 +1,3 @@
+var styles = {"autoStepperWrapper":"vt_ce_Stepper_autoStepperWrapper__6738d6c6","autoStepperTopWrapper":"vt_ce_Stepper_autoStepperTopWrapper__69bedd07","stepperContainer":"vt_ce_Stepper_stepperContainer__ddfeda9e","step":"vt_ce_Stepper_step__f32fe4d5","stepButton":"vt_ce_Stepper_stepButton__4a78fec9","stepLabelContainer":"vt_ce_Stepper_stepLabelContainer__f4b13398","stepLabel":"vt_ce_Stepper_stepLabel__0a16e4d1","stepperLine":"vt_ce_Stepper_stepperLine__3e88e7db","buttonRowBottom":"vt_ce_Stepper_buttonRowBottom__c2cc1743","verticalSpacer":"vt_ce_Stepper_verticalSpacer__13111b03","horizontalSpacer":"vt_ce_Stepper_horizontalSpacer__c6ff8b27"};
+
+export { styles as default };

package/dist/esm/Table/AutoTable/common.js

@@ -0,0 +1,125 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import React__default from 'react';
+import TableCell from '../TableCell/index.js';
+import styles from './styles.module.scss.js';
+
+function createColumnHelper() {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === "function" ? {
+        ...column,
+        accessorFn: accessor
+      } : {
+        ...column,
+        accessorKey: accessor
+      };
+    },
+    display: (column) => column
+    // group: column => column
+  };
+}
+function useAutoTable(options) {
+  const columnsProp = options.columns;
+  const mappedColumns = React__default.useMemo(
+    () => mapColumnDefs(columnsProp),
+    [columnsProp]
+  );
+  return useReactTable({
+    data: options.data,
+    columns: mappedColumns,
+    manualSorting: options.manualSorting,
+    manualPagination: options.manualPagination,
+    enableSorting: options.enableSorting,
+    enableRowSelection: options.enableRowSelection,
+    meta: options.meta,
+    getRowId: options.getRowId,
+    defaultColumn: {
+      cell: (info) => /* @__PURE__ */ jsx(TableCell, { children: info.renderValue() })
+    },
+    initialState: {
+      pagination: {
+        pageSize: options.pagination.pageSize
+      }
+    },
+    state: {
+      pagination: options.pagination,
+      sorting: options.sorting,
+      rowSelection: options.rowSelection
+    },
+    onSortingChange: (updater) => {
+      const value = typeof updater === "function" ? updater(options.sorting) : updater;
+      options.onSortingChange(value);
+    },
+    onRowSelectionChange: (updater) => {
+      const value = typeof updater === "function" ? updater(options.rowSelection) : updater;
+      options.onRowSelectionChange(value);
+    },
+    onPaginationChange: () => {
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
+}
+function mapColumnDefs(columnDefs) {
+  return columnDefs.map(mapColumnDef);
+}
+function mapColumnDef(columnDef) {
+  const meta = {
+    noVerticalPadding: columnDef.noVerticalPadding
+  };
+  const mappedDef = {
+    id: columnDef.id,
+    accessorFn: columnDef.accessorFn,
+    accessorKey: columnDef.accessorKey,
+    meta,
+    getUniqueValues: columnDef.getUniqueValues,
+    header: columnDef.header !== void 0 ? makeHeaderMappingComponent(columnDef.header) : void 0,
+    cell: columnDef.cell !== void 0 ? makeCellMappingComponent(columnDef.cell) : void 0,
+    enableMultiSort: columnDef.enableMultiSort,
+    enableSorting: columnDef.enableSorting,
+    invertSorting: columnDef.invertSorting,
+    sortDescFirst: columnDef.sortDescFirst,
+    sortingFn: columnDef.sortingFn,
+    sortUndefined: columnDef.sortUndefined
+  };
+  Object.keys(mappedDef).forEach((key) => {
+    const k = key;
+    if (mappedDef[k] === void 0) {
+      delete mappedDef[k];
+    }
+  });
+  return mappedDef;
+}
+function makeHeaderMappingComponent(header) {
+  if (typeof header === "string") {
+    return header;
+  }
+  return (props) => header({
+    column: props.column,
+    header: props.header,
+    table: props.table,
+    meta: props.table.options.meta
+  });
+}
+function makeCellMappingComponent(cell) {
+  if (typeof cell === "string") {
+    return cell;
+  }
+  return (props) => cell({
+    cell: props.cell,
+    column: props.column,
+    getValue: props.getValue,
+    renderValue: props.renderValue,
+    row: props.row,
+    table: props.table,
+    meta: props.table.options.meta
+  });
+}
+const DefaultErrorContainer = () => {
+  return /* @__PURE__ */ jsx("div", { className: styles.errorContainer, children: /* @__PURE__ */ jsx("div", { children: "Error" }) });
+};
+
+export { DefaultErrorContainer, createColumnHelper, mapColumnDef, mapColumnDefs, useAutoTable };