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

package/dist/es/inputs/MaskedTextInput/MaskedTextInput.js

@@ -0,0 +1,235 @@
+import { jsx as V } from "react/jsx-runtime";
+import { useRef as _ } from "react";
+import e from "prop-types";
+import G from "@mui/material/TextField";
+import H from "./components/MaskedInputComponent.js";
+const J = {
+  Root: G,
+  InputComponent: H
+};
+function p({
+  name: m,
+  label: c,
+  value: n,
+  defaultValue: i,
+  placeholder: f,
+  helperText: l,
+  error: t,
+  required: v,
+  disabled: b,
+  fullWidth: C,
+  multiline: O,
+  variant: g,
+  size: T,
+  min: h,
+  max: x,
+  mask: k,
+  focused: y,
+  definitions: I,
+  eager: P,
+  overwrite: j,
+  lazy: R,
+  onChange: z,
+  onBlur: F,
+  onFocus: M,
+  onClick: q,
+  components: w,
+  componentsProps: o
+}) {
+  var s, a;
+  const {
+    Root: A,
+    InputComponent: B
+  } = w, r = _(n || i), L = n !== void 0 ? n : r.current, W = (E, N) => {
+    const {
+      _unmaskedValue: d
+    } = N;
+    r.current = d, z(null, {
+      value: d,
+      maskedValue: E
+    });
+  }, u = !!t, D = (t || "").trim();
+  return /* @__PURE__ */ V(A, { name: m, label: c, value: L, defaultValue: i, helperText: (D || l) && u ? t : l, error: u, placeholder: f, required: v, disabled: b, fullWidth: C, multiline: O, variant: g, size: T, focused: y, autoComplete: "off", onFocus: M, onClick: q, onBlur: F, ...o.root, InputProps: {
+    inputComponent: B,
+    ...((s = o.root) == null ? void 0 : s.InputProps) || {},
+    inputProps: {
+      mask: k,
+      min: h,
+      max: x,
+      definitions: I,
+      eager: P,
+      overwrite: j,
+      lazy: R,
+      onAccept: W,
+      ...o.inputComponent
+    }
+  }, InputLabelProps: {
+    shrink: !0,
+    ...((a = o.root) == null ? void 0 : a.InputLabelProps) || {}
+  } });
+}
+p.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,
+  /**
+   * Placeholder for input field
+   */
+  placeholder: 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 min value for input
+   *
+   * Defaults to `1900-01-01` if `Date` type
+   */
+  min: e.oneOfType([e.string, e.number]),
+  /**
+   * Set max value for input
+   *
+   * Defaults to `9999-01-01` if `Date` type
+   */
+  max: e.oneOfType([e.string, e.number]),
+  /**
+   * Set focused state for input
+   */
+  focused: e.bool,
+  /**
+   * The `react-imask` mask to use for the text input
+   *
+   * Default definitions are:
+   * - `0` any digit
+   * - `a` any letter
+   * - `*` any char
+   * - `[]` make input optional
+   * - `{}` include fixed part in unmasked value
+   * - `` ` `` prevent symbols shift back
+   * - `\` Escape definitions to treat as fixed value
+   */
+  mask: e.oneOfType([e.instanceOf(Date), e.instanceOf(Number), e.instanceOf(Object), e.string]),
+  /**
+   * Automatically add characters without definitions
+   */
+  eager: e.bool,
+  /**
+   * Overwrite value from the current position
+   */
+  overwrite: e.bool,
+  /**
+   * Set false to show mask pattern/format as placeholder
+   */
+  lazy: e.bool,
+  /**
+   * The `react-imask` definitions for mask characters valid regexp
+   *
+   * Note: If definition character should be treated as fixed escape with "\\" (e.g. "\\0")
+   */
+  definitions: e.instanceOf(Object),
+  // Callbacks
+  /**
+   * Callback when text field value changed
+   */
+  onChange: e.func,
+  /**
+   * Callback when input is blurred
+   */
+  onBlur: e.func,
+  /**
+   * Callback when input is focused
+   */
+  onFocus: e.func,
+  /**
+   * Callback when input is clicked on
+   */
+  onClick: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    InputComponent: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    inputComponent: e.instanceOf(Object)
+  })
+};
+p.defaultProps = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  placeholder: void 0,
+  helperText: void 0,
+  error: void 0,
+  required: !1,
+  disabled: !1,
+  fullWidth: !0,
+  multiline: !1,
+  variant: "outlined",
+  size: "medium",
+  min: void 0,
+  max: void 0,
+  mask: void 0,
+  focused: void 0,
+  eager: !0,
+  overwrite: !0,
+  lazy: !0,
+  definitions: void 0,
+  onChange: () => null,
+  onBlur: () => null,
+  onFocus: () => null,
+  onClick: () => null,
+  components: J,
+  componentsProps: void 0
+};
+export {
+  p as default
+};

package/dist/es/inputs/MaskedTextInput/components/MaskedInputComponent.js

@@ -0,0 +1,13 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { IMaskInput as p } from "react-imask";
+const u = e((o, t) => {
+  const {
+    onChange: f,
+    ...r
+  } = o;
+  return /* @__PURE__ */ n(p, { inputRef: t, ...r });
+});
+export {
+  u as default
+};

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

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

package/dist/es/inputs/NumberInput/NumberInput.js

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

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

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

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

@@ -0,0 +1,287 @@
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import e from "prop-types";
+import U from "@mui/material/FormControl";
+import V from "@mui/material/FormHelperText";
+import k from "@mui/material/InputLabel";
+import w from "@mui/material/OutlinedInput";
+import E from "@mui/material/FilledInput";
+import P from "@mui/material/Input";
+import $ from "@mui/material/Radio";
+import { styled as n } from "@mui/material/styles";
+import A from "../_components/FormControlLabel.js";
+import D from "./components/RadioGroup.js";
+const J = n(w)(() => ({
+  paddingLeft: 14,
+  paddingRight: 14,
+  // Medium Size (56px)
+  "&:not(.MuiInputBase-sizeSmall)": {
+    paddingTop: 8,
+    paddingBottom: 6
+  },
+  // Small size (40px)
+  "&.MuiInputBase-sizeSmall": {
+    paddingTop: 2
+  }
+})), K = n(E)(() => ({
+  // Medium Size
+  "&:not(.MuiInputBase-sizeSmall)": {
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 24,
+    paddingBottom: 0
+  },
+  // Small size (56px, medium for others)
+  "&.MuiInputBase-sizeSmall": {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 24,
+    paddingBottom: 0,
+    "& .MuiFormControlLabel-root": {
+      "& .MuiRadio-root": {
+        maxHeight: 32,
+        maxWidth: 32
+      }
+    }
+  }
+})), Q = n(P)(() => ({
+  // Medium Size
+  "&:not(.MuiInputBase-sizeSmall)": {
+    paddingLeft: 11,
+    paddingRight: 11
+  },
+  // Small size (48px, medium for others)
+  "&.MuiInputBase-sizeSmall": {
+    paddingLeft: 8,
+    paddingRight: 8,
+    "& .MuiFormControlLabel-root": {
+      "& .MuiRadio-root": {
+        maxHeight: 32,
+        maxWidth: 32
+      }
+    }
+  }
+})), X = n(k)(() => ({
+  paddingRight: 8
+})), Y = {
+  Root: U,
+  FormHelperText: V,
+  InputLabel: X,
+  Input: Q,
+  // Standard Input
+  FilledInput: K,
+  OutlinedInput: J,
+  RadioGroup: D,
+  FormControlLabel: A,
+  Radio: $
+};
+function f({
+  name: o,
+  label: r,
+  value: b,
+  defaultValue: c,
+  options: g,
+  helperText: a,
+  error: d,
+  required: I,
+  disabled: O,
+  fullWidth: p,
+  orientation: h,
+  labelPlacement: C,
+  justifyContent: T,
+  variant: i,
+  size: u,
+  onChange: L,
+  onBlur: F,
+  onFocus: R,
+  components: y,
+  componentsProps: t
+}) {
+  const {
+    Root: M,
+    FormHelperText: x,
+    InputLabel: v,
+    Input: j,
+    FilledInput: B,
+    OutlinedInput: S,
+    RadioGroup: z,
+    FormControlLabel: G,
+    Radio: H
+  } = y, W = {
+    standard: j,
+    filled: B,
+    outlined: S
+  }[i], q = {
+    standard: {
+      disableUnderline: !0,
+      ...t.input
+    },
+    filled: {
+      disableUnderline: !0,
+      ...t.filledInput
+    },
+    outlined: {
+      label: r,
+      notched: !0,
+      ...t.outlinedInput
+    }
+  }[i], m = !!d, s = (d || "").trim();
+  return /* @__PURE__ */ N(M, { error: m, required: I, disabled: O, variant: i, fullWidth: p, ...t.root, children: [
+    /* @__PURE__ */ l(v, { htmlFor: o, id: `${o}-label`, shrink: !0, ...t.inputLabel, children: r }),
+    /* @__PURE__ */ l(W, { id: o, name: o, fullWidth: p, size: u, inputComponent: z, inputProps: {
+      id: o,
+      value: b,
+      defaultValue: c,
+      options: g,
+      orientation: h,
+      labelPlacement: C,
+      justifyContent: T,
+      size: u,
+      onChange: L,
+      onFocus: R,
+      onBlur: F,
+      FormControlLabelComponent: G,
+      formControlLabelProps: t.formControlLabel,
+      RadioComponent: H,
+      radioProps: t.radio,
+      vdtClassNames: t.radioGroup.className,
+      ...t.radioGroup
+    }, ...q }),
+    (s || a) && /* @__PURE__ */ l(x, { ...t.formHelperText, children: m ? s : a })
+  ] });
+}
+f.propTypes = {
+  /**
+   * Name of input
+   */
+  name: e.string,
+  /**
+   * Label of input
+   */
+  label: e.string,
+  /**
+   * Value of input
+   */
+  value: e.string,
+  /**
+   * Default value of input (use if uncontrolled)
+   */
+  defaultValue: e.string,
+  /**
+   * Options for input
+   */
+  options: e.arrayOf(e.shape({
+    name: e.string,
+    value: e.string,
+    label: e.string,
+    disabled: e.bool
+  })),
+  /**
+   * 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,
+  /**
+   * Set if input should be full width
+   */
+  fullWidth: e.bool,
+  /**
+   * Set direction inputs should be aligned
+   */
+  orientation: e.oneOf(["horizontal", "vertical"]),
+  /**
+   * Radio label placement
+   */
+  labelPlacement: e.oneOf(["end", "start", "bottom", "top"]),
+  /**
+   * Alignment of inputs
+   *
+   * Only used when `orientation:horizontal`
+   */
+  justifyContent: e.oneOf(["flex-start", "center", "space-around", "space-evenly", "space-between", "flex-end"]),
+  /**
+   * Set variant of input
+   */
+  variant: e.oneOf(["outlined", "filled", "standard"]),
+  /**
+   * Whether the slider is a range or not
+   */
+  size: e.oneOf(["medium", "small"]),
+  // 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,
+    Input: e.elementType,
+    FilledInput: e.elementType,
+    OutlinedInput: e.elementType,
+    RadioGroup: e.elementType,
+    FormControlLabel: e.elementType,
+    Radio: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    formHelperText: e.instanceOf(Object),
+    inputLabel: e.instanceOf(Object),
+    input: e.instanceOf(Object),
+    filledInput: e.instanceOf(Object),
+    outlinedInput: e.instanceOf(Object),
+    radioGroup: e.instanceOf(Object),
+    formControlLabel: e.instanceOf(Object),
+    radio: e.instanceOf(Object)
+  })
+};
+f.defaultProps = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  options: [],
+  helperText: void 0,
+  error: void 0,
+  required: !1,
+  disabled: !1,
+  fullWidth: !0,
+  orientation: "horizontal",
+  labelPlacement: "end",
+  justifyContent: "space-around",
+  variant: "outlined",
+  size: "medium",
+  onChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  components: Y,
+  componentsProps: void 0
+};
+export {
+  f as default
+};