@vidispine/vdt-mui 23.2.0-pre.2 → 23.2.0

package/dist/es/inputs/SliderInput/components/Slider.js

@@ -0,0 +1,124 @@
+import { jsx as G } from "react/jsx-runtime";
+import { forwardRef as j, useRef as q, useMemo as f } from "react";
+import D from "@mui/material/Slider";
+import { styled as H } from "@mui/material/styles";
+import "clsx";
+import { isDefinedValue as n } from "../../../_utils/isDefinedValue.js";
+const J = "Min", C = Number.MIN_SAFE_INTEGER, K = "Max", R = Number.MAX_SAFE_INTEGER, Q = 1, Y = H(D, {
+  shouldForwardProp: (i) => i !== "hasDefinedValue"
+})(({
+  valueLabelDisplay: i,
+  hasDefinedValue: d
+}) => ({
+  "& .MuiSlider-thumb": {
+    // Fix tooltip shown with opacity
+    ...i !== "off" ? {
+      zIndex: 1
+    } : {},
+    // Want it focusable so not using "visibility: hidden" or "display: none"
+    ...!d && {
+      background: "transparent",
+      "&::before": {
+        boxShadow: "unset"
+      }
+    }
+  },
+  "& .MuiSlider-track": {
+    height: d ? "inherit" : "unset"
+  },
+  "&:not(.MuiSlider-marked)": {
+    marginBottom: "0px"
+  },
+  "&.MuiSlider-sizeSmall": {
+    "&.MuiSlider-marked": {
+      marginBottom: 16
+    },
+    "& .MuiSlider-markLabel": {
+      fontSize: "0.675rem"
+    }
+  }
+})), ce = j(({
+  id: i,
+  value: d,
+  defaultValue: A,
+  options: N,
+  range: E,
+  min: m,
+  max: M,
+  step: F,
+  infiniteMin: V,
+  infiniteMax: b,
+  infiniteDiff: g,
+  showMarks: y,
+  onChange: _,
+  ...B
+}, z) => {
+  const {
+    vdtClassNames: P,
+    // Ignore
+    className: Z,
+    autoComplete: $,
+    rows: W,
+    type: O,
+    ...U
+  } = B, x = n(A) ? A : E && [void 0, void 0] || void 0, o = d !== void 0, I = o && n(d) ? d : E && [void 0, void 0] || null, h = q(x), l = f(() => N == null ? void 0 : N.map((e) => ({
+    ...e,
+    value: Number(e == null ? void 0 : e.value)
+  })), [N]), S = n(F) ? Math.max(0, F) : !(l != null && l.length) && Q || null, s = f(() => {
+    if (!V && !b)
+      return;
+    const e = l == null ? void 0 : l.map((v) => v.value), t = e.length ? Math.min(...e) : 0, a = e.length ? Math.max(...e) : 0, u = n(g) ? g : Math.max(1, S);
+    let c = l;
+    return !n(m) && V && (c = [{
+      label: J,
+      value: t - u
+    }, ...c]), !n(M) && b && (c = [...c, {
+      label: K,
+      value: a + u
+    }]), c;
+  }, [g, b, V, S, l, M, m]), r = f(() => s || l, [l, s]), {
+    localMin: X,
+    localMax: k
+  } = f(() => {
+    const e = (r == null ? void 0 : r.map((t) => t.value)) || [];
+    return {
+      localMin: n(m) ? m : e.length && Math.min(...e) || 0,
+      localMax: n(M) ? M : e.length && Math.max(...e) || 0
+    };
+  }, [r, M, m]), L = (e) => {
+    var a;
+    return !((a = l == null ? void 0 : l.map((u) => u.value)) == null ? void 0 : a.includes(e)) && Math.min(...(s == null ? void 0 : s.map((u) => u.value)) || []) === e;
+  }, T = (e) => {
+    var a;
+    return !((a = l == null ? void 0 : l.map((u) => u.value)) == null ? void 0 : a.includes(e)) && Math.max(...(s == null ? void 0 : s.map((u) => u.value)) || []) === e;
+  };
+  return /* @__PURE__ */ G(Y, { id: i, ref: z, className: P, ...o ? {
+    value: I
+  } : {
+    defaultValue: x
+  }, onChange: E ? (e, t) => {
+    const [a, u] = Array.isArray(t) ? t : [t], c = L(a) ? C : a, v = T(u) ? R : u, w = o ? I : h.current;
+    (w[0] !== c || w[1] !== v) && (h.current = [c, v], _(e, {
+      value: [c, v]
+    }));
+  } : (e, t) => {
+    let a;
+    !n(m) && L(t) ? a = C : !n(M) && T(t) ? a = R : a = t, (o ? I : h.current) !== a && (h.current = a, _(e, {
+      value: a
+    }));
+  }, min: X, max: k, marks: y ? r : r == null ? void 0 : r.map((e) => ({
+    value: e.value
+  })), step: S, valueLabelFormat: (e) => {
+    var t;
+    return ((t = r == null ? void 0 : r.find((a) => ((a == null ? void 0 : a.value) || a) === e)) == null ? void 0 : t.label) || e;
+  }, getAriaLabel: (e) => {
+    var t, a;
+    return ((t = l == null ? void 0 : l[e]) == null ? void 0 : t.label) || ((a = l == null ? void 0 : l[e]) == null ? void 0 : a.value);
+  }, getAriaValueText: (e, t) => {
+    var a;
+    return ((a = l == null ? void 0 : l[t]) == null ? void 0 : a.label) || e;
+  }, hasDefinedValue: n(o ? I : h.current), ...U });
+});
+export {
+  ce as default
+};

package/dist/es/inputs/SliderInput/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as n } from "../../_utils/withOverrides.js";
+import m from "./SliderInput.js";
+const o = "SliderInput", e = `Vdt${o}`, i = n(e)(m), s = r(i, {
+  name: e,
+  overridesResolver: (d, t) => t.root
+})(() => ({}));
+s.displayName = o;
+export {
+  s as default
+};

package/dist/es/inputs/TagInput/TagInput.js

@@ -0,0 +1,356 @@
+import { jsxs as K, jsx as u } from "react/jsx-runtime";
+import e from "prop-types";
+import Q from "@mui/material/FormControl";
+import U from "@mui/material/FormHelperText";
+import X from "@mui/material/Autocomplete";
+import Y from "@mui/material/TextField";
+import Z from "@mui/material/Chip";
+import _ from "@mui/material/CircularProgress";
+import { styled as I } from "@mui/material/styles";
+import ee from "../_components/MenuItem.js";
+const te = I(X)(() => ({
+  /* Fix so label is not clashing with popup icon */
+  "&.MuiAutocomplete-hasPopupIcon": {
+    "& .MuiInputLabel-filled": {
+      paddingRight: 24,
+      "&.MuiInputLabel-shrink": {
+        paddingRight: 32
+      }
+    },
+    "& .MuiInputLabel-standard:not(.MuiInputLabel-shrink)": {
+      paddingRight: 24
+    },
+    "& .MuiInputLabel-outlined": {
+      paddingRight: 24,
+      "&.MuiInputLabel-shrink": {
+        paddingRight: 16
+      }
+    }
+  },
+  "&:not(.MuiAutocomplete-hasPopupIcon)": {
+    "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
+      paddingRight: 16
+    }
+  },
+  // Hide placeholder when a chip is set
+  "&:has(.MuiChip-root)": {
+    "& .MuiAutocomplete-input::placeholder": {
+      visibility: "hidden"
+    }
+  }
+})), ie = I(Y)(() => ({
+  /* Fix so chips is not clashing with each other */
+  "& .MuiChip-root": {
+    margin: 1
+  },
+  /* Fix so height is same as regular text field */
+  // Outlined
+  "& .MuiInputLabel-shrink + .MuiOutlinedInput-root": {
+    // Medium size (56px)
+    "&:not(.MuiInputBase-sizeSmall)": {
+      paddingTop: 13,
+      "& .MuiAutocomplete-input": {
+        paddingTop: 4,
+        paddingBottom: 7
+      }
+    },
+    // Small size (40px)
+    "&.MuiInputBase-sizeSmall": {
+      paddingTop: 9,
+      paddingBottom: 4,
+      "& .MuiAutocomplete-input": {
+        paddingTop: 2,
+        paddingBottom: 2
+      }
+    }
+  },
+  // Filled
+  "& .MuiInputLabel-shrink + .MuiFilledInput-root": {
+    // Medium size (56px)
+    "&:not(.MuiInputBase-sizeSmall)": {
+      paddingTop: 25,
+      paddingBottom: 2,
+      "& .MuiAutocomplete-input": {
+        paddingTop: 2,
+        paddingBottom: 4
+      },
+      "& .MuiChip-root": {
+        maxHeight: 27
+      }
+    },
+    // Small size (48px)
+    "&.MuiInputBase-sizeSmall": {
+      paddingTop: 22,
+      paddingBottom: 2,
+      "& .MuiAutocomplete-input": {
+        paddingTop: 0,
+        paddingBottom: 1
+      },
+      "& .MuiChip-root": {
+        maxHeight: 22
+      }
+    }
+  },
+  // Standard
+  "& .MuiInputLabel-shrink + .MuiInput-root": {
+    // Medium size (48px)
+    "&:not(.MuiInputBase-sizeSmall)": {
+      paddingBottom: 3,
+      "& .MuiAutocomplete-input": {
+        paddingLeft: 4,
+        paddingTop: 3,
+        paddingBottom: 3
+      },
+      "& .MuiChip-root": {
+        maxHeight: 27
+      }
+    },
+    // Small size (45px)
+    "&.MuiInputBase-sizeSmall": {
+      paddingTop: 1,
+      paddingBottom: 2,
+      "& .MuiAutocomplete-input": {
+        paddingLeft: 2,
+        paddingTop: 1,
+        paddingBottom: 2
+      }
+    }
+  }
+})), ne = {
+  Root: Q,
+  FormHelperText: U,
+  Autocomplete: te,
+  TextField: ie,
+  MenuItem: ee,
+  Chip: Z
+};
+function T({
+  name: m,
+  label: C,
+  value: d,
+  defaultValue: O,
+  options: l,
+  helperText: s,
+  error: g,
+  required: c,
+  disabled: x,
+  fullWidth: B,
+  placeholder: h,
+  freeSolo: F,
+  loading: f,
+  variant: L,
+  size: b,
+  showChipCount: y,
+  onChange: A,
+  onInputChange: v,
+  onBlur: S,
+  onFocus: H,
+  onOpen: R,
+  onClose: j,
+  components: k,
+  componentsProps: o
+}) {
+  const {
+    Root: z,
+    TextField: P,
+    FormHelperText: V,
+    Autocomplete: W,
+    MenuItem: q,
+    Chip: w
+  } = k, D = (t) => {
+    const i = l == null ? void 0 : l.find((n) => ((n == null ? void 0 : n.value) || n) === t);
+    return ((i == null ? void 0 : i.label) || (t == null ? void 0 : t.value) || t) + (y && (i == null ? void 0 : i.count) !== void 0 ? ` (${i == null ? void 0 : i.count})` : "");
+  }, E = (t) => {
+    var i;
+    return ((i = l == null ? void 0 : l.find((n) => ((n == null ? void 0 : n.value) || n) === t)) == null ? void 0 : i.label) || t;
+  }, N = (t) => {
+    var i;
+    return ((i = l == null ? void 0 : l.find((n) => ((n == null ? void 0 : n.value) || n) === t)) == null ? void 0 : i.disabled) || !1;
+  }, $ = (t, i) => {
+    A(t, {
+      value: i == null ? void 0 : i.map((n) => (n == null ? void 0 : n.value) || n)
+    });
+  }, G = (l == null ? void 0 : l.map((t) => (t == null ? void 0 : t.value) || t)) || [], J = d !== void 0, r = !!g, M = (g || "").trim();
+  return /* @__PURE__ */ K(z, { error: r, required: c, fullWidth: B, ...o.root, children: [
+    /* @__PURE__ */ u(W, { id: m, name: m, value: d, ...J ? {
+      value: d
+    } : {
+      defaultValue: O
+    }, options: G, getOptionLabel: (t) => E(t), getOptionDisabled: (t) => N(t), isOptionEqualToValue: (t, i) => t === i, freeSolo: F, disabled: x, loading: f, onChange: $, onInputChange: (t, i) => v(t, {
+      value: i
+    }), onBlur: S, onFocus: H, onOpen: R, onClose: j, multiple: !0, disableClearable: !0, disablePortal: !0, openOnFocus: !0, renderTags: (t, i) => t.map((n, p) => /* @__PURE__ */ u(w, { label: D(n), size: b, ...i({
+      index: p
+    }), ...o.chip })), renderOption: ({
+      className: t,
+      ...i
+    }, n) => {
+      const p = (l == null ? void 0 : l.find((a) => ((a == null ? void 0 : a.value) || a) === n)) || {
+        value: n
+      };
+      return /* @__PURE__ */ u(q, { ...p, ...i, ...o.menuItem });
+    }, renderInput: (t) => {
+      var i;
+      return /* @__PURE__ */ u(P, { ...t, label: C, error: r, required: c, variant: L, size: b, placeholder: h, fullWidth: !0, ...o.textField, InputProps: {
+        ...t.InputProps,
+        endAdornment: f ? /* @__PURE__ */ u(_, { color: "inherit", size: 20 }) : null,
+        ...((i = o.textField) == null ? void 0 : i.InputProps) || {}
+      }, InputLabelProps: {
+        ...h !== void 0 ? {
+          shrink: !0
+        } : {},
+        ...o.textField.InputLabelProps || {}
+      } });
+    }, ...o.autocomplete }),
+    (M || s) && /* @__PURE__ */ u(V, { ...o.formHelperText, children: r ? M : s })
+  ] });
+}
+T.propTypes = {
+  /**
+   * Name of input
+   */
+  name: e.string,
+  /**
+   * Label of input
+   */
+  label: e.string,
+  /**
+   * Value of input
+   */
+  value: e.arrayOf(e.string),
+  /**
+   * Default value of input
+   */
+  defaultValue: e.arrayOf(e.string),
+  /**
+   * Options for input
+   */
+  options: e.arrayOf(e.oneOfType([e.string, e.shape({
+    value: e.string,
+    label: e.string,
+    count: e.oneOfType([e.number, e.string]),
+    disabled: e.bool
+  })])),
+  /**
+   * Help text underneath input
+   */
+  helperText: e.string,
+  /**
+   * Error to display underneath input (overrides `helperText`)
+   */
+  error: e.string,
+  /**
+   * Set if input is required
+   */
+  required: e.bool,
+  /**
+   * Allows for arbitrary values
+   */
+  disabled: e.bool,
+  /**
+   * Set if input should be full width
+   */
+  fullWidth: e.bool,
+  /**
+   * Allows for arbitrary values
+   */
+  freeSolo: e.bool,
+  /**
+   * Show a loading state
+   *
+   * (e.g. useful when loading options async)
+   */
+  loading: e.bool,
+  /**
+   * Show count from option inside the chips
+   */
+  showChipCount: e.bool,
+  /**
+   * Set variant of input
+   */
+  variant: e.oneOf(["outlined", "filled", "standard"]),
+  /**
+   * Set size of input
+   */
+  size: e.oneOf(["medium", "small"]),
+  /**
+   * Set placeholder for input
+   */
+  placeholder: e.string,
+  // Callbacks
+  /**
+   * Callback when value changed
+   */
+  onChange: e.func,
+  /**
+   * Callback when input inside text field changes
+   */
+  onInputChange: e.func,
+  /**
+   * Callback when input is blurred
+   */
+  onBlur: e.func,
+  /**
+   * Callback when input is focused
+   */
+  onFocus: e.func,
+  /**
+   * Callback when options are opened
+   */
+  onOpen: e.func,
+  /**
+   * Callback when options are closed
+   */
+  onClose: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    FormHelperText: e.elementType,
+    Autocomplete: e.elementType,
+    TextField: e.elementType,
+    MenuItem: e.elementType,
+    Chip: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    formHelperText: e.instanceOf(Object),
+    autocomplete: e.instanceOf(Object),
+    textField: e.instanceOf(Object),
+    menuItem: e.instanceOf(Object),
+    chip: e.instanceOf(Object)
+  })
+};
+T.defaultProps = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  options: [],
+  helperText: void 0,
+  error: void 0,
+  placeholder: void 0,
+  required: !1,
+  disabled: !1,
+  fullWidth: !0,
+  freeSolo: !1,
+  loading: !1,
+  showChipCount: !1,
+  variant: "outlined",
+  size: "medium",
+  onChange: () => null,
+  onInputChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  onOpen: void 0,
+  onClose: void 0,
+  components: ne,
+  componentsProps: void 0
+};
+export {
+  T as default
+};

package/dist/es/inputs/TagInput/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as n } from "../../_utils/withOverrides.js";
+import m from "./TagInput.js";
+const o = "TagInput", t = `Vdt${o}`, s = n(t)(m), p = r(s, {
+  name: t,
+  overridesResolver: (i, e) => e.root
+})(() => ({}));
+p.displayName = o;
+export {
+  p as default
+};

package/dist/es/inputs/TextInput/TextInput.js

@@ -0,0 +1,154 @@
+import { jsx as j } from "react/jsx-runtime";
+import e from "prop-types";
+import q from "@mui/material/TextField";
+const z = {
+  Root: q
+};
+function u({
+  name: n,
+  label: p,
+  value: l,
+  defaultValue: f,
+  helperText: r,
+  error: t,
+  required: m,
+  disabled: c,
+  placeholder: i,
+  fullWidth: v,
+  multiline: h,
+  variant: g,
+  size: b,
+  type: x,
+  onChange: T,
+  onBlur: C,
+  onFocus: y,
+  components: O,
+  componentsProps: a
+}) {
+  const {
+    Root: P
+  } = O, F = (o) => {
+    var d;
+    T(o, {
+      value: (d = o == null ? void 0 : o.target) == null ? void 0 : d.value
+    });
+  }, I = l !== void 0, s = !!t, R = (t || "").trim();
+  return /* @__PURE__ */ j(P, { id: n, name: n, label: p, ...I ? {
+    value: l || ""
+  } : {
+    defaultValue: f
+  }, helperText: (R || r) && s ? t : r, error: s, required: m, disabled: c, fullWidth: v, multiline: h, variant: g, size: b, type: x, placeholder: i, autoComplete: "off", onChange: F, onBlur: C, onFocus: y, InputLabelProps: {
+    ...i !== void 0 ? {
+      shrink: !0
+    } : {},
+    ...a.root.InputLabelProps || {}
+  }, ...a.root });
+}
+u.propTypes = {
+  /**
+   * Name for input
+   */
+  name: e.string,
+  /**
+   * Label for input
+   */
+  label: e.string,
+  /**
+   * Value of input
+   */
+  value: e.string,
+  /**
+   * Default value of input (use if uncontrolled)
+   */
+  defaultValue: e.string,
+  /**
+   * Help text underneath input
+   */
+  helperText: e.string,
+  /**
+   * An error message to display underneath input component
+   */
+  error: e.string,
+  /**
+   * Set if required
+   */
+  required: e.bool,
+  /**
+   * Set if disabled
+   */
+  disabled: e.bool,
+  /**
+   * Set if input should be full width
+   */
+  fullWidth: e.bool,
+  /**
+   * Set if multiline (use text area)
+   */
+  multiline: e.bool,
+  /**
+   * Set variant of input
+   */
+  variant: e.oneOf(["outlined", "filled", "standard"]),
+  /**
+   * Set size of input
+   */
+  size: e.oneOf(["medium", "small"]),
+  /**
+   * Set type of text input
+   */
+  type: e.oneOf(["text", "email", "password", "search", "tel", "url"]),
+  /**
+   * Set placeholder for input
+   */
+  placeholder: e.string,
+  // Callbacks
+  /**
+   * Callback when value changed
+   */
+  onChange: e.func,
+  /**
+   * Callback when input is blurred
+   */
+  onBlur: e.func,
+  /**
+   * Callback when input is focused
+   */
+  onFocus: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object)
+  })
+};
+u.defaultProps = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  helperText: void 0,
+  error: void 0,
+  placeholder: void 0,
+  required: !1,
+  disabled: !1,
+  fullWidth: !0,
+  multiline: !1,
+  variant: "outlined",
+  size: "medium",
+  type: "text",
+  onChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  components: z,
+  componentsProps: void 0
+};
+export {
+  u as default
+};

package/dist/es/inputs/TextInput/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as n } from "../../_utils/withOverrides.js";
+import m from "./TextInput.js";
+const t = "TextInput", o = `Vdt${t}`, s = n(o)(m), p = r(s, {
+  name: o,
+  overridesResolver: (i, e) => e.root
+})(() => ({}));
+p.displayName = t;
+export {
+  p as default
+};