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

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

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { ImageList as MuiImageList, ImageListItem as MuiImageListItem } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import VdtItemPoster from '../ItemPoster';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiImageList: typeof MuiImageList;
+declare const StyledMuiImageListItem: typeof MuiImageListItem;
+declare const StyledVdtItemPoster: typeof VdtItemPoster;
+declare const defaultComponents: {
+    Root: typeof StyledMuiImageList;
+    ImageListItem: typeof StyledMuiImageListItem;
+    ItemPoster: typeof StyledVdtItemPoster;
+};
+export interface ItemPosterListProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The ItemType to display as a list item
+     */
+    itemType?: ItemType;
+    /**
+     * Number of columns.
+     */
+    cols?: number;
+    /**
+     * The gap between items in px.
+     */
+    gap?: number;
+    /**
+     * A function that handles a poster being clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, payload: {
+        itemType: ItemType;
+        posterIndex: number;
+    }) => void;
+}
+declare const ItemPosterList: React.FC<ItemPosterListProps>;
+export default ItemPosterList;

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

@@ -1,99 +1,47 @@
 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)({
+import u from "@mui/material/ImageList";
+import g from "@mui/material/ImageListItem";
+import { styled as e } from "@mui/material/styles";
+import f from "../ItemPoster/index.js";
+const L = e(u)({
+  height: "100%",
   width: "100%",
   margin: "auto"
-}), b = m(P)({
+}), h = e(g)({
   cursor: "default"
-}), v = m(T)({
+}), y = e(f)({
   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
-}) {
+}), P = {
+  Root: L,
+  ImageListItem: h,
+  ItemPoster: y
+}, v = ({
+  itemType: i,
+  cols: m,
+  gap: s,
+  onClick: r,
+  components: a,
+  componentsProps: t
+}) => {
   const {
-    Root: I,
-    ImageListItem: l,
-    ItemPoster: u
-  } = d, {
+    Root: d,
+    ImageListItem: n,
+    ItemPoster: I
+  } = a, {
     posters: {
-      uri: f = []
+      uri: c = []
     } = {}
-  } = 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 || {};
+  return /* @__PURE__ */ o(d, { cols: m, gap: s, rowHeight: "auto", ...t.root, children: c.map((l, p) => /* @__PURE__ */ o(n, { ...t.imageListItem, children: /* @__PURE__ */ o(I, { itemType: i, posterIndex: p, onClick: r, ...t.itemPoster }) }, l)) });
 };
-i.defaultProps = {
+v.defaultProps = {
   itemType: void 0,
   cols: 2,
   gap: 4,
-  rowHeight: "auto",
-  variant: "standard",
   onClick: void 0,
-  components: j,
+  components: P,
   componentsProps: void 0
 };
 export {
-  i as default
+  v as default
 };

package/dist/es/item/ItemPosterList/index.d.ts

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

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

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

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { Paper as MuiPaper, Box as MuiBox } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import { BlurredBackground as VdtBlurredBackground } from '../../general';
+import VdtToolbar from './components/Toolbar';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+type StyledMuiPaperType = StyledComponent<typeof MuiPaper, {
+    toolbarOnBottom?: boolean;
+}>;
+declare const StyledMuiPaper: StyledMuiPaperType;
+declare const StyledVdtToolbar: typeof VdtToolbar;
+type StyledVdtBlurredBackgroundType = StyledComponent<typeof VdtBlurredBackground, {
+    toolbarOnBottom?: boolean;
+}>;
+declare const StyledVdtBlurredBackground: StyledVdtBlurredBackgroundType;
+type StyledMuiBoxImageType = StyledComponent<typeof MuiBox, {
+    image?: string;
+    backgroundSize?: React.CSSProperties['backgroundSize'];
+}>;
+declare const StyledMuiBoxImage: StyledMuiBoxImageType;
+declare const defaultComponents: {
+    Root: typeof StyledMuiPaper;
+    Toolbar: typeof StyledVdtToolbar;
+    BlurredBackground: typeof StyledVdtBlurredBackground;
+    ImageBox: typeof StyledMuiBoxImage;
+};
+export interface ItemPosterViewerProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The ItemType to display as a list item
+     */
+    itemType?: ItemType;
+    /**
+     * The index of the current poster
+     */
+    index?: number;
+    /**
+     * Whether to show a blurred background behind the thumbnail or not
+     */
+    showBlurredBackground?: boolean;
+    /**
+     * Set perspective of the poster image
+     */
+    backgroundSize?: 'auto' | 'contain' | 'cover' | React.CSSProperties['backgroundSize'];
+    /**
+     * Whether to put the toolbar on the bottom or not
+     */
+    toolbarOnBottom?: boolean;
+    /**
+     * A function that handles clicking the previous button
+     */
+    onPrevious?: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>, index: number) => void;
+    /**
+     * A function that handles clicking the next button
+     */
+    onNext?: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>, index: number) => void;
+    /**
+     * A function that handles clicking the close button
+     */
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * A function that handles clicking the download button
+     */
+    onDownload?: (event: any, payload: {
+        url: string;
+        itemType: ItemType;
+    }) => void;
+}
+declare const ItemPosterViewer: React.FC<ItemPosterViewerProps>;
+export default ItemPosterViewer;

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

@@ -1,12 +1,10 @@
-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 { jsxs as V, jsx as g } from "react/jsx-runtime";
+import { useRef as E, useState as B, useCallback as F, useEffect as L } from "react";
+import j from "@mui/material/Paper";
+import N 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 O from "../../general/BlurredBackground/index.js";
 import "../../general/CalendarPicker/index.js";
 import "../../general/CompactBadge/index.js";
 import "../../general/CompactLabel/index.js";
@@ -18,173 +16,124 @@ import "../../general/MenuItem/index.js";
 import "../../general/ScrubLine/index.js";
 import "../../general/Sort/index.js";
 import "../../general/TablePagination/index.js";
+import "../../general/Form/index.js";
 import "../../general/ThemeContext/ThemeContext.js";
-import K from "./components/Toolbar.js";
-const M = l(R, {
-  shouldForwardProp: (e) => e !== "toolbarOnBottom"
+import H from "./components/Toolbar.js";
+const W = l(j, {
+  shouldForwardProp: (o) => o !== "toolbarOnBottom"
 })(({
-  toolbarOnBottom: e
+  toolbarOnBottom: o
 }) => ({
   display: "grid",
-  gridTemplateAreas: e ? '"poster" "toolbar"' : '"toolbar" "poster"',
-  gridTemplateRows: e ? "auto min-content" : "min-content auto",
+  gridTemplateAreas: o ? '"poster" "toolbar"' : '"toolbar" "poster"',
+  gridTemplateRows: o ? "auto min-content" : "min-content auto",
   maxWidth: "100%",
   width: "100%",
   height: "100%",
   position: "relative"
-})), F = l(K)({
+})), $ = l(H)({
   gridArea: "toolbar",
   maxHeight: "48px",
   zIndex: 25,
   "&:focus-visible": {
     outline: "none"
   }
-}), N = l(A, {
-  shouldForwardProp: (e) => e !== "toolbarOnBottom"
+}), q = l(O, {
+  shouldForwardProp: (o) => o !== "toolbarOnBottom"
 })(({
-  toolbarOnBottom: e
+  toolbarOnBottom: o
 }) => ({
+  transition: "all .6s ease-in-out",
   height: "calc(100% - 48px)",
   width: "100%",
   position: "absolute",
   zIndex: 0,
-  ...e ? {
+  ...o ? {
     top: 0
   } : {
     bottom: 0
   }
-})), L = l(C, {
-  shouldForwardProp: (e) => !["image", "backgroundSize"].includes(e)
+})), G = l(N, {
+  shouldForwardProp: (o) => !["image", "backgroundSize"].includes(o)
 })(({
-  image: e,
-  backgroundSize: r
+  image: o,
+  backgroundSize: i
 }) => ({
   height: "inherit",
   width: "inherit",
   position: "relative",
   zIndex: 5,
   transition: "all .3s ease-in-out",
-  background: e ? `url(${e})` : "none",
+  background: o ? `url(${o})` : "none",
   backgroundPosition: "center",
   backgroundRepeat: "no-repeat",
-  backgroundSize: r,
+  backgroundSize: i,
   "&: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
-}) {
+})), J = {
+  Root: W,
+  Toolbar: $,
+  BlurredBackground: q,
+  ImageBox: G
+}, Q = ({
+  itemType: o,
+  index: i,
+  showBlurredBackground: s,
+  backgroundSize: k,
+  toolbarOnBottom: f,
+  onPrevious: h,
+  onNext: x,
+  onClose: y,
+  onDownload: P,
+  components: S,
+  componentsProps: a
+}) => {
   const {
-    Root: P,
-    Toolbar: I,
-    BlurredBackground: O,
-    ImageBox: S
-  } = k, {
+    Root: R,
+    Toolbar: z,
+    BlurredBackground: D,
+    ImageBox: T
+  } = S, {
     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 })
+  } = o || {}, m = i !== void 0, c = E(0), [C, b] = B(0), d = m ? i : C, e = n[d], [A, K] = B(e), v = (t) => {
+    m || b((r) => r > 0 ? r - 1 : n.length - 1), h && h(t, d > 0 ? d - 1 : n.length - 1);
+  }, I = (t) => {
+    m || b((r) => (r + 1) % n.length), x && x(t, (d + 1) % n.length);
+  }, u = (t) => {
+    t.stopPropagation(), t.code === "ArrowRight" && I(t), t.code === "ArrowLeft" && v(t);
+  }, w = F((t) => {
+    const r = (M, U) => () => {
+      c.current === U && K(e), M.remove();
+    }, p = document.createElement("img");
+    p.src = t, c.current += 1, p.addEventListener("load", r(p, c.current));
+  }, [e]);
+  return L(() => {
+    s && w(e);
+  }, [e, s, w]), /* @__PURE__ */ V(R, { toolbarOnBottom: f, onKeyDown: u, ...a.root, children: [
+    /* @__PURE__ */ g(z, { onPrevious: v, onNext: I, onClose: y, onDownload: (t) => P(t, {
+      url: e,
+      itemType: o
+    }), tabIndex: -1, onKeyDown: u, ...a.toolbar }),
+    s && /* @__PURE__ */ g(D, { image: A, toolbarOnBottom: f, ...a.blurredBackground }),
+    /* @__PURE__ */ g(T, { component: "div", image: e, backgroundSize: k, tabIndex: -1, onKeyDown: u, ...a.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 = {
+Q.defaultProps = {
   itemType: void 0,
   index: void 0,
-  showBlurredBackground: !1,
+  showBlurredBackground: !0,
   backgroundSize: "auto",
   onPrevious: void 0,
   onNext: void 0,
   onClose: void 0,
   onDownload: void 0,
   toolbarOnBottom: !1,
-  components: H,
+  components: J,
   componentsProps: void 0
 };
 export {
-  B as default
+  Q as default
 };

package/dist/es/item/ItemPosterViewer/components/Toolbar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ToolbarProps as MuiToolbarProps } from '@mui/material';
+export interface VdtToolbarProps extends MuiToolbarProps {
+    onPrevious?: React.MouseEventHandler<HTMLButtonElement>;
+    onNext?: React.MouseEventHandler<HTMLButtonElement>;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    onDownload?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare const VdtToolbar: React.FC<VdtToolbarProps>;
+export default VdtToolbar;

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

@@ -1,27 +1,31 @@
 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 m from "@mui/icons-material/esm/Close";
+import a from "@mui/icons-material/esm/NavigateBefore";
+import p from "@mui/icons-material/esm/NavigateNext";
+import s from "@mui/icons-material/esm/SaveAlt";
+import f from "@mui/material/Toolbar";
 import n from "@mui/material/Box";
-import r from "@mui/material/IconButton";
-function j({
-  onPrevious: c,
+import e from "@mui/material/IconButton";
+const h = ({
+  onPrevious: d,
   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", {})
-  ] }) });
-}
+  onClose: i,
+  onDownload: r,
+  ...c
+}) => /* @__PURE__ */ o(f, { ...c, children: /* @__PURE__ */ t(n, { display: "flex", justifyContent: "space-between", width: "100%", children: [
+  i ? /* @__PURE__ */ o(e, { edge: "start", onClick: i, children: /* @__PURE__ */ o(m, {}) }) : /* @__PURE__ */ o("span", {}),
+  /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ o(e, { onClick: d, children: /* @__PURE__ */ o(a, {}) }),
+    /* @__PURE__ */ o(e, { onClick: l, children: /* @__PURE__ */ o(p, {}) })
+  ] }),
+  r ? /* @__PURE__ */ o(e, { edge: "end", onClick: r, children: /* @__PURE__ */ o(s, {}) }) : /* @__PURE__ */ o("span", {})
+] }) });
+h.defaultProps = {
+  onPrevious: void 0,
+  onNext: void 0,
+  onClose: void 0,
+  onDownload: void 0
+};
 export {
-  j as default
+  h as default
 };

package/dist/es/item/ItemPosterViewer/index.d.ts

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

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

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