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

package/dist/es/general/CompactLabel/CompactLabel.js

@@ -0,0 +1,70 @@
+import { jsx as c } from "react/jsx-runtime";
+import n from "prop-types";
+import i from "@mui/material/Typography";
+import { styled as s } from "@mui/material/styles";
+const d = s(i, {
+  shouldForwardProp: (r) => r !== "dark"
+})(({
+  dark: r,
+  theme: o
+}) => ({
+  maxWidth: "100%",
+  lineHeight: "unset",
+  borderRadius: "0.3em",
+  userSelect: "none",
+  pointerEvents: "none",
+  margin: o.spacing(0.5),
+  paddingLeft: o.spacing(0.5),
+  paddingRight: o.spacing(0.5),
+  color: o.palette.common.black,
+  backgroundColor: o.palette.common.white,
+  ...r && {
+    color: o.palette.common.white,
+    backgroundColor: o.palette.common.black
+  }
+})), l = {
+  Root: d
+};
+function t({
+  dark: r,
+  children: o,
+  components: e,
+  componentsProps: p
+}) {
+  const {
+    Root: a
+  } = e;
+  return /* @__PURE__ */ c(a, { dark: r, variant: "caption", "aria-hidden": "true", noWrap: !0, ...p.root, children: o });
+}
+t.propTypes = {
+  /**
+   * Set dark mode for label
+   */
+  dark: n.bool,
+  /**
+   * Children for component
+   */
+  children: n.oneOfType([n.arrayOf(n.node), n.node]),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: n.shape({
+    Root: n.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: n.shape({
+    root: n.instanceOf(Object)
+  })
+};
+t.defaultProps = {
+  dark: !0,
+  children: null,
+  components: l,
+  componentsProps: void 0
+};
+export {
+  t as default
+};

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

package/dist/es/general/CornerLabelPlacer/CornerLabelPlacer.js

@@ -0,0 +1,105 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import t from "prop-types";
+import g from "@mui/material/Box";
+import { styled as e } from "@mui/material/styles";
+import p from "../CompactLabel/index.js";
+const T = e(g)(() => ({
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  zIndex: 3
+})), C = e(p)(() => ({
+  position: "absolute",
+  top: 0,
+  left: 0
+})), B = e(p)(() => ({
+  position: "absolute",
+  top: 0,
+  right: 0
+})), R = e(p)(() => ({
+  position: "absolute",
+  bottom: 0,
+  left: 0
+})), y = e(p)(() => ({
+  position: "absolute",
+  bottom: 0,
+  right: 0
+})), u = {
+  Root: T,
+  CompactLabelTopLeft: C,
+  CompactLabelTopRight: B,
+  CompactLabelBottomLeft: R,
+  CompactLabelBottomRight: y
+};
+function n({
+  labelTopLeft: l,
+  labelTopRight: m,
+  labelBottomLeft: c,
+  labelBottomRight: i,
+  components: b,
+  componentsProps: o
+}) {
+  const {
+    Root: L,
+    CompactLabelTopLeft: s,
+    CompactLabelTopRight: r,
+    CompactLabelBottomLeft: f,
+    CompactLabelBottomRight: d
+  } = b;
+  return /* @__PURE__ */ h(L, { ...o.root, children: [
+    l && /* @__PURE__ */ a(s, { ...o.compactLabelTopLeft, children: l }),
+    m && /* @__PURE__ */ a(r, { ...o.compactLabelTopRight, children: m }),
+    c && /* @__PURE__ */ a(f, { ...o.compactLabelBottomLeft, children: c }),
+    i && /* @__PURE__ */ a(d, { ...o.compactLabelBottomRight, children: i })
+  ] });
+}
+n.propTypes = {
+  /**
+   * The label for the top left corner. Leave blank to disable.
+   */
+  labelTopLeft: t.string,
+  /**
+   * The label for the top right corner. Leave blank to disable.
+   */
+  labelTopRight: t.string,
+  /**
+   * The label for the bottom left corner. Leave blank to disable.
+   */
+  labelBottomLeft: t.string,
+  /**
+   * The label for the bottom right corner. Leave blank to disable.
+   */
+  labelBottomRight: t.string,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: t.shape({
+    Root: t.elementType,
+    CompactLabelTopLeft: t.elementType,
+    CompactLabelTopRight: t.elementType,
+    CompactLabelBottomLeft: t.elementType,
+    CompactLabelBottomRight: t.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: t.shape({
+    root: t.instanceOf(Object),
+    compactLabelTopLeft: t.instanceOf(Object),
+    compactLabelTopRight: t.instanceOf(Object),
+    compactLabelBottomLeft: t.instanceOf(Object),
+    compactLabelBottomRight: t.instanceOf(Object)
+  })
+};
+n.defaultProps = {
+  labelTopLeft: void 0,
+  labelTopRight: void 0,
+  labelBottomLeft: void 0,
+  labelBottomRight: void 0,
+  components: u,
+  componentsProps: void 0
+};
+export {
+  n as default
+};

package/dist/es/general/CornerLabelPlacer/index.js

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

package/dist/es/general/ExpandButton/ExpandButton.js

@@ -0,0 +1,81 @@
+import { jsx as r } from "react/jsx-runtime";
+import o from "prop-types";
+import l from "@mui/icons-material/esm/ExpandMore";
+import m from "@mui/material/Box";
+import f from "@mui/material/IconButton";
+import { styled as i } from "@mui/material/styles";
+const x = i(m)(() => ({
+  height: "100%",
+  display: "flex",
+  alignItems: "flex-end"
+})), B = i(f, {
+  shouldForwardProp: (t) => t !== "expanded"
+})(({
+  theme: t,
+  expanded: n
+}) => ({
+  marginLeft: "auto",
+  transition: t.transitions.create("transform", {
+    duration: t.transitions.duration.shortest
+  }),
+  ...n ? {
+    transform: "rotate(180deg)"
+  } : {}
+})), I = i(l)(() => ({
+  transition: "color .2s ease-out"
+})), y = {
+  Root: x,
+  IconButton: B,
+  Icon: I
+};
+function c({
+  expanded: t,
+  onClick: n,
+  components: s,
+  componentsProps: e
+}) {
+  const {
+    Root: a,
+    IconButton: p,
+    Icon: d
+  } = s;
+  return /* @__PURE__ */ r(a, { component: "span", ...e.root, children: /* @__PURE__ */ r(p, { expanded: t, onClick: (u) => n(u, {
+    value: !t
+  }), ...e.iconButton, children: /* @__PURE__ */ r(d, { ...e.icon }) }) });
+}
+c.propTypes = {
+  /**
+   * Set if expand button is expanded or not
+   */
+  expanded: o.bool,
+  /**
+   * Callback for clicking expand button
+   */
+  onClick: o.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    IconButton: o.elementType,
+    Icon: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    iconButton: o.instanceOf(Object),
+    icon: o.instanceOf(Object)
+  })
+};
+c.defaultProps = {
+  expanded: !1,
+  onClick: void 0,
+  components: y,
+  componentsProps: void 0
+};
+export {
+  c as default
+};

package/dist/es/general/ExpandButton/index.js

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

package/dist/es/general/Form/Form.js

@@ -0,0 +1,230 @@
+import { jsxs as R, jsx as l } from "react/jsx-runtime";
+import { useRef as tt, useEffect as et } from "react";
+import t from "prop-types";
+import { useForm as nt, Controller as ot } from "react-hook-form";
+import V from "@mui/material/Box";
+import B from "@mui/material/Button";
+import rt from "@mui/material/ButtonGroup";
+import { styled as S } from "@mui/material/styles";
+const ut = S(rt)(({
+  theme: o
+}) => ({
+  marginTop: o.spacing(2),
+  marginBottom: o.spacing(2),
+  display: "flex",
+  justifyContent: "center"
+})), it = S(V)(({
+  theme: o
+}) => ({
+  "&:not(:first-of-type)": {
+    paddingTop: o.spacing(2)
+  }
+})), at = {
+  Root: V,
+  InputContainer: it,
+  Controller: ot,
+  ButtonGroup: ut,
+  ClearButton: B,
+  ResetButton: B,
+  SubmitButton: B
+};
+function v({
+  inputs: o,
+  inputProps: G,
+  formProps: k,
+  size: y,
+  variant: E,
+  clearText: M,
+  resetText: I,
+  submitText: q,
+  onClear: s,
+  onReset: f,
+  onChange: d,
+  onSubmit: p,
+  onError: O,
+  components: D,
+  componentsProps: r
+}) {
+  const {
+    Root: F,
+    InputContainer: P,
+    Controller: w,
+    ButtonGroup: z,
+    ClearButton: W,
+    ResetButton: _,
+    SubmitButton: $
+  } = D, C = tt(), h = ({
+    multiple: e,
+    range: n
+  }) => e || n ? [] : null, A = o.reduce((e, {
+    name: n,
+    defaultValue: i,
+    ...a
+  }) => ({
+    ...e,
+    [n]: i || h(a)
+  }), {}), {
+    handleSubmit: H,
+    control: J,
+    reset: T,
+    watch: g,
+    formState: c
+  } = nt({
+    defaultValues: A,
+    ...k || {}
+  }), {
+    defaultValues: j
+  } = c, K = Object.keys((c == null ? void 0 : c.errors) || {}).length > 0, L = async (e) => {
+    const n = o.reduce((i, {
+      name: a,
+      defaultValue: U,
+      ...m
+    }) => ({
+      ...i,
+      [a]: h(m)
+    }), {});
+    s && s(e, n), T(n, {
+      keepDefaultValues: !0
+    });
+  }, N = async (e) => {
+    f && f(e, j), T(j, {
+      keepDefaultValues: !0
+    });
+  };
+  et(() => {
+    const e = d ? g((n) => d(C.current, n)) : void 0;
+    return () => e == null ? void 0 : e.unsubscribe();
+  }, [d, g]);
+  const Q = (e) => {
+    var n;
+    return typeof (e == null ? void 0 : e.required) == "string" || ((n = e == null ? void 0 : e.required) == null ? void 0 : n.value) === !0;
+  };
+  return /* @__PURE__ */ R(F, { component: "form", onSubmit: H((e, n) => typeof p == "function" && p(n, e), (e, n) => typeof O == "function" && O(n, e)), ...r.root, children: [
+    o == null ? void 0 : o.map(({
+      Component: e,
+      name: n,
+      rules: i,
+      label: a,
+      defaultValue: U,
+      ...m
+    }) => /* @__PURE__ */ l(P, { ...r.inputContainer, children: /* @__PURE__ */ l(w, { control: J, name: n, rules: i, render: ({
+      field: {
+        onChange: X,
+        ...Y
+      },
+      formState: {
+        errors: b
+      }
+    }) => {
+      var x;
+      return /* @__PURE__ */ l(e, { onChange: (Z, u) => {
+        C.current = Z, X((u == null ? void 0 : u.value) !== void 0 ? u == null ? void 0 : u.value : u);
+      }, error: (x = b == null ? void 0 : b[n]) == null ? void 0 : x.message, size: y, variant: E, label: Q(i) ? `${a} *` : a, ...Y, ...G || {}, ...m });
+    }, ...r.controller }) }, n)),
+    /* @__PURE__ */ R(z, { variant: "text", size: y, fullWidth: !0, ...r.buttonGroup, children: [
+      s && /* @__PURE__ */ l(W, { onClick: L, ...r.clearButton, children: M }),
+      f && /* @__PURE__ */ l(_, { onClick: N, ...r.resetButton, children: I }),
+      p && /* @__PURE__ */ l($, { type: "submit", disabled: K, ...r.submitButton, children: q })
+    ] })
+  ] });
+}
+v.propTypes = {
+  /**
+   * A VidiCore field list to add as filter inputs
+   */
+  inputs: t.arrayOf(t.instanceOf(Object)),
+  /**
+   * Add general input props (applied to all components)
+   */
+  inputProps: t.instanceOf(Object),
+  /**
+   * Add props to react-hook-form useForm hook
+   */
+  formProps: t.instanceOf(Object),
+  /**
+   * Set variant of filter inputs
+   */
+  variant: t.oneOf(["standard", "outlined", "filled"]),
+  /**
+   * Set size of filter inputs
+   */
+  size: t.oneOf(["medium", "small"]),
+  /**
+   * Set clear button text
+   */
+  clearText: t.string,
+  /**
+   * Set reset button text
+   */
+  resetText: t.string,
+  /**
+   * Set submit button text
+   */
+  submitText: t.string,
+  // Callbacks
+  /**
+   * Callback when all filters are cleared from values
+   */
+  onClear: t.func,
+  /**
+   * Callback when filters are reset to default values
+   */
+  onReset: t.func,
+  /**
+   * Callback when some field has changed value
+   */
+  onChange: t.func,
+  /**
+   * Callback when form is submitted
+   */
+  onSubmit: t.func,
+  /**
+   * Callback when form has error (invalid values)
+   */
+  onError: t.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: t.shape({
+    Root: t.elementType,
+    InputContainer: t.elementType,
+    Controller: t.elementType,
+    ButtonGroup: t.elementType,
+    ClearButton: t.elementType,
+    ResetButton: t.elementType,
+    SubmitButton: t.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: t.shape({
+    root: t.instanceOf(Object),
+    inputContainer: t.instanceOf(Object),
+    controller: t.instanceOf(Object),
+    buttonGroup: t.instanceOf(Object),
+    clearButton: t.instanceOf(Object),
+    resetButton: t.instanceOf(Object),
+    submitButton: t.instanceOf(Object)
+  })
+};
+v.defaultProps = {
+  inputs: [],
+  inputProps: void 0,
+  formProps: void 0,
+  variant: "standard",
+  size: "medium",
+  clearText: "Clear",
+  resetText: "Reset",
+  submitText: "Submit",
+  onClear: void 0,
+  onReset: void 0,
+  onChange: void 0,
+  onSubmit: void 0,
+  onError: void 0,
+  components: at,
+  componentsProps: void 0
+};
+export {
+  v as default
+};

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

package/dist/es/general/ImageCollage/ImageCollage.js

@@ -0,0 +1,151 @@
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import o from "prop-types";
+import i from "@mui/material/Box";
+import { styled as d } from "@mui/material/styles";
+import I from "../BlurredBackground/index.js";
+const j = ({
+  amountOfImages: n,
+  maxColumns: r
+}) => {
+  const e = Math.min(r, n), s = Math.ceil(n / e), c = n % e || e;
+  return {
+    amountOfImages: n,
+    amountOfColumns: e,
+    amountOfRows: s,
+    amountOfImagesOnLastRow: c
+  };
+}, T = (n, r, {
+  amountOfImages: e,
+  amountOfColumns: s,
+  amountOfRows: c,
+  amountOfImagesOnLastRow: u
+}) => {
+  const h = Math.ceil((n + 1) / s) === c;
+  return `${100 / Math.max(Math.min(h && r ? u : s, e), 1)}%`;
+}, m = d(i)(() => ({
+  width: "inherit",
+  height: "100%",
+  display: "flex",
+  flexWrap: "wrap"
+})), v = d(i)(() => ({
+  pointerEvents: "none",
+  position: "relative"
+})), E = d(i, {
+  shouldForwardProp: (n) => !["amountOfImages", "showSingleStretched"].includes(n)
+})(({
+  amountOfImages: n,
+  showSingleStretched: r
+}) => ({
+  width: "100%",
+  height: "100%",
+  position: "relative",
+  zIndex: 2,
+  objectFit: n === 1 && r ? "contain" : "cover"
+})), L = d(I)(() => ({
+  top: 0,
+  position: "absolute",
+  zIndex: 1
+})), $ = {
+  Root: m,
+  ContainerBox: v,
+  ImageBox: E,
+  BlurredBackground: L
+};
+function f({
+  images: n,
+  maxImages: r,
+  maxColumns: e,
+  showSingleStretched: s,
+  showLastRowStretched: c,
+  showBlurredBackground: u,
+  onError: h,
+  components: B,
+  componentsProps: p
+}) {
+  const {
+    Root: w,
+    ContainerBox: y,
+    ImageBox: b,
+    BlurredBackground: S
+  } = B;
+  if (!(n != null && n.length) || r < 0 || e < 0)
+    return null;
+  const x = Math.min(r, n.length), l = j({
+    amountOfImages: x,
+    maxColumns: e
+  }), O = `${100 / ((l == null ? void 0 : l.amountOfRows) || 1)}%`;
+  return /* @__PURE__ */ a(w, { ...p.root, children: n.slice(0, r).map((t, M) => {
+    const R = T(M, c, l);
+    return /* @__PURE__ */ C(y, { width: R, height: O, ...p.containerBox, children: [
+      u && /* @__PURE__ */ a(S, { image: t == null ? void 0 : t.src, blur: 30, grayscale: 0, ...p.blurredBackground }),
+      /* @__PURE__ */ a(b, { component: "img", src: t == null ? void 0 : t.src, alt: (t == null ? void 0 : t.alt) || (t == null ? void 0 : t.src), amountOfImages: x, showSingleStretched: s, onError: (k) => h(k, t) })
+    ] }, `${t == null ? void 0 : t.src}-${t == null ? void 0 : t.alt}`);
+  }) });
+}
+f.propTypes = {
+  /**
+   * Image urls to show
+   */
+  images: o.arrayOf(o.shape({
+    url: o.string,
+    alt: o.string
+  })),
+  /**
+   * Max amount of columns to display
+   */
+  maxColumns: o.number,
+  /**
+   * Max amount of images to display
+   */
+  maxImages: o.number,
+  /**
+   * Whether to stretch full width or follow height for single image
+   */
+  showSingleStretched: o.bool,
+  /**
+   * Whether to stretch full width or follow height for last images
+   */
+  showLastRowStretched: o.bool,
+  /**
+   * Show blurred backgrounds behind the images
+   */
+  showBlurredBackground: o.bool,
+  // Callbacks
+  /**
+   * Callback for error
+   */
+  onError: o.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    ContainerBox: o.elementType,
+    ImageBox: o.elementType,
+    BlurredBackground: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    containerBox: o.instanceOf(Object),
+    imageBox: o.instanceOf(Object),
+    blurredBackground: o.instanceOf(Object)
+  })
+};
+f.defaultProps = {
+  images: [],
+  maxColumns: 2,
+  maxImages: 4,
+  showSingleStretched: !0,
+  showLastRowStretched: !0,
+  showBlurredBackground: !1,
+  onError: () => null,
+  components: $,
+  componentsProps: void 0
+};
+export {
+  f as default
+};

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