@vidispine/vdt-mui 23.3.0-pre.2 → 23.3.0-pre.4

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

@@ -1,19 +1,18 @@
-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 { jsxs as I, jsx as o } from "react/jsx-runtime";
+import A from "@mui/icons-material/esm/Clear";
+import G from "@mui/material/FormControl";
+import J from "@mui/material/FormHelperText";
+import K from "@mui/material/InputLabel";
+import Q from "@mui/material/OutlinedInput";
+import X from "@mui/material/FilledInput";
+import Y from "@mui/material/Input";
+import Z from "@mui/material/ButtonBase";
+import { styled as e } 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, {
+import { isDefinedValue as _ } from "../../_utils/isDefinedValue.js";
+import N from "./components/Slider.js";
+const P = e(Q, {
   shouldForwardProp: (t) => t !== "showClearButton"
 })(({
   showClearButton: t
@@ -36,7 +35,7 @@ const te = i(X, {
       paddingRight: 16
     }
   }
-})), ne = i(Y)(() => ({
+})), tt = e(X)(() => ({
   paddingLeft: 24,
   paddingRight: 24,
   // Medium Size
@@ -49,7 +48,7 @@ const te = i(X, {
     paddingTop: 22,
     paddingBottom: 6
   }
-})), ie = i(Z)(() => ({
+})), it = e(Y)(() => ({
   paddingLeft: 16,
   paddingRight: 16,
   // Medium Size (48px, without markers)
@@ -61,263 +60,117 @@ const te = i(X, {
     paddingTop: 1,
     paddingBottom: 0
   }
-})), oe = i(ee)(() => ({
+})), et = e(N)(() => ({
   zIndex: 1
-})), le = i(P)(() => ({
+})), ot = e(J)(() => ({
   marginLeft: 14,
   marginRight: 14
-})), re = i(_)(() => ({
+})), nt = e(Z)(() => ({
   marginLeft: 4,
   marginBottom: 1,
   backgroundColor: "inherit",
   "& .MuiSvgIcon-root": {}
-})), ae = {
-  Root: K,
-  FormHelperText: le,
-  InputLabel: Q,
-  BaseButton: re,
-  Input: ie,
+})), lt = {
+  Root: G,
+  FormHelperText: ot,
+  InputLabel: K,
+  BaseButton: nt,
+  Input: it,
   // Standard Input
-  FilledInput: ne,
-  OutlinedInput: te,
-  Slider: oe
-};
-function I({
+  FilledInput: tt,
+  OutlinedInput: P,
+  Slider: et
+}, dt = ({
   name: t,
-  label: a,
-  value: d,
-  defaultValue: O,
-  options: T,
+  label: d,
+  value: r,
+  defaultValue: c,
+  options: B,
   helperText: u,
-  error: p,
-  required: B,
+  error: a,
+  required: M,
   disabled: h,
-  min: y,
-  max: M,
-  infiniteMin: S,
-  infiniteMax: v,
+  min: S,
+  max: v,
+  infiniteMin: b,
+  infiniteMax: F,
   infiniteDiff: x,
-  variant: l,
-  size: r,
-  step: F,
-  showMarks: C,
+  variant: n,
+  size: l,
+  step: C,
+  showMarks: T,
   valueLabelDisplay: L,
-  clearable: j,
-  range: s,
-  onChange: m,
+  clearable: y,
+  range: p,
+  onChange: s,
   onBlur: R,
   onFocus: z,
-  components: H,
-  componentsProps: n
-}) {
+  components: O,
+  componentsProps: i
+}) => {
   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 = {
+    Root: H,
+    FormHelperText: k,
+    InputLabel: w,
+    BaseButton: D,
+    Input: V,
+    FilledInput: j,
+    OutlinedInput: U,
+    Slider: $
+  } = O, m = _(r) && y, q = {
+    standard: V,
+    filled: j,
+    outlined: U
+  }[n], E = {
     standard: {
       disableUnderline: !0,
-      ...n.input
+      ...i.input
     },
     filled: {
       disableUnderline: !0,
-      ...n.filledInput
+      ...i.filledInput
     },
     outlined: {
-      label: a,
+      label: d,
       notched: !0,
-      showClearButton: f,
-      ...n.outlinedInput
+      showClearButton: m,
+      ...i.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
+  }[n], f = !!a, g = (a || "").trim();
+  return /* @__PURE__ */ I(H, { error: f, required: M, disabled: h, variant: n, size: l, fullWidth: !0, ...i.root, children: [
+    /* @__PURE__ */ o(w, { htmlFor: t, id: `${t}-label`, shrink: !0, ...i.inputLabel, children: /* @__PURE__ */ I("span", { children: [
+      d,
+      m && /* @__PURE__ */ o(D, { focusRipple: !0, onClick: (W) => {
+        s(W, {
+          value: p ? [] : null
         });
-      }, children: /* @__PURE__ */ o(J, { fontSize: "small" }) })
+      }, children: /* @__PURE__ */ o(A, { 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,
+    /* @__PURE__ */ o(q, { id: t, name: t, size: l, inputComponent: $, inputProps: {
+      value: r,
+      defaultValue: c,
+      options: B,
+      range: p,
+      min: S,
+      max: v,
+      size: l,
+      infiniteMin: b,
+      infiniteMax: F,
       infiniteDiff: x,
       valueLabelDisplay: L,
-      showMarks: C,
-      step: F,
-      onChange: m,
+      showMarks: T,
+      step: C,
+      onChange: s,
       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 })
+      vdtClassNames: i.slider.className,
+      ...i.slider
+    }, ...E }),
+    (g || u) && /* @__PURE__ */ o(k, { ...i.formHelperText, children: f ? g : 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 = {
+dt.defaultProps = {
   name: void 0,
   label: void 0,
   helperText: void 0,
@@ -342,9 +195,9 @@ I.defaultProps = {
   onChange: () => null,
   onBlur: void 0,
   onFocus: void 0,
-  components: ae,
+  components: lt,
   componentsProps: void 0
 };
 export {
-  I as default
+  dt as default
 };

package/dist/es/inputs/SliderInput/components/Slider.d.ts

@@ -0,0 +1,30 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { SliderProps as MuiSliderProps } from '@mui/material';
+export interface SliderProps extends Omit<MuiSliderProps, 'onChange'> {
+    disabled?: boolean;
+    options?: {
+        value: number;
+        name?: string;
+        label?: string;
+        disabled?: boolean;
+        [key: string]: any;
+    }[];
+    range?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    infiniteMin?: boolean;
+    infiniteMax?: boolean;
+    infiniteDiff?: number;
+    showMarks?: boolean;
+    onChange?: (event: Event, value: {
+        value: number | number[];
+    }) => void;
+    vdtClassNames?: string;
+    autoComplete?: boolean;
+    rows?: boolean;
+    type?: string;
+}
+declare const Slider: ForwardRefExoticComponent<Pick<SliderProps, keyof SliderProps> & RefAttributes<HTMLSpanElement>>;
+export default Slider;

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

@@ -1,18 +1,18 @@
 import { jsx as G } from "react/jsx-runtime";
-import { forwardRef as j, useRef as q, useMemo as f } from "react";
+import { forwardRef as j, useRef as q, useMemo as g } 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"
+const J = "Min", C = Number.MIN_SAFE_INTEGER, K = "Max", y = Number.MAX_SAFE_INTEGER, Q = 1, Y = H(D, {
+  shouldForwardProp: (M) => M !== "hasDefinedValue"
 })(({
-  valueLabelDisplay: i,
+  valueLabelDisplay: M,
   hasDefinedValue: d
 }) => ({
   "& .MuiSlider-thumb": {
     // Fix tooltip shown with opacity
-    ...i !== "off" ? {
+    ...M !== "off" ? {
       zIndex: 1
     } : {},
     // Want it focusable so not using "visibility: hidden" or "display: none"
@@ -37,88 +37,90 @@ const J = "Min", C = Number.MIN_SAFE_INTEGER, K = "Max", R = Number.MAX_SAFE_INT
       fontSize: "0.675rem"
     }
   }
-})), ce = j(({
-  id: i,
+})), Z = j(({
+  id: M,
   value: d,
-  defaultValue: A,
+  defaultValue: b,
   options: N,
-  range: E,
-  min: m,
-  max: M,
+  range: I,
+  min: i,
+  max: m,
   step: F,
-  infiniteMin: V,
-  infiniteMax: b,
-  infiniteDiff: g,
-  showMarks: y,
+  infiniteMin: S,
+  infiniteMax: A,
+  infiniteDiff: E,
+  showMarks: R,
   onChange: _,
   ...B
-}, z) => {
+}, P) => {
   const {
-    vdtClassNames: P,
-    // Ignore
-    className: Z,
-    autoComplete: $,
-    rows: W,
-    type: O,
+    vdtClassNames: z,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    className: $,
+    // ignore as it adds styles we don't want
+    autoComplete: W,
+    rows: O,
+    type: p,
     ...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) => ({
+  } = B, x = n(b) ? b : I && [void 0, void 0] || void 0, o = d !== void 0, f = o && n(d) ? d : I && [void 0, void 0] || null, h = q(x), l = g(() => 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)
+  })), [N]), V = n(F) ? Math.max(0, F) : !(l != null && l.length) && Q || null, s = g(() => {
+    if (!S && !A)
       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);
+    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, r = n(E) ? E : Math.max(1, V);
     let c = l;
-    return !n(m) && V && (c = [{
+    return !n(i) && S && (c = [{
       label: J,
-      value: t - u
-    }, ...c]), !n(M) && b && (c = [...c, {
+      value: t - r
+    }, ...c]), !n(m) && A && (c = [...c, {
       label: K,
-      value: a + u
+      value: a + r
     }]), c;
-  }, [g, b, V, S, l, M, m]), r = f(() => s || l, [l, s]), {
+  }, [E, A, S, V, l, m, i]), u = g(() => s || l, [l, s]), {
     localMin: X,
     localMax: k
-  } = f(() => {
-    const e = (r == null ? void 0 : r.map((t) => t.value)) || [];
+  } = g(() => {
+    const e = (u == null ? void 0 : u.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
+      localMin: n(i) ? i : e.length && Math.min(...e) || 0,
+      localMax: n(m) ? m : e.length && Math.max(...e) || 0
     };
-  }, [r, M, m]), L = (e) => {
+  }, [u, m, i]), 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;
+    return !((a = l == null ? void 0 : l.map((r) => r.value)) == null ? void 0 : a.includes(e)) && Math.min(...(s == null ? void 0 : s.map((r) => r.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 !((a = l == null ? void 0 : l.map((r) => r.value)) == null ? void 0 : a.includes(e)) && Math.max(...(s == null ? void 0 : s.map((r) => r.value)) || []) === e;
   };
-  return /* @__PURE__ */ G(Y, { id: i, ref: z, className: P, ...o ? {
-    value: I
+  return /* @__PURE__ */ G(Y, { id: M, ref: P, className: z, ...o ? {
+    value: f
   } : {
     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;
+  }, onChange: I ? (e, t) => {
+    const [a, r] = Array.isArray(t) ? t : [t], c = L(a) ? C : a, v = T(r) ? y : r, w = o ? f : 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, {
+    !n(i) && L(t) ? a = C : !n(m) && T(t) ? a = y : a = Array.isArray(t) ? t[0] : t, (o ? f : h.current) !== a && (h.current = a, _(e, {
       value: a
     }));
-  }, min: X, max: k, marks: y ? r : r == null ? void 0 : r.map((e) => ({
+  }, min: X, max: k, marks: R ? u : u == null ? void 0 : u.map((e) => ({
     value: e.value
-  })), step: S, valueLabelFormat: (e) => {
+  })), step: V, 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;
+    return ((t = u == null ? void 0 : u.find((a) => ((a == null ? void 0 : a.value) || a) === e)) == null ? void 0 : t.label) || e.toString();
   }, 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);
+    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.toString());
   }, 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 });
+    return ((a = l == null ? void 0 : l[t]) == null ? void 0 : a.label) || e.toString();
+  }, hasDefinedValue: n(o ? f : h.current), ...U });
 });
+Z.defaultProps = {};
 export {
-  ce as default
+  Z as default
 };

package/dist/es/inputs/SliderInput/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './SliderInput';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

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

@@ -4,7 +4,7 @@ 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