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

package/dist/es/general/MediaIcon/MediaIcon.js

@@ -0,0 +1,101 @@
+import { jsxs as T, jsx as n } from "react/jsx-runtime";
+import e from "prop-types";
+import M from "@mui/icons-material/esm/Audiotrack";
+import j from "@mui/icons-material/esm/Image";
+import b from "@mui/icons-material/esm/InsertDriveFile";
+import g from "@mui/icons-material/esm/Movie";
+import h from "@mui/icons-material/esm/NoteAdd";
+import D from "@mui/icons-material/esm/Article";
+import v from "@mui/icons-material/esm/DataThresholding";
+import A from "@mui/icons-material/esm/PictureAsPdf";
+import x from "@mui/icons-material/esm/QuestionMark";
+import P from "@mui/material/Box";
+import { styled as F } from "@mui/material/styles";
+const N = F(P)(() => ({
+  display: "flex"
+})), R = {
+  Root: N,
+  PlaceholderIcon: h,
+  AudioIcon: M,
+  ImageIcon: j,
+  VideoIcon: g,
+  DocumentIcon: D,
+  DataIcon: v,
+  PdfIcon: A,
+  NoneIcon: x,
+  FileIcon: b
+}, t = ["video", "audio", "image", "document", "data", "pdf", "none"];
+function i({
+  type: I,
+  components: a,
+  componentsProps: o
+}) {
+  const {
+    Root: d,
+    PlaceholderIcon: m,
+    AudioIcon: r,
+    ImageIcon: f,
+    VideoIcon: l,
+    DocumentIcon: p,
+    DataIcon: u,
+    PdfIcon: s,
+    NoneIcon: O,
+    FileIcon: y
+  } = a, c = (I || "").toLowerCase();
+  return /* @__PURE__ */ T(d, { component: "span", ...o.root, children: [
+    c === "video" && /* @__PURE__ */ n(l, { ...o.videoIcon }),
+    c === "audio" && /* @__PURE__ */ n(r, { ...o.audioIcon }),
+    c === "image" && /* @__PURE__ */ n(f, { ...o.imageIcon }),
+    c === "document" && /* @__PURE__ */ n(p, { ...o.documentIcon }),
+    c === "data" && /* @__PURE__ */ n(u, { ...o.dataIcon }),
+    c === "pdf" && /* @__PURE__ */ n(s, { ...o.pdfIcon }),
+    c === "none" && /* @__PURE__ */ n(O, { ...o.noneIcon }),
+    !t.includes(c) && (typeof mediaType == "string" ? /* @__PURE__ */ n(y, { ...o.fileIcon }) : /* @__PURE__ */ n(m, { ...o.placeholderIcon }))
+  ] });
+}
+i.propTypes = {
+  /**
+   * - `FileIcon` is shown if not any of listed strings
+   * - `PlaceholderIcon` is show if not a string type
+   */
+  type: e.oneOf(t),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    PlaceholderIcon: e.elementType,
+    AudioIcon: e.elementType,
+    ImageIcon: e.elementType,
+    VideoIcon: e.elementType,
+    DocumentIcon: e.elementType,
+    DataIcon: e.elementType,
+    PdfIcon: e.elementType,
+    NoneIcon: e.elementType,
+    FileIcon: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    placeholderIcon: e.instanceOf(Object),
+    audioIcon: e.instanceOf(Object),
+    imageIcon: e.instanceOf(Object),
+    videoIcon: e.instanceOf(Object),
+    documentIcon: e.instanceOf(Object),
+    dataIcon: e.instanceOf(Object),
+    pdfIcon: e.instanceOf(Object),
+    noneIcon: e.instanceOf(Object),
+    fileIcon: e.instanceOf(Object)
+  })
+};
+i.defaultProps = {
+  type: void 0,
+  components: R,
+  componentsProps: void 0
+};
+export {
+  i as default
+};

package/dist/es/general/MediaIcon/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 "./MediaIcon.js";
+const o = "MediaIcon", 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/general/MenuItem/MenuItem.js

@@ -0,0 +1,91 @@
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
+import e from "prop-types";
+import h from "@mui/material/MenuItem";
+import g from "@mui/material/ListItemText";
+import u from "@mui/material/Typography";
+import { styled as x } from "@mui/material/styles";
+const I = x(u)(({
+  theme: t
+}) => ({
+  height: 24,
+  lineHeight: 1.7,
+  marginLeft: t.spacing(2)
+})), b = {
+  Root: h,
+  ListItemText: g,
+  Typography: I
+};
+function r({
+  value: t,
+  label: p,
+  count: n,
+  selected: s,
+  onClick: m,
+  components: l,
+  componentsProps: o,
+  ...c
+}) {
+  const {
+    Root: a,
+    ListItemText: y,
+    Typography: d
+  } = l;
+  return /* @__PURE__ */ T(a, { value: t, selected: s, onClick: (f) => m(f, {
+    value: t
+  }), ...c, ...o.root, children: [
+    /* @__PURE__ */ i(y, { ...o.listItemText, children: p || t }),
+    n !== void 0 && /* @__PURE__ */ i(d, { variant: "body2", color: "text.secondary", ...o.typography, children: n })
+  ] });
+}
+r.propTypes = {
+  /**
+   * Value for menu item
+   */
+  value: e.string,
+  /**
+   * Label for menu item
+   */
+  label: e.string,
+  /**
+   * Add a count to display for the menu item
+   */
+  count: e.number,
+  /**
+   * Set if menu item is selected
+   */
+  selected: e.bool,
+  // Callbacks
+  /**
+   * Callback when clicked
+   */
+  onClick: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    ListItemText: e.elementType,
+    Typography: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    listItemText: e.instanceOf(Object),
+    typography: e.instanceOf(Object)
+  })
+};
+r.defaultProps = {
+  value: void 0,
+  label: void 0,
+  count: void 0,
+  selected: !1,
+  onClick: void 0,
+  components: b,
+  componentsProps: void 0
+};
+export {
+  r as default
+};

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

package/dist/es/general/ScrubLine/ScrubLine.js

@@ -0,0 +1,141 @@
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import { useRef as E } from "react";
+import o from "prop-types";
+import f from "@mui/material/Box";
+import { styled as p } from "@mui/material/styles";
+import R from "../CompactLabel/index.js";
+const P = p(f)(() => ({
+  position: "relative",
+  width: "100%",
+  height: "100%"
+})), S = p(f, {
+  shouldForwardProp: (t) => !["position", "show"].includes(t)
+})(({
+  position: t,
+  show: i
+}) => ({
+  position: "absolute",
+  top: 0,
+  backgroundColor: "#FFF",
+  width: "2px",
+  height: "100%",
+  zIndex: 6,
+  opacity: 0.9,
+  left: t,
+  display: i ? "block" : "none"
+})), F = p(f)(() => ({
+  height: "inherit",
+  zIndex: 3
+})), z = {
+  Root: P,
+  CompactLabel: R,
+  LineBox: S,
+  ContentBox: F
+};
+function h({
+  position: t,
+  offset: i,
+  show: x,
+  label: d,
+  children: M,
+  onMouseMove: y,
+  onMouseEnter: B,
+  onMouseLeave: b,
+  components: L,
+  componentsProps: r
+}) {
+  var m;
+  const {
+    Root: v,
+    LineBox: C,
+    CompactLabel: O,
+    ContentBox: g
+  } = L, a = E(), s = (m = a.current) == null ? void 0 : m.offsetWidth, T = (e) => {
+    try {
+      return Math.round(e.getBoundingClientRect().left);
+    } catch {
+      return 0;
+    }
+  }, j = (e) => {
+    const n = T(e.currentTarget), u = e.clientX - n - i;
+    return u < 0 ? 0 : u > s ? s : u;
+  }, c = (e, n) => {
+    n && n(e, {
+      position: j(e),
+      contentWidth: s
+    });
+  };
+  return /* @__PURE__ */ w(v, { onMouseMove: (e) => c(e, y), onMouseEnter: (e) => c(e, B), onMouseLeave: (e) => c(e, b), ...r.root, children: [
+    /* @__PURE__ */ l(C, { position: t, show: x, ...r.lineBox, children: d && /* @__PURE__ */ l(O, { children: d }) }),
+    /* @__PURE__ */ l(g, { ref: a, ...r.contentBox, children: M })
+  ] });
+}
+h.propTypes = {
+  /**
+   * Set the position of the scrub line
+   */
+  position: o.number,
+  /**
+   * Custom offset the scrub line from the mouse pointer
+   */
+  offset: o.number,
+  /**
+   * Callback for clicking expand button
+   */
+  show: o.bool,
+  /**
+   * Add a label next to the scrub line
+   */
+  label: o.string,
+  /**
+   * Children for component
+   */
+  children: o.oneOfType([o.arrayOf(o.node), o.node]),
+  // Callbacks
+  /**
+   * Callback for when mouse moving over children/content
+   */
+  onMouseMove: o.func,
+  /**
+   * Callback for mouse leaving children/content
+   */
+  onMouseLeave: o.func,
+  /**
+   * Callback for mouse leaving children/content
+   */
+  onMouseEnter: o.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    LineBox: o.elementType,
+    CompactLabel: o.elementType,
+    ContentBox: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    lineBox: o.instanceOf(Object),
+    compactLabel: o.instanceOf(Object),
+    contentBox: o.instanceOf(Object)
+  })
+};
+h.defaultProps = {
+  position: 0,
+  offset: 0,
+  show: !0,
+  label: void 0,
+  onMouseMove: void 0,
+  onMouseLeave: void 0,
+  onMouseEnter: void 0,
+  children: null,
+  components: z,
+  componentsProps: void 0
+};
+export {
+  h as default
+};

package/dist/es/general/ScrubLine/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 "./ScrubLine.js";
+const o = "ScrubLine", 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/general/Sort/Sort.js

@@ -0,0 +1,179 @@
+import { jsxs as A, jsx as m } from "react/jsx-runtime";
+import { useState as M } from "react";
+import e from "prop-types";
+import E from "@mui/material/Box";
+import P from "@mui/material/Menu";
+import { styled as u, alpha as W } from "@mui/material/styles";
+import D from "./components/ButtonBase.js";
+import F from "./components/MenuItem.js";
+const V = u(E)(({
+  theme: n
+}) => {
+  var t;
+  return {
+    color: (t = n.palette) == null ? void 0 : t.secondary.main,
+    paddingLeft: 9,
+    paddingRight: 9,
+    borderRadius: 4
+  };
+}), $ = u(P)(() => ({
+  minWidth: 150,
+  marginTop: 4
+})), q = u(F)(({
+  theme: n
+}) => {
+  var t, a, o, l;
+  return {
+    "&$selected": {
+      backgroundColor: n.palette && W((a = (t = n.palette) == null ? void 0 : t.secondary) == null ? void 0 : a.main, 0.16),
+      color: (l = (o = n.palette) == null ? void 0 : o.secondary) == null ? void 0 : l.main
+    }
+  };
+}), w = u(D, {
+  shouldForwardProp: (n) => n !== "descending"
+})(({
+  descending: n,
+  theme: t
+}) => {
+  var a, o;
+  return {
+    "& .MuiBox-root": {
+      marginRight: "-2px",
+      marginLeft: "4px",
+      color: (o = (a = t.palette) == null ? void 0 : a.secondary) == null ? void 0 : o.main,
+      transition: "transform .2s ease-out",
+      transform: "rotate(180deg)",
+      ...n && {
+        transform: "rotate(0deg)"
+      }
+    }
+  };
+}), G = {
+  Root: V,
+  Menu: $,
+  MenuItem: q,
+  ButtonBase: w
+};
+function B({
+  caption: n,
+  options: t,
+  sortAsc: a,
+  sortDesc: o,
+  initialSort: l,
+  onChange: p,
+  components: O,
+  componentsProps: i
+}) {
+  var y, b;
+  const {
+    Root: S,
+    Menu: T,
+    MenuItem: x,
+    ButtonBase: C
+  } = O, [f, g] = M(null), I = (r) => {
+    g(r.currentTarget);
+  }, h = () => {
+    g(null);
+  }, [s, j] = M(l || {
+    option: {},
+    direction: o
+  }), R = (r, v) => {
+    let {
+      option: c,
+      direction: d
+    } = s;
+    v !== c.value ? c = t.find((z) => z.value === v) : d = d === o ? a : o, j({
+      option: c,
+      direction: d
+    }), p && p(r, {
+      value: c.value,
+      direction: d
+    }), h();
+  }, k = t === void 0 || t.length === 0, L = s.direction !== a;
+  return /* @__PURE__ */ A(S, { ...i.root, children: [
+    /* @__PURE__ */ m(C, { onClick: I, disabled: k, label: n, optionLabel: s.option.label || "", descending: L, ...i.buttonBase }),
+    /* @__PURE__ */ m(T, { anchorEl: f, keepMounted: !0, open: !!f, onClose: h, elevation: 1, marginThreshold: 0, PaperProps: {
+      style: {
+        minWidth: 150,
+        marginTop: 4
+      }
+    }, ...i.menu, anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left",
+      ...((y = i.menu) == null ? void 0 : y.anchorOrigin) || {}
+    }, transformOrigin: {
+      vertical: "top",
+      horizontal: "left",
+      ...((b = i.menu) == null ? void 0 : b.transformOrigin) || {}
+    }, children: t.map((r) => /* @__PURE__ */ m(x, { value: r.value, label: r.label, onClick: R, selected: r.value === s.option.value, ...i.menuItem }, r.value)) })
+  ] });
+}
+B.propTypes = {
+  /**
+   * Text shown before sort options
+   */
+  caption: e.string,
+  /**
+   * Value string for ascending sort
+   */
+  sortAsc: e.string,
+  /**
+   * Value string for descending sort
+   */
+  sortDesc: e.string,
+  /**
+   * Function that is called when sort option is changed
+   */
+  onChange: e.func,
+  /**
+   * Array of sort options
+   */
+  options: e.arrayOf(e.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    value: e.any,
+    label: e.string
+  })),
+  /**
+   * Initial sort option
+   */
+  initialSort: e.shape({
+    option: e.shape({
+      // eslint-disable-next-line react/forbid-prop-types
+      value: e.any,
+      label: e.string
+    }),
+    direction: e.string
+  }),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    Menu: e.elementType,
+    MenuItem: e.elementType,
+    ButtonBase: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    menu: e.instanceOf(Object),
+    menuItem: e.instanceOf(Object),
+    buttonBase: e.instanceOf(Object)
+  })
+};
+B.defaultProps = {
+  caption: "Sort by",
+  sortAsc: "ascending",
+  sortDesc: "descending",
+  onChange: void 0,
+  initialSort: void 0,
+  options: [],
+  components: G,
+  componentsProps: void 0
+};
+export {
+  B as default
+};

package/dist/es/general/Sort/components/ButtonBase.js

@@ -0,0 +1,19 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import e from "@mui/icons-material/esm/ArrowDropDown";
+import p from "@mui/material/Box";
+import a from "@mui/material/ButtonBase";
+import c from "@mui/material/Typography";
+function h({
+  disabled: o,
+  label: t,
+  optionLabel: n,
+  ...i
+}) {
+  return /* @__PURE__ */ m(a, { disabled: o, ...i, children: [
+    /* @__PURE__ */ r(c, { variant: "caption", color: o ? "textSecondary" : "textPrimary", children: `${t}: ${n}` }),
+    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(e, {}) })
+  ] });
+}
+export {
+  h as default
+};

package/dist/es/general/Sort/components/MenuItem.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import p from "@mui/material/MenuItem";
+import u from "@mui/material/Typography";
+function d({
+  value: t,
+  label: e = "",
+  selected: o,
+  onClick: n,
+  ...i
+}) {
+  return /* @__PURE__ */ r(p, { selected: o, onClick: (m) => n(m, t), dense: !0, ...i, children: /* @__PURE__ */ r(u, { variant: "caption", children: e }) });
+}
+export {
+  d as default
+};

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

package/dist/es/general/TablePagination/TablePagination.js

@@ -0,0 +1,104 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useEffect as w } from "react";
+import o from "prop-types";
+import d from "@mui/material/TablePagination";
+import { styled as y } from "@mui/material/styles";
+const T = y(d)(() => ({
+  overflow: "unset"
+})), C = {
+  Root: T
+};
+function m({
+  count: u,
+  page: n,
+  rowsPerPage: r,
+  rowsPerPageOptions: a,
+  showFirstButton: c,
+  showLastButton: i,
+  onPageChange: p,
+  onRowsPerPageChange: l,
+  components: f,
+  componentsProps: P
+}) {
+  const {
+    Root: g
+  } = f, h = a.includes(r) ? a : [...a, r].sort((t, e) => t - e), s = Math.ceil(u / r) - 1;
+  return w(() => {
+    n > 0 && n > s && p(null, {
+      value: s
+    });
+  }, [s, p, n]), /* @__PURE__ */ b(g, { component: "div", count: u, page: Math.max(0, Math.min(n, s)), rowsPerPage: r, onPageChange: (t, e) => p(t, {
+    value: e
+  }), onRowsPerPageChange: (t, {
+    props: {
+      value: e
+    }
+  }) => {
+    l(t, {
+      value: e
+    });
+  }, rowsPerPageOptions: h, showFirstButton: c, showLastButton: i, ...P.root });
+}
+m.propTypes = {
+  /**
+   * The total amount of entities
+   */
+  count: o.number,
+  /**
+   * Current page
+   */
+  page: o.number,
+  /**
+   * Number of rows shown per page
+   */
+  rowsPerPage: o.number,
+  /**
+   * An array of options for how many rows should be shown per page
+   */
+  rowsPerPageOptions: o.arrayOf(Number),
+  /**
+   * Number of rows shown per page
+   */
+  showFirstButton: o.bool,
+  /**
+   * Number of rows shown per page
+   */
+  showLastButton: o.bool,
+  // Callbacks
+  /**
+   * Callback for when the page changes
+   */
+  onPageChange: o.func,
+  /**
+   * Callback for when the user selects from the rowsPerPageOptions
+   */
+  onRowsPerPageChange: o.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object)
+  })
+};
+m.defaultProps = {
+  count: 0,
+  page: 0,
+  rowsPerPage: 10,
+  rowsPerPageOptions: [10, 25, 50, 100],
+  showFirstButton: !0,
+  showLastButton: !0,
+  onPageChange: () => null,
+  onRowsPerPageChange: () => null,
+  components: C,
+  componentsProps: void 0
+};
+export {
+  m as default
+};