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

package/dist/es/inputs/RadioGroupInput/components/RadioGroup.js

@@ -0,0 +1,72 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as G } from "react";
+import N from "@mui/material/RadioGroup";
+import P from "@mui/material/FormControlLabel";
+import $ from "@mui/material/Radio";
+import { styled as y } from "@mui/material/styles";
+const x = y(N, {
+  shouldForwardProp: (o) => o !== "justifyContent"
+})(({
+  row: o,
+  justifyContent: l
+}) => ({
+  width: "100%",
+  ...o && l ? {
+    justifyContent: l
+  } : {},
+  "& .MuiFormControlLabel-labelPlacementStart": {
+    marginLeft: 1.5,
+    marginRight: 0
+  },
+  "& .MuiFormControlLabel-labelPlacementEnd": {
+    marginLeft: 0,
+    marginRight: 1.5
+  }
+})), K = G(({
+  id: o,
+  value: l,
+  defaultValue: n,
+  disabled: i,
+  options: s,
+  orientation: e,
+  labelPlacement: d,
+  justifyContent: u,
+  size: m,
+  onChange: c,
+  FormControlLabelComponent: p = P,
+  formControlLabelProps: f = {},
+  RadioComponent: h = $,
+  radioProps: C = {},
+  ...g
+}, b) => {
+  const {
+    vdtClassNames: R,
+    // Ignore
+    className: S,
+    autoComplete: j,
+    autoFocus: E,
+    rows: _,
+    type: k,
+    ...v
+  } = g;
+  return /* @__PURE__ */ t(x, { ref: b, id: o, className: R, ...l !== void 0 ? {
+    value: l
+  } : {
+    defaultValue: n
+  }, row: e === "horizontal", justifyContent: u, onChange: (a) => {
+    var r;
+    c(a, {
+      value: (r = a == null ? void 0 : a.target) == null ? void 0 : r.value
+    });
+  }, ...v, children: s.map(({
+    name: a,
+    value: r,
+    label: w,
+    count: F,
+    disabled: L,
+    ...M
+  }) => /* @__PURE__ */ t(p, { label: w, count: F, labelPlacement: d, orientation: e, size: m, control: /* @__PURE__ */ t(h, { id: `${o}-${a || r}`, value: r, disabled: L || i, size: m, ...M, ...C }), ...f }, `${o}-${r}`)) });
+});
+export {
+  K as default
+};

package/dist/es/inputs/RadioGroupInput/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 "./RadioGroupInput.js";
+const o = "RadioGroupInput", t = `Vdt${o}`, p = n(t)(m), i = r(p, {
+  name: t,
+  overridesResolver: (s, e) => e.root
+})(() => ({}));
+i.displayName = o;
+export {
+  i as default
+};

package/dist/es/inputs/SelectInput/SelectInput.js

@@ -0,0 +1,195 @@
+import { jsx as c } from "react/jsx-runtime";
+import e from "prop-types";
+import B from "@mui/material/TextField";
+import { styled as E } from "@mui/material/styles";
+import $ from "../_components/MenuItem.js";
+const k = E(B)(() => ({
+  // Show label correctly with ellipsis
+  minWidth: 72,
+  "& .MuiFormLabel-root": {
+    minWidth: 16,
+    paddingRight: 16
+  }
+})), D = {
+  Root: k,
+  MenuItem: $
+};
+function y({
+  name: u,
+  label: b,
+  value: o,
+  defaultValue: l,
+  options: t,
+  helperText: p,
+  error: d,
+  required: h,
+  disabled: O,
+  fullWidth: T,
+  variant: I,
+  size: x,
+  placeholder: i,
+  multiple: m,
+  onChange: C,
+  onBlur: M,
+  onFocus: A,
+  onOpen: F,
+  onClose: P,
+  components: j,
+  componentsProps: a
+}) {
+  const {
+    Root: L,
+    MenuItem: R
+  } = j, f = o !== void 0, S = f && m && o !== void 0 && !Array.isArray(o) ? [o] : o, W = !f && m && !Array.isArray(l) ? l && [l] || [] : l || "", q = (r) => {
+    var n;
+    C(r, {
+      value: (n = r == null ? void 0 : r.target) == null ? void 0 : n.value
+    });
+  }, g = (r) => {
+    var n;
+    return ((n = t == null ? void 0 : t.find((s) => ((s == null ? void 0 : s.value) || s) === r)) == null ? void 0 : n.label) || r;
+  }, v = !!d, z = (d || "").trim();
+  return /* @__PURE__ */ c(L, { id: u, name: u, label: b, ...f ? {
+    value: S
+  } : {
+    defaultValue: W
+  }, helperText: (z || p) && v ? d : p, error: v, required: h, disabled: O, fullWidth: T, variant: I, size: x, select: !0, onChange: q, onBlur: M, onFocus: A, InputLabelProps: {
+    ...i !== void 0 ? {
+      shrink: !0
+    } : {},
+    ...a.root.InputLabelProps || {}
+  }, ...a.root, SelectProps: {
+    multiple: m,
+    onOpen: F,
+    onClose: P,
+    displayEmpty: !0,
+    renderValue: (r) => (i == null ? void 0 : i.length) > 0 && (r === "" || r.length === 0) ? /* @__PURE__ */ c("span", { style: {
+      color: "#81858a"
+    }, children: i }) : Array.isArray(r) ? r.map((n) => g(n)).join(", ") : g(r),
+    ...a.root.SelectProps || {}
+  }, children: t == null ? void 0 : t.map((r) => /* @__PURE__ */ c(R, { ...r, ...a.menuItem }, `select-${u}-${r == null ? void 0 : r.value}`)) });
+}
+y.propTypes = {
+  /**
+   * Name for input (htmlFor attribute of InputLabel)
+   */
+  name: e.string,
+  /**
+   * Label of input
+   */
+  label: e.string,
+  /**
+   * Value of input (uncontrolled if unset)
+   */
+  value: e.oneOfType([e.string, e.arrayOf(e.string)]),
+  /**
+   * Default value of input component (use with uncontrolled)
+   */
+  defaultValue: e.oneOfType([e.string, e.arrayOf(e.string)]),
+  /**
+   * Options for input
+   */
+  options: e.arrayOf(e.shape({
+    value: e.string,
+    label: e.string,
+    count: e.number
+  })),
+  /**
+   * 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 multiple options can be selected
+   */
+  multiple: 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 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,
+    MenuItem: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    menuItem: e.instanceOf(Object)
+  })
+};
+y.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,
+  multiple: !1,
+  variant: "outlined",
+  size: "medium",
+  onChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  onOpen: void 0,
+  onClose: void 0,
+  components: D,
+  componentsProps: void 0
+};
+export {
+  y as default
+};

package/dist/es/inputs/SelectInput/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 "./SelectInput.js";
+const e = "SelectInput", t = `Vdt${e}`, s = n(t)(m), p = r(s, {
+  name: t,
+  overridesResolver: (i, o) => o.root
+})(() => ({}));
+p.displayName = e;
+export {
+  p as default
+};

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

@@ -0,0 +1,350 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import e from "prop-types";
+import J from "@mui/icons-material/esm/Clear";
+import K from "@mui/material/FormControl";
+import P from "@mui/material/FormHelperText";
+import Q from "@mui/material/InputLabel";
+import X from "@mui/material/OutlinedInput";
+import Y from "@mui/material/FilledInput";
+import Z from "@mui/material/Input";
+import _ from "@mui/material/ButtonBase";
+import { styled as i } from "@mui/material/styles";
+import "react";
+import "clsx";
+import { isDefinedValue as N } from "../../_utils/isDefinedValue.js";
+import ee from "./components/Slider.js";
+const te = i(X, {
+  shouldForwardProp: (t) => t !== "showClearButton"
+})(({
+  showClearButton: t
+}) => ({
+  paddingLeft: 24,
+  paddingRight: 24,
+  // Medium Size (56px, without markers)
+  "&:not(.MuiInputBase-sizeSmall)": {
+    paddingTop: 14,
+    paddingBottom: 12
+  },
+  // Small size
+  "&.MuiInputBase-sizeSmall": {
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  // Include width of clear button
+  "& .MuiOutlinedInput-notchedOutline > legend": {
+    ...t && {
+      paddingRight: 16
+    }
+  }
+})), ne = i(Y)(() => ({
+  paddingLeft: 24,
+  paddingRight: 24,
+  // Medium Size
+  "&:not(.MuiInputBase-sizeSmall)": {
+    paddingTop: 32,
+    paddingBottom: 10
+  },
+  // Small size (56px, without markers, medium for others)
+  "&.MuiInputBase-sizeSmall": {
+    paddingTop: 22,
+    paddingBottom: 6
+  }
+})), ie = i(Z)(() => ({
+  paddingLeft: 16,
+  paddingRight: 16,
+  // Medium Size (48px, without markers)
+  "&:not(.MuiInputBase-sizeSmall)": {
+    paddingTop: 2
+  },
+  // Small size (45px, without markers)
+  "&.MuiInputBase-sizeSmall": {
+    paddingTop: 1,
+    paddingBottom: 0
+  }
+})), oe = i(ee)(() => ({
+  zIndex: 1
+})), le = i(P)(() => ({
+  marginLeft: 14,
+  marginRight: 14
+})), re = i(_)(() => ({
+  marginLeft: 4,
+  marginBottom: 1,
+  backgroundColor: "inherit",
+  "& .MuiSvgIcon-root": {}
+})), ae = {
+  Root: K,
+  FormHelperText: le,
+  InputLabel: Q,
+  BaseButton: re,
+  Input: ie,
+  // Standard Input
+  FilledInput: ne,
+  OutlinedInput: te,
+  Slider: oe
+};
+function I({
+  name: t,
+  label: a,
+  value: d,
+  defaultValue: O,
+  options: T,
+  helperText: u,
+  error: p,
+  required: B,
+  disabled: h,
+  min: y,
+  max: M,
+  infiniteMin: S,
+  infiniteMax: v,
+  infiniteDiff: x,
+  variant: l,
+  size: r,
+  step: F,
+  showMarks: C,
+  valueLabelDisplay: L,
+  clearable: j,
+  range: s,
+  onChange: m,
+  onBlur: R,
+  onFocus: z,
+  components: H,
+  componentsProps: n
+}) {
+  const {
+    Root: k,
+    FormHelperText: w,
+    InputLabel: D,
+    BaseButton: V,
+    Input: q,
+    FilledInput: U,
+    OutlinedInput: $,
+    Slider: E
+  } = H, f = N(d) && j, W = {
+    standard: q,
+    filled: U,
+    outlined: $
+  }[l], A = {
+    standard: {
+      disableUnderline: !0,
+      ...n.input
+    },
+    filled: {
+      disableUnderline: !0,
+      ...n.filledInput
+    },
+    outlined: {
+      label: a,
+      notched: !0,
+      showClearButton: f,
+      ...n.outlinedInput
+    }
+  }[l], c = !!p, b = (p || "").trim();
+  return /* @__PURE__ */ g(k, { error: c, required: B, disabled: h, variant: l, size: r, fullWidth: !0, ...n.root, children: [
+    /* @__PURE__ */ o(D, { htmlFor: t, id: `${t}-label`, shrink: !0, ...n.inputLabel, children: /* @__PURE__ */ g("span", { children: [
+      a,
+      f && /* @__PURE__ */ o(V, { focusRipple: !0, onClick: (G) => {
+        m(G, {
+          value: s ? [] : null
+        });
+      }, children: /* @__PURE__ */ o(J, { fontSize: "small" }) })
+    ] }) }),
+    /* @__PURE__ */ o(W, { id: t, name: t, size: r, inputComponent: E, inputProps: {
+      value: d,
+      defaultValue: O,
+      options: T,
+      range: s,
+      min: y,
+      max: M,
+      size: r,
+      infiniteMin: S,
+      infiniteMax: v,
+      infiniteDiff: x,
+      valueLabelDisplay: L,
+      showMarks: C,
+      step: F,
+      onChange: m,
+      onFocus: z,
+      onBlur: R,
+      "aria-labelledby": `${t}-label`,
+      vdtClassNames: n.slider.className,
+      ...n.slider
+    }, ...A }),
+    (b || u) && /* @__PURE__ */ o(w, { ...n.formHelperText, children: c ? b : u })
+  ] });
+}
+I.propTypes = {
+  /**
+   * Name of input
+   */
+  name: e.string,
+  /**
+   * Label of input
+   */
+  label: e.string,
+  /**
+   * Value of input component
+   */
+  value: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  /**
+   * Default value of input component (use with uncontrolled)
+   */
+  defaultValue: e.oneOfType([e.number, e.arrayOf(e.number)]),
+  /**
+   * Options for the slider (used as marks)
+   *
+   * Will take `min`, `max` from options unless those are explicitly set
+   */
+  options: e.arrayOf(e.shape({
+    label: e.string,
+    value: e.oneOfType([e.number, e.string])
+  })),
+  /**
+   * Help text underneath input
+   */
+  helperText: e.string,
+  /**
+   * Error to display underneath input (overrides `helperText`)
+   */
+  error: e.string,
+  /**
+   * Set if required
+   */
+  required: e.bool,
+  /**
+   * Set if disabled
+   */
+  disabled: e.bool,
+  /**
+   * Minimum value of range
+   *
+   * Default from `options`
+   */
+  min: e.number,
+  /**
+   * Maximum value of range
+   *
+   * Default from `options`
+   */
+  max: e.number,
+  /**
+   * Set `Number.MIN_SAFE_INTEGER` as min
+   *
+   * Unused if `min` is set
+   */
+  infiniteMin: e.bool,
+  /**
+   * Set `Number.MAX_SAFE_INTEGER` as max
+   *
+   * Unused if `max` is set
+   */
+  infiniteMax: e.bool,
+  /**
+   * Set how much the infinite min/max label should be separated from nearest min/max label
+   *
+   * Defaults max of 1 or `step`
+   */
+  infiniteDiff: e.number,
+  /**
+   * Set variant of input
+   */
+  variant: e.oneOf(["outlined", "filled", "standard"]),
+  /**
+   * Whether the slider is a range or not
+   */
+  size: e.oneOf(["medium", "small"]),
+  /**
+   * How many steps the slider thumb should move
+   *
+   * Defaults to stepping between options (if added), otherwise steps 1
+   */
+  step: e.number,
+  /**
+   * Whether to show marks or not
+   */
+  showMarks: e.bool,
+  /**
+   * Whether to show clear button in label or not
+   *
+   * Limitation: Only clears controlled value so won't show if no `value` prop
+   */
+  clearable: e.bool,
+  /**
+   * Select if it should show tooltip for slider thumb
+   */
+  valueLabelDisplay: e.oneOf(["off", "on", "auto"]),
+  /**
+   * Set if a range should be selected
+   */
+  range: e.bool,
+  // 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,
+    FormHelperText: e.elementType,
+    InputLabel: e.elementType,
+    BaseButton: e.elementType,
+    Input: e.elementType,
+    FilledInput: e.elementType,
+    OutlinedInput: e.elementType,
+    Slider: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    formHelperText: e.instanceOf(Object),
+    inputLabel: e.instanceOf(Object),
+    baseButton: e.instanceOf(Object),
+    input: e.instanceOf(Object),
+    filledInput: e.instanceOf(Object),
+    outlinedInput: e.instanceOf(Object),
+    slider: e.instanceOf(Object)
+  })
+};
+I.defaultProps = {
+  name: void 0,
+  label: void 0,
+  helperText: void 0,
+  error: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  options: [],
+  required: !1,
+  disabled: !1,
+  min: void 0,
+  max: void 0,
+  infiniteMin: !1,
+  infiniteMax: !1,
+  infiniteDiff: void 0,
+  variant: "outlined",
+  size: "medium",
+  step: null,
+  showMarks: !0,
+  valueLabelDisplay: "off",
+  clearable: !0,
+  range: !1,
+  onChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  components: ae,
+  componentsProps: void 0
+};
+export {
+  I as default
+};