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

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

@@ -1,141 +1,86 @@
-import { jsx as a, jsxs as C } from "react/jsx-runtime";
-import o from "prop-types";
-import i from "@mui/material/Box";
+import { jsx as B, jsxs as I } from "react/jsx-runtime";
+import x from "@mui/material/Box";
 import { styled as d } from "@mui/material/styles";
-import I from "../BlurredBackground/index.js";
-const j = ({
-  amountOfImages: n,
-  maxColumns: r
+import k from "../BlurredBackground/index.js";
+const v = ({
+  amountOfImages: o,
+  maxColumns: n
 }) => {
-  const e = Math.min(r, n), s = Math.ceil(n / e), c = n % e || e;
+  const r = Math.min(n, o), s = Math.ceil(o / r), c = o % r || r;
   return {
-    amountOfImages: n,
-    amountOfColumns: e,
+    amountOfImages: o,
+    amountOfColumns: r,
     amountOfRows: s,
     amountOfImagesOnLastRow: c
   };
-}, T = (n, r, {
-  amountOfImages: e,
+}, b = (o, n, {
+  amountOfImages: r,
   amountOfColumns: s,
   amountOfRows: c,
-  amountOfImagesOnLastRow: u
+  amountOfImagesOnLastRow: e
 }) => {
-  const h = Math.ceil((n + 1) / s) === c;
-  return `${100 / Math.max(Math.min(h && r ? u : s, e), 1)}%`;
-}, m = d(i)(() => ({
+  const h = Math.ceil((o + 1) / s) === c;
+  return `${100 / Math.max(Math.min(h && n ? e : s, r), 1)}%`;
+}, $ = d(x)(() => ({
   width: "inherit",
   height: "100%",
   display: "flex",
   flexWrap: "wrap"
-})), v = d(i)(() => ({
+})), j = d(x)(() => ({
   pointerEvents: "none",
   position: "relative"
-})), E = d(i, {
-  shouldForwardProp: (n) => !["amountOfImages", "showSingleStretched"].includes(n)
+})), E = d(x, {
+  shouldForwardProp: (o) => o !== "amountOfImages" && o !== "showSingleStretched"
 })(({
-  amountOfImages: n,
-  showSingleStretched: r
+  amountOfImages: o,
+  showSingleStretched: n
 }) => ({
   width: "100%",
   height: "100%",
   position: "relative",
   zIndex: 2,
-  objectFit: n === 1 && r ? "contain" : "cover"
-})), L = d(I)(() => ({
+  objectFit: o === 1 && n ? "contain" : "cover"
+})), L = d(k)(() => ({
   top: 0,
   position: "absolute",
   zIndex: 1
-})), $ = {
-  Root: m,
-  ContainerBox: v,
+})), O = {
+  Root: $,
+  ContainerBox: j,
   ImageBox: E,
   BlurredBackground: L
-};
-function f({
-  images: n,
-  maxImages: r,
-  maxColumns: e,
+}, z = ({
+  images: o,
+  maxImages: n,
+  maxColumns: r,
   showSingleStretched: s,
   showLastRowStretched: c,
-  showBlurredBackground: u,
+  showBlurredBackground: e,
   onError: h,
-  components: B,
-  componentsProps: p
-}) {
+  components: p,
+  componentsProps: u
+}) => {
   const {
-    Root: w,
-    ContainerBox: y,
-    ImageBox: b,
+    Root: i,
+    ContainerBox: f,
+    ImageBox: M,
     BlurredBackground: S
-  } = B;
-  if (!(n != null && n.length) || r < 0 || e < 0)
+  } = p;
+  if (!(o != null && o.length) || n < 0 || r < 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) })
+  const w = Math.min(n, o.length), l = v({
+    amountOfImages: w,
+    maxColumns: r
+  }), a = `${100 / ((l == null ? void 0 : l.amountOfRows) || 1)}%`;
+  return /* @__PURE__ */ B(i, { ...u.root, children: o.slice(0, n).map((t, y) => {
+    const R = b(y, c, l);
+    return /* @__PURE__ */ I(f, { width: R, height: a, ...u.containerBox, children: [
+      e && /* @__PURE__ */ B(S, { image: t == null ? void 0 : t.src, blur: 30, grayscale: 0, ...u.blurredBackground }),
+      /* @__PURE__ */ B(M, { component: "img", src: t == null ? void 0 : t.src, alt: (t == null ? void 0 : t.alt) || (t == null ? void 0 : t.src), amountOfImages: w, showSingleStretched: s, onError: (C) => h(C, 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 = {
+z.defaultProps = {
   images: [],
   maxColumns: 2,
   maxImages: 4,
@@ -143,9 +88,9 @@ f.defaultProps = {
   showLastRowStretched: !0,
   showBlurredBackground: !1,
   onError: () => null,
-  components: $,
+  components: O,
   componentsProps: void 0
 };
 export {
-  f as default
+  z as default
 };

package/dist/es/general/ImageCollage/index.d.ts

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

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

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

package/dist/es/general/MediaIcon/MediaIcon.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: any;
+    PlaceholderIcon: any;
+    AudioIcon: any;
+    ImageIcon: any;
+    VideoIcon: any;
+    DocumentIcon: any;
+    DataIcon: any;
+    PdfIcon: any;
+    NoneIcon: any;
+    FileIcon: any;
+};
+export interface MediaIconProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * - `FileIcon` is shown if not any of listed strings
+     * - `PlaceholderIcon` is show if not a string type
+     */
+    type?: 'video' | 'audio' | 'image' | 'document' | 'data' | 'pdf' | 'none' | string;
+}
+declare const MediaIcon: React.FC<MediaIconProps>;
+export default MediaIcon;

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

@@ -1,101 +1,61 @@
-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)(() => ({
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import g from "@mui/icons-material/esm/Audiotrack";
+import s from "@mui/icons-material/esm/Image";
+import D from "@mui/icons-material/esm/InsertDriveFile";
+import v from "@mui/icons-material/esm/Movie";
+import x from "@mui/icons-material/esm/NoteAdd";
+import A from "@mui/icons-material/esm/Article";
+import h from "@mui/icons-material/esm/DataThresholding";
+import y from "@mui/icons-material/esm/PictureAsPdf";
+import T from "@mui/icons-material/esm/QuestionMark";
+import B from "@mui/material/Box";
+import { styled as C } from "@mui/material/styles";
+const E = C(B)(() => ({
   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,
+})), F = {
+  Root: E,
+  PlaceholderIcon: x,
+  AudioIcon: g,
+  ImageIcon: s,
+  VideoIcon: v,
+  DocumentIcon: A,
+  DataIcon: h,
+  PdfIcon: y,
+  NoneIcon: T,
+  FileIcon: D
+}, N = ["video", "audio", "image", "document", "data", "pdf", "none"], R = ({
+  type: e,
+  components: c,
   componentsProps: o
-}) {
+}) => {
   const {
-    Root: d,
-    PlaceholderIcon: m,
-    AudioIcon: r,
-    ImageIcon: f,
-    VideoIcon: l,
-    DocumentIcon: p,
+    Root: t,
+    PlaceholderIcon: I,
+    AudioIcon: d,
+    ImageIcon: a,
+    VideoIcon: r,
+    DocumentIcon: m,
     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 }))
+    PdfIcon: f,
+    NoneIcon: l,
+    FileIcon: M
+  } = c, n = (e || "").toLowerCase();
+  return /* @__PURE__ */ p(t, { component: "span", ...o.root, children: [
+    n === "video" && /* @__PURE__ */ i(r, { ...o.videoIcon }),
+    n === "audio" && /* @__PURE__ */ i(d, { ...o.audioIcon }),
+    n === "image" && /* @__PURE__ */ i(a, { ...o.imageIcon }),
+    n === "document" && /* @__PURE__ */ i(m, { ...o.documentIcon }),
+    n === "data" && /* @__PURE__ */ i(u, { ...o.dataIcon }),
+    n === "pdf" && /* @__PURE__ */ i(f, { ...o.pdfIcon }),
+    n === "none" && /* @__PURE__ */ i(l, { ...o.noneIcon }),
+    !N.includes(n) && (typeof e == "string" ? /* @__PURE__ */ i(M, { ...o.fileIcon }) : /* @__PURE__ */ i(I, { ...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 = {
+R.defaultProps = {
   type: void 0,
-  components: R,
+  components: F,
   componentsProps: void 0
 };
 export {
-  i as default
+  R as default
 };

package/dist/es/general/MediaIcon/index.d.ts

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

package/dist/es/general/MenuItem/MenuItem.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { MenuItem as MuiMenuItem, ListItemText as MuiListItemText, Typography as MuiTypography } from '@mui/material';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiTypography: typeof MuiTypography;
+declare const defaultComponents: {
+    Root: typeof MuiMenuItem;
+    ListItemText: typeof MuiListItemText;
+    Typography: typeof StyledMuiTypography;
+};
+export interface VdtMenuItemProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Value for menu item
+     */
+    value?: string;
+    /**
+     * Label for menu item
+     */
+    label?: string;
+    /**
+     * Add a count to display for the menu item
+     */
+    count?: number;
+    /**
+     * Set if menu item is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLLIElement>, payload: {
+        value: string;
+    }) => void;
+}
+declare const VdtMenuItem: React.FC<VdtMenuItemProps>;
+export default VdtMenuItem;

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

@@ -1,91 +1,53 @@
-import { jsxs as T, jsx as i } from "react/jsx-runtime";
-import e from "prop-types";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
 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)(({
+import f from "@mui/material/ListItemText";
+import g from "@mui/material/Typography";
+import { styled as u } from "@mui/material/styles";
+const x = u(g)(({
   theme: t
 }) => ({
   height: 24,
   lineHeight: 1.7,
   marginLeft: t.spacing(2)
-})), b = {
+})), T = {
   Root: h,
-  ListItemText: g,
-  Typography: I
-};
-function r({
+  ListItemText: f,
+  Typography: x
+}, I = ({
   value: t,
-  label: p,
-  count: n,
-  selected: s,
+  label: r,
+  count: e,
+  selected: n,
   onClick: m,
-  components: l,
+  components: d,
   componentsProps: o,
-  ...c
-}) {
+  /* Special case:
+   * Spreads additional props to root element.
+   * Mui's Menu relies on being passed several DOM props to function properly within inputs
+   */
+  ...p
+}) => {
   const {
-    Root: a,
-    ListItemText: y,
-    Typography: d
-  } = l;
-  return /* @__PURE__ */ T(a, { value: t, selected: s, onClick: (f) => m(f, {
+    Root: s,
+    ListItemText: l,
+    Typography: a
+  } = d;
+  return /* @__PURE__ */ c(s, { value: t, selected: n, onClick: (y) => m(y, {
     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 })
+  }), ...p, ...o.root, children: [
+    /* @__PURE__ */ i(l, { ...o.listItemText, children: r || t }),
+    e !== void 0 && /* @__PURE__ */ i(a, { variant: "body2", color: "text.secondary", ...o.typography, children: e })
   ] });
-}
-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 = {
+I.defaultProps = {
   value: void 0,
   label: void 0,
   count: void 0,
   selected: !1,
   onClick: void 0,
-  components: b,
+  components: T,
   componentsProps: void 0
 };
 export {
-  r as default
+  I as default
 };

package/dist/es/general/MenuItem/index.d.ts

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

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

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { Box as MuiBox } from '@mui/material';
+import VdtCompactLabel from '../CompactLabel';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledMuiBoxLine: typeof MuiBox;
+declare const StyledMuiBoxContent: typeof MuiBox;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    CompactLabel: typeof VdtCompactLabel;
+    LineBox: typeof StyledMuiBoxLine;
+    ContentBox: typeof StyledMuiBoxContent;
+};
+export interface ScrubLineProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Set the position of the scrub line
+     */
+    position?: number;
+    /**
+     * Custom offset the scrub line from the mouse pointer
+     */
+    offset?: number;
+    /**
+     * Callback for clicking expand button
+     */
+    show?: boolean;
+    /**
+     * Add a label next to the scrub line
+     */
+    label?: string;
+    /**
+     * Children for component
+     */
+    children?: ReactNode;
+    /**
+     * Callback for when mouse moving over children/content
+     */
+    onMouseMove?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        position: number;
+        contentWidth: number;
+    }) => void;
+    /**
+     * Callback for mouse leaving children/content
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        position: number;
+        contentWidth: number;
+    }) => void;
+    /**
+     * Callback for mouse leaving children/content
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        position: number;
+        contentWidth: number;
+    }) => void;
+}
+declare const ScrubLine: React.FC<ScrubLineProps>;
+export default ScrubLine;