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

package/dist/es/item/ItemListItem/index.js

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

package/dist/es/item/ItemPoster/ItemPoster.js

@@ -0,0 +1,132 @@
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import o from "prop-types";
+import a from "@mui/material/Box";
+import { styled as n } from "@mui/material/styles";
+import b from "@vidispine/proptypes";
+import "../../general/AvatarMenu/index.js";
+import y from "../../general/BlurredBackground/index.js";
+import "../../general/CalendarPicker/index.js";
+import "../../general/CompactBadge/index.js";
+import "../../general/CompactLabel/index.js";
+import "../../general/CornerLabelPlacer/index.js";
+import "../../general/ExpandButton/index.js";
+import "../../general/ImageCollage/index.js";
+import "../../general/MediaIcon/index.js";
+import "../../general/MenuItem/index.js";
+import "../../general/ScrubLine/index.js";
+import "../../general/Sort/index.js";
+import "../../general/TablePagination/index.js";
+import "../../general/ThemeContext/ThemeContext.js";
+const I = n(a)(({
+  onClick: e
+}) => ({
+  height: "100%",
+  width: "100%",
+  position: "relative",
+  ...e && {
+    cursor: "pointer"
+  }
+})), v = n(y)(() => ({
+  height: "100%",
+  width: "100%",
+  position: "absolute",
+  zIndex: 0,
+  top: 0
+})), T = n(a, {
+  shouldForwardProp: (e) => !["image", "backgroundSize"].includes(e)
+})(({
+  image: e,
+  backgroundSize: t
+}) => ({
+  height: "inherit",
+  width: "inherit",
+  position: "relative",
+  zIndex: 5,
+  transition: "all .3s ease-in",
+  background: e ? `url(${e})` : "none",
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: t
+})), S = {
+  Root: I,
+  BlurredBackground: v,
+  ImageBox: T
+};
+function s({
+  itemType: e,
+  posterIndex: t,
+  showBlurredBackground: u,
+  backgroundSize: l,
+  onClick: p,
+  components: g,
+  componentsProps: r
+}) {
+  var m;
+  const {
+    Root: B,
+    BlurredBackground: h,
+    ImageBox: k
+  } = g, {
+    posters: i
+  } = e || {}, d = (m = i == null ? void 0 : i.uri) == null ? void 0 : m[t];
+  return /* @__PURE__ */ x(B, { onClick: typeof p != "function" ? void 0 : (f) => {
+    p(f, {
+      itemType: e,
+      posterIndex: t
+    });
+  }, ...r.root, children: [
+    u && /* @__PURE__ */ c(h, { image: d, ...r.blurredBackground }),
+    /* @__PURE__ */ c(k, { component: "div", image: d, backgroundSize: l, ...r.imageBox })
+  ] });
+}
+s.propTypes = {
+  /**
+   * The ItemType to display as a list item
+   */
+  itemType: b.ItemType,
+  /**
+   * The index of the poster
+   */
+  posterIndex: o.number,
+  /**
+   * Cover the whole width/height of container
+   */
+  backgroundSize: o.string,
+  /**
+   * Whether to show a blurred background behind the thumbnail or not
+   */
+  showBlurredBackground: o.bool,
+  /**
+   * A function that handles the poster being clicked
+   */
+  onClick: o.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    BlurredBackground: o.elementType,
+    ImageBox: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    blurredBackground: o.instanceOf(Object),
+    imageBox: o.instanceOf(Object)
+  })
+};
+s.defaultProps = {
+  itemType: void 0,
+  posterIndex: 0,
+  showBlurredBackground: !1,
+  backgroundSize: "cover",
+  onClick: void 0,
+  components: S,
+  componentsProps: void 0
+};
+export {
+  s as default
+};

package/dist/es/item/ItemPoster/index.js

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

package/dist/es/item/ItemPosterList/ItemPosterList.js

@@ -0,0 +1,99 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "prop-types";
+import L from "@mui/material/ImageList";
+import P from "@mui/material/ImageListItem";
+import { styled as m } from "@mui/material/styles";
+import h from "@vidispine/proptypes";
+import T from "../ItemPoster/index.js";
+const O = m(L)({
+  width: "100%",
+  margin: "auto"
+}), b = m(P)({
+  cursor: "default"
+}), v = m(T)({
+  objectFit: "cover"
+}), j = {
+  Root: O,
+  ImageListItem: b,
+  ItemPoster: v
+};
+function i({
+  itemType: s,
+  cols: r,
+  gap: n,
+  rowHeight: a,
+  variant: p,
+  onClick: c,
+  components: d,
+  componentsProps: e
+}) {
+  const {
+    Root: I,
+    ImageListItem: l,
+    ItemPoster: u
+  } = d, {
+    posters: {
+      uri: f = []
+    } = {}
+  } = s || {};
+  return /* @__PURE__ */ o(I, { cols: r, gap: n, rowHeight: a || "auto", variant: p, ...e.root, children: f.map((g, y) => /* @__PURE__ */ o(l, { ...e.imageListItem, children: /* @__PURE__ */ o(u, { itemType: s, posterIndex: y, onClick: c, ...e.itemPoster }) }, g)) });
+}
+i.propTypes = {
+  /**
+   * The ItemType to display as a list item
+   */
+  itemType: h.ItemType,
+  /**
+   * Number of columns.
+   */
+  cols: t.number,
+  /**
+   * The gap between items in px.
+   */
+  gap: t.number,
+  /**
+   * Set row height
+   *
+   * _Note: Mui's ImageList only support pixels or 'auto'_
+   */
+  rowHeight: t.string,
+  /**
+   * The variant to use.
+   */
+  variant: t.oneOf(["masonry", "standard"]),
+  // Callbacks
+  /**
+   * A function that handles a poster being clicked
+   */
+  onClick: t.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: t.shape({
+    Root: t.elementType,
+    ImageListItem: t.elementType,
+    ItemPoster: t.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: t.shape({
+    root: t.instanceOf(Object),
+    imageListItem: t.instanceOf(Object),
+    itemPoster: t.instanceOf(Object)
+  })
+};
+i.defaultProps = {
+  itemType: void 0,
+  cols: 2,
+  gap: 4,
+  rowHeight: "auto",
+  variant: "standard",
+  onClick: void 0,
+  components: j,
+  componentsProps: void 0
+};
+export {
+  i as default
+};

package/dist/es/item/ItemPosterList/index.js

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

package/dist/es/item/ItemPosterViewer/ItemPosterViewer.js

@@ -0,0 +1,190 @@
+import { jsxs as j, jsx as c } from "react/jsx-runtime";
+import { useState as z } from "react";
+import o from "prop-types";
+import R from "@mui/material/Paper";
+import C from "@mui/material/Box";
+import { styled as l } from "@mui/material/styles";
+import V from "@vidispine/proptypes";
+import "../../general/AvatarMenu/index.js";
+import A from "../../general/BlurredBackground/index.js";
+import "../../general/CalendarPicker/index.js";
+import "../../general/CompactBadge/index.js";
+import "../../general/CompactLabel/index.js";
+import "../../general/CornerLabelPlacer/index.js";
+import "../../general/ExpandButton/index.js";
+import "../../general/ImageCollage/index.js";
+import "../../general/MediaIcon/index.js";
+import "../../general/MenuItem/index.js";
+import "../../general/ScrubLine/index.js";
+import "../../general/Sort/index.js";
+import "../../general/TablePagination/index.js";
+import "../../general/ThemeContext/ThemeContext.js";
+import K from "./components/Toolbar.js";
+const M = l(R, {
+  shouldForwardProp: (e) => e !== "toolbarOnBottom"
+})(({
+  toolbarOnBottom: e
+}) => ({
+  display: "grid",
+  gridTemplateAreas: e ? '"poster" "toolbar"' : '"toolbar" "poster"',
+  gridTemplateRows: e ? "auto min-content" : "min-content auto",
+  maxWidth: "100%",
+  width: "100%",
+  height: "100%",
+  position: "relative"
+})), F = l(K)({
+  gridArea: "toolbar",
+  maxHeight: "48px",
+  zIndex: 25,
+  "&:focus-visible": {
+    outline: "none"
+  }
+}), N = l(A, {
+  shouldForwardProp: (e) => e !== "toolbarOnBottom"
+})(({
+  toolbarOnBottom: e
+}) => ({
+  height: "calc(100% - 48px)",
+  width: "100%",
+  position: "absolute",
+  zIndex: 0,
+  ...e ? {
+    top: 0
+  } : {
+    bottom: 0
+  }
+})), L = l(C, {
+  shouldForwardProp: (e) => !["image", "backgroundSize"].includes(e)
+})(({
+  image: e,
+  backgroundSize: r
+}) => ({
+  height: "inherit",
+  width: "inherit",
+  position: "relative",
+  zIndex: 5,
+  transition: "all .3s ease-in-out",
+  background: e ? `url(${e})` : "none",
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: r,
+  "&:focus-visible": {
+    outline: "none"
+  }
+})), H = {
+  Root: M,
+  Toolbar: F,
+  BlurredBackground: N,
+  ImageBox: L
+};
+function B({
+  itemType: e,
+  index: r,
+  showBlurredBackground: y,
+  backgroundSize: w,
+  onPrevious: u,
+  onNext: g,
+  onClose: v,
+  onDownload: T,
+  toolbarOnBottom: b,
+  components: k,
+  componentsProps: i
+}) {
+  const {
+    Root: P,
+    Toolbar: I,
+    BlurredBackground: O,
+    ImageBox: S
+  } = k, {
+    posters: {
+      uri: n = []
+    } = {}
+  } = e || {}, s = r !== void 0, [D, f] = z(0), a = s ? r : D, h = (t) => {
+    s || f((d) => d > 0 ? d - 1 : n.length - 1), u && u(t, a > 0 ? a - 1 : n.length - 1);
+  }, x = (t) => {
+    s || f((d) => (d + 1) % n.length), g && g(t, (a + 1) % n.length);
+  }, p = (t) => {
+    t.stopPropagation(), t.code === "ArrowRight" && x(t), t.code === "ArrowLeft" && h(t);
+  }, m = n[a];
+  return /* @__PURE__ */ j(P, { toolbarOnBottom: b, onKeyDown: p, ...i.root, children: [
+    /* @__PURE__ */ c(I, { onPrevious: h, onNext: x, onClose: v, onDownload: (t) => T(t, {
+      url: m,
+      itemType: e
+    }), tabIndex: -1, onKeyDown: p, ...i.toolbar }),
+    y && /* @__PURE__ */ c(O, { image: m, toolbarOnBottom: b, ...i.blurredBackground }),
+    /* @__PURE__ */ c(S, { component: "div", image: m, backgroundSize: w, tabIndex: -1, onKeyDown: p, ...i.imageBox })
+  ] });
+}
+B.propTypes = {
+  /**
+   * The ItemType to display as a list item
+   */
+  itemType: V.ItemType,
+  /**
+   * The index of the current poster
+   */
+  index: o.number,
+  /**
+   * Whether to show a blurred background behind the thumbnail or not
+   */
+  showBlurredBackground: o.bool,
+  /**
+   * Set perspective of the poster image
+   */
+  backgroundSize: o.oneOf(["auto", "contain", "cover"]),
+  /**
+   * A function that handles clicking the previous button
+   */
+  onPrevious: o.func,
+  /**
+   * A function that handles clicking the next button
+   */
+  onNext: o.func,
+  /**
+   * A function that handles clicking the close button
+   */
+  onClose: o.func,
+  /**
+   * A function that handles clicking the download button
+   */
+  onDownload: o.func,
+  /**
+   * Whether to put the toolbar on the bottom or not
+   */
+  toolbarOnBottom: o.bool,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    Toolbar: o.elementType,
+    BlurredBackground: o.elementType,
+    ImageBox: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    toolbar: o.instanceOf(Object),
+    blurredBackground: o.instanceOf(Object),
+    imageBox: o.instanceOf(Object)
+  })
+};
+B.defaultProps = {
+  itemType: void 0,
+  index: void 0,
+  showBlurredBackground: !1,
+  backgroundSize: "auto",
+  onPrevious: void 0,
+  onNext: void 0,
+  onClose: void 0,
+  onDownload: void 0,
+  toolbarOnBottom: !1,
+  components: H,
+  componentsProps: void 0
+};
+export {
+  B as default
+};

package/dist/es/item/ItemPosterViewer/components/Toolbar.js

@@ -0,0 +1,27 @@
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import a from "@mui/icons-material/esm/Close";
+import d from "@mui/icons-material/esm/NavigateBefore";
+import f from "@mui/icons-material/esm/NavigateNext";
+import p from "@mui/icons-material/esm/SaveAlt";
+import s from "@mui/material/Toolbar";
+import n from "@mui/material/Box";
+import r from "@mui/material/IconButton";
+function j({
+  onPrevious: c,
+  onNext: l,
+  onClose: e,
+  onDownload: i,
+  ...m
+}) {
+  return /* @__PURE__ */ o(s, { ...m, children: /* @__PURE__ */ t(n, { display: "flex", justifyContent: "space-between", width: "100%", children: [
+    e ? /* @__PURE__ */ o(r, { edge: "start", onClick: e, children: /* @__PURE__ */ o(a, {}) }) : /* @__PURE__ */ o("span", {}),
+    /* @__PURE__ */ t(n, { children: [
+      /* @__PURE__ */ o(r, { onClick: c, children: /* @__PURE__ */ o(d, {}) }),
+      /* @__PURE__ */ o(r, { onClick: l, children: /* @__PURE__ */ o(f, {}) })
+    ] }),
+    i ? /* @__PURE__ */ o(r, { edge: "end", onClick: i, children: /* @__PURE__ */ o(p, {}) }) : /* @__PURE__ */ o("span", {})
+  ] }) });
+}
+export {
+  j as default
+};

package/dist/es/item/ItemPosterViewer/index.js

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

package/dist/es/item/ItemTable/ItemTable.js

@@ -0,0 +1,201 @@
+import { jsxs as k, jsx as f } from "react/jsx-runtime";
+import { useMemo as D, useState as F } from "react";
+import e from "prop-types";
+import G from "@mui/material/Table";
+import J from "@mui/material/TableBody";
+import K from "@mui/material/TableRow";
+import Q from "@mui/material/TableCell";
+import y from "@vidispine/proptypes";
+import "clsx";
+import "@mui/material/styles";
+import { showSlot as U } from "../../_utils/showSlot.js";
+import W from "../ItemTableRow/index.js";
+import X from "./components/ItemTableHead.js";
+function Y({
+  rows: t,
+  onCheck: l
+}) {
+  return /* @__PURE__ */ f(K, { children: /* @__PURE__ */ f(Q, { colSpan: t.length + (l ? 1 : 0), sx: {
+    borderBottom: "none"
+  }, children: "No items found..." }) });
+}
+const Z = {
+  Root: G,
+  TableHead: X,
+  TableBody: J,
+  TableRow: W
+};
+function O({
+  itemListType: t,
+  rows: l,
+  size: w,
+  avatarVariant: R,
+  stickyHeader: C,
+  showAvatar: b,
+  onRowClick: T,
+  checked: i,
+  onCheck: d,
+  isLoading: c,
+  amountLoading: g,
+  emptySlot: H,
+  components: S,
+  componentsProps: j
+}) {
+  const {
+    Root: x,
+    TableHead: B,
+    TableBody: I,
+    TableRow: A
+  } = S, M = [...Array(Math.max(g, 0)).keys()].map((a) => ({
+    key: a
+  })), u = D(() => {
+    var a;
+    return ((a = t == null ? void 0 : t.item) == null ? void 0 : a.map((o) => ({
+      key: o == null ? void 0 : o.id,
+      itemType: o
+    }))) || [];
+  }, [t]), [P, h] = F([]), n = i === void 0 ? P : i, V = d ? (a, {
+    value: o
+  }) => {
+    const {
+      item: r = []
+    } = t || {}, m = o === !0 ? [...n, ...r].filter(
+      // Remove duplicates
+      (s, p, E) => p === E.findIndex(({
+        id: N
+      }) => s.id === N)
+    ) : n.filter(({
+      id: s
+    }) => !r.some((p) => p.id === s));
+    i === void 0 && h(() => m), d(a, {
+      itemListType: {
+        item: m
+      }
+    });
+  } : void 0, q = d ? (a, {
+    value: o,
+    itemType: r
+  }) => {
+    const m = o === !0 ? [...n, r] : n.filter(({
+      id: s
+    }) => r.id !== s);
+    i === void 0 && h(() => m), d(a, {
+      itemListType: {
+        item: m
+      }
+    });
+  } : void 0, v = (n == null ? void 0 : n.length) > 0 && ((t == null ? void 0 : t.item) || []).every((a) => n.some((o) => a.id === o.id)), z = !v && (n == null ? void 0 : n.length) > 0 && ((t == null ? void 0 : t.item) || []).some((a) => n.some((o) => a.id === o.id));
+  return /* @__PURE__ */ k(x, { size: w, stickyHeader: C, ...j.root, children: [
+    /* @__PURE__ */ f(B, { rows: l, isLoading: c, checked: v, showAvatar: b, indeterminate: z, onCheck: V }),
+    /* @__PURE__ */ k(I, { children: [
+      !c && u.length === 0 && U(H, {
+        onCheck: d,
+        rows: l
+      }),
+      (c ? M : u).map(({
+        key: a,
+        itemType: o
+      }) => /* @__PURE__ */ f(A, { itemType: o, rows: l, isLoading: c, onClick: T, showAvatar: b, avatarVariant: R, checked: Array.isArray(n) && n.some(({
+        id: r
+      }) => r === o.id), onCheck: q }, a))
+    ] })
+  ] });
+}
+O.propTypes = {
+  /**
+   * The `ItemListType` to show in the table
+   */
+  itemListType: y.ItemListType,
+  /**
+   * List of header labels and values for table columns
+   *
+   * Set value to the *field name* it should be extracted from
+   * or a *function* which will get itemType as argument
+   *
+   * Defaults to empty list
+   */
+  rows: e.arrayOf(e.shape({
+    label: e.string,
+    value: e.oneOfType([e.node, e.func])
+  })),
+  /**
+   * Set size of table
+   */
+  size: e.oneOf(["medium", "small"]),
+  /**
+   * Variant/shapes for the Avatar
+   */
+  avatarVariant: e.oneOf(["circular", "rounded", "square"]),
+  /**
+   * Set the header to stick at top when scrolled
+   */
+  stickyHeader: e.bool,
+  /**
+   * A list of string ids for which items are checked.
+   */
+  checked: e.arrayOf(y.ItemType),
+  /**
+   * Set if table row avatar should be shown
+   */
+  showAvatar: e.bool,
+  /**
+   * Show skeleton table items as loading state
+   */
+  isLoading: e.bool,
+  /**
+   * Amount of table items to show when loading
+   */
+  amountLoading: e.number,
+  // Callbacks
+  /**
+   * A function that handles a checkbox being clicked.
+   */
+  onCheck: e.func,
+  /**
+   * A function that handles an item being clicked.
+   */
+  onRowClick: e.func,
+  // Slots
+  /**
+   * Shown when the table is empty
+   */
+  emptySlot: e.oneOfType([e.elementType, e.node]),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    TableHead: e.elementType,
+    TableBody: e.elementType,
+    TableRow: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    tableHead: e.instanceOf(Object),
+    tableBody: e.instanceOf(Object),
+    tableRow: e.instanceOf(Object)
+  })
+};
+O.defaultProps = {
+  itemListType: void 0,
+  rows: [],
+  size: "medium",
+  avatarVariant: "square",
+  stickyHeader: !1,
+  checked: void 0,
+  showAvatar: !0,
+  isLoading: !1,
+  amountLoading: 3,
+  onCheck: void 0,
+  onRowClick: void 0,
+  emptySlot: Y,
+  components: Z,
+  componentsProps: void 0
+};
+export {
+  O as default
+};