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

package/dist/es/media/MediaCardActions.js

@@ -0,0 +1,47 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { CardActions as d, IconButton as e } from "@material-ui/core";
+import { grey as l, red as m } from "@material-ui/core/colors";
+import { Visibility as f, Share as u } from "@material-ui/icons";
+import p from "./MediaCardCheckbox.js";
+function j({
+  hover: i,
+  checked: s,
+  handleChecked: n,
+  primaryColor: o = l[500],
+  secondaryColor: r = m.A200,
+  ChecboxComponent: c = p
+}) {
+  return /* @__PURE__ */ a(d, { disableSpacing: !0, children: [
+    /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(
+      f,
+      {
+        style: {
+          color: i ? r : o,
+          transition: "color .2s ease-out"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(
+      u,
+      {
+        style: {
+          color: i ? r : o,
+          transition: "color .2s ease-out"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      c,
+      {
+        checked: s,
+        handleChecked: n,
+        hover: i,
+        primaryColor: o,
+        secondaryColor: r
+      }
+    )
+  ] });
+}
+export {
+  j as default
+};

package/dist/es/media/MediaCardAvatar/MediaCardAvatar.js

@@ -0,0 +1,73 @@
+import { jsx as r } from "react/jsx-runtime";
+import u from "clsx";
+import o from "prop-types";
+import { Avatar as d } from "@material-ui/core";
+import { Skeleton as y } from "@material-ui/lab";
+import a from "../../general/MimeTypeIcon/index.js";
+const C = {
+  root: {
+    transition: "background-color .2s ease-out"
+  },
+  colorDefaultSkeleton: {
+    backgroundColor: "unset"
+  }
+};
+function s({
+  className: n,
+  classes: l,
+  avatar: i,
+  skeleton: t = !1,
+  variant: e = "square",
+  MimeTypeComponent: p = a,
+  MimeTypeProps: c = {},
+  SkeletonProps: m = {},
+  AvatarProps: f = {}
+}) {
+  return /* @__PURE__ */ r(
+    d,
+    {
+      className: u(n, "VdtMediaCardAvatar-root"),
+      style: {
+        transition: "background-color .2s ease-out"
+      },
+      variant: e,
+      classes: { colorDefault: t ? l.colorDefaultSkeleton : void 0 },
+      ...f,
+      children: t ? /* @__PURE__ */ r(
+        y,
+        {
+          variant: e === "square" ? "rect" : e,
+          height: "100%",
+          width: "100%",
+          ...m
+        }
+      ) : /* @__PURE__ */ r(p, { mimeType: i, ...c })
+    }
+  );
+}
+s.propTypes = {
+  className: o.string,
+  classes: o.objectOf(o.string),
+  avatar: o.string,
+  skeleton: o.bool,
+  variant: o.oneOf(["circle", "circular", "rounded", "square"]),
+  MimeTypeComponent: o.elementType,
+  MimeTypeProps: o.objectOf(o.any),
+  SkeletonProps: o.objectOf(o.any),
+  AvatarProps: o.objectOf(o.any)
+};
+s.defaultProps = {
+  className: void 0,
+  classes: {},
+  avatar: void 0,
+  skeleton: !1,
+  variant: "square",
+  MimeTypeComponent: a,
+  MimeTypeProps: {},
+  SkeletonProps: {},
+  AvatarProps: {}
+};
+export {
+  s as default,
+  C as styles
+};

package/dist/es/media/MediaCardAvatar/index.js

@@ -0,0 +1,7 @@
+import { withStyles as a } from "@material-ui/core";
+import t, { styles as r } from "./MediaCardAvatar.js";
+const e = a(r, { name: "VdtMediaCardAvatar" })(t);
+e.displayName = "MediaCardAvatar";
+export {
+  e as default
+};

package/dist/es/media/MediaCardCard.js

@@ -0,0 +1,63 @@
+import { jsx as i } from "react/jsx-runtime";
+import n from "clsx";
+import { withStyles as l, emphasize as p, Card as s } from "@material-ui/core";
+const c = (r) => ({
+  root: {
+    width: "inherit",
+    maxWidth: 320,
+    height: "inherit",
+    borderColor: "transparent",
+    borderWidth: 0.7,
+    borderStyle: "solid",
+    transition: "border-color .2s ease-out",
+    "&:hover": {
+      "& .MuiIconButton-root": {
+        color: r.palette.primary.main
+      },
+      "& .MuiAvatar-square": {
+        color: r.palette.type === "dark" ? r.palette.grey[500] : r.palette.grey[100],
+        backgroundColor: r.palette.primary.main
+      }
+    },
+    "& .MuiCardHeader-root": {
+      backgroundColor: r.palette.type === "dark" ? p(r.palette.background.paper, 0.1) : void 0,
+      color: r.palette.type === "dark" ? r.palette.common.white : void 0
+    }
+  },
+  checked: {
+    borderColor: r.palette.secondary.main
+  }
+});
+function u({
+  className: r,
+  classes: o,
+  checked: t,
+  handleHover: a,
+  children: e,
+  innerProps: C,
+  ...d
+}) {
+  return /* @__PURE__ */ i(
+    s,
+    {
+      className: n(
+        o.root,
+        {
+          [o.checked]: t
+        },
+        "VdtMediaCardCard-root",
+        r
+      ),
+      onMouseEnter: a,
+      onMouseLeave: a,
+      raised: !1,
+      elevation: 0,
+      ...d,
+      children: e
+    }
+  );
+}
+const k = l(c, { name: "VdtMediaCardCard" })(u);
+export {
+  k as default
+};

package/dist/es/media/MediaCardCheckbox.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Checkbox as r } from "@material-ui/core";
+function i({ checked: o, handleChecked: t }) {
+  return /* @__PURE__ */ e(
+    r,
+    {
+      checked: o,
+      onChange: t,
+      style: {
+        marginLeft: "auto",
+        transition: "color .2s ease-out"
+      }
+    }
+  );
+}
+export {
+  i as default
+};

package/dist/es/media/MediaCardContent.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "lodash.truncate";
+import { CardContent as i, Box as d, Tooltip as l, Typography as n } from "@material-ui/core";
+function m({ content: r, truncateContentLength: e = 120 }) {
+  return /* @__PURE__ */ o(i, { style: { paddingBottom: 0 }, children: /* @__PURE__ */ o(d, { height: 60, children: /* @__PURE__ */ o(
+    l,
+    {
+      title: r,
+      enterDelay: 500,
+      open: r.length > e ? void 0 : !1,
+      children: /* @__PURE__ */ o(n, { variant: "body2", color: "textSecondary", component: "p", children: t(r, { length: e }) })
+    }
+  ) }) });
+}
+export {
+  m as default
+};

package/dist/es/media/MediaCardDurationLabel.js

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import s from "./MediaCardThumbnailLabel/index.js";
+const u = (t) => {
+  const o = Math.floor(t / 3600), n = Math.floor(t % 3600 / 60), r = Math.floor(t % 60);
+  return [
+    o.toString().padStart(2, "0"),
+    n.toString().padStart(2, "0"),
+    r.toString().padStart(2, "0")
+  ].join(":");
+};
+function c({ style: t, classes: o, className: n, label: r }) {
+  if (!r)
+    return null;
+  const a = Number(r);
+  if (a === 0)
+    return null;
+  const e = u(a);
+  return /* @__PURE__ */ i(
+    s,
+    {
+      className: n,
+      classes: o,
+      style: t,
+      label: e
+    }
+  );
+}
+export {
+  c as default
+};

package/dist/es/media/MediaCardFullWidth/MediaCardFullWidth.js

@@ -0,0 +1,196 @@
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import q from "clsx";
+import e from "prop-types";
+import { Grid as n, Collapse as z } from "@material-ui/core";
+import { MediaCardProvider as B } from "../../contexts/MediaCardContext.js";
+import { useToggleOnClick as C } from "../../utils.js";
+import D from "../MediaCardThumbnail/index.js";
+import I from "./components/MediaCardExpand.js";
+import J from "./components/MediaCardFullWidthCard.js";
+import h from "./components/MediaCardFullWidthContent.js";
+import K from "./components/MediaCardFullWidthHeader.js";
+const re = (d) => ({
+  root: {
+    width: "100%",
+    padding: d.spacing(1)
+  },
+  overflow: {
+    overflow: "hidden"
+  },
+  grow: {
+    flexGrow: 1
+  },
+  pushRight: {
+    marginLeft: "auto"
+  }
+});
+function x({
+  className: d,
+  classes: t,
+  onClick: y,
+  onExpand: g,
+  expanded: O,
+  defaultExpanded: w,
+  onSelect: b,
+  selected: T,
+  defaultSelected: P,
+  title: v,
+  subheader: E,
+  image: j,
+  content: p,
+  expandedContent: M,
+  CardComponent: S,
+  CardProps: F,
+  HeaderComponent: l,
+  HeaderProps: W,
+  ThumbnailComponent: s,
+  ThumbnailProps: H,
+  ContentComponent: c,
+  ContentProps: N,
+  ExpandedContentComponent: f,
+  ExpandedContentProps: R,
+  ExpandComponent: m,
+  ExpandProps: k,
+  ActionsComponent: u,
+  ActionsProps: A,
+  ...G
+}) {
+  const [a, L] = C(
+    w,
+    g,
+    O
+  ), [i, V] = C(
+    P,
+    b,
+    T
+  );
+  return /* @__PURE__ */ o(B, { expanded: a, selected: i, ...G, children: /* @__PURE__ */ r(S, { className: q(d, t.root), selected: i, ...F, children: [
+    /* @__PURE__ */ r(n, { container: !0, wrap: "nowrap", children: [
+      /* @__PURE__ */ o(n, { item: !0, children: s && /* @__PURE__ */ o(
+        s,
+        {
+          image: j,
+          onClick: y,
+          height: 150,
+          width: 200,
+          ...H
+        }
+      ) }),
+      /* @__PURE__ */ r(n, { container: !0, wrap: "nowrap", classes: { root: t.overflow }, direction: "column", children: [
+        /* @__PURE__ */ r(n, { container: !0, wrap: "nowrap", justifyContent: "space-between", children: [
+          l && /* @__PURE__ */ o(n, { item: !0, classes: { root: t.overflow }, children: /* @__PURE__ */ o(
+            l,
+            {
+              title: v,
+              subheader: E,
+              ...W
+            }
+          ) }),
+          u && /* @__PURE__ */ o(n, { item: !0, classes: { root: t.pushRight }, children: /* @__PURE__ */ o(
+            u,
+            {
+              onSelect: V,
+              selected: i,
+              ...A
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r(
+          n,
+          {
+            container: !0,
+            wrap: "nowrap",
+            justifyContent: "space-between",
+            classes: { root: t.grow },
+            children: [
+              c && /* @__PURE__ */ o(n, { item: !0, children: /* @__PURE__ */ o(c, { content: p, ...N, children: p }) }),
+              m && /* @__PURE__ */ o(n, { item: !0, classes: { root: t.pushRight }, children: /* @__PURE__ */ o(m, { expanded: a, onExpand: L, ...k }) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    f && /* @__PURE__ */ o(z, { className: t.expandedContent, in: a, timeout: "auto", unmountOnExit: !0, children: /* @__PURE__ */ o(
+      f,
+      {
+        content: M,
+        truncateContentRows: 0,
+        ...R
+      }
+    ) })
+  ] }) });
+}
+x.propTypes = {
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.any),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  onClick: e.func,
+  onExpand: e.func,
+  expanded: e.bool,
+  defaultExpanded: e.bool,
+  selected: e.bool,
+  defaultSelected: e.bool,
+  onSelect: e.func,
+  title: e.string,
+  subheader: e.string,
+  image: e.string,
+  content: e.string,
+  expandedContent: e.string,
+  CardComponent: e.elementType,
+  HeaderComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ThumbnailComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ContentComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ActionsComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ExpandComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ExpandedContentComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  CardProps: e.objectOf(e.any),
+  HeaderProps: e.objectOf(e.any),
+  ThumbnailProps: e.objectOf(e.any),
+  ContentProps: e.objectOf(e.any),
+  ExpandProps: e.objectOf(e.any),
+  ExpandedContentProps: e.objectOf(e.any),
+  ActionsProps: e.objectOf(e.any)
+};
+x.defaultProps = {
+  className: "VdtMediaCardFullWidth",
+  classes: {},
+  onClick: void 0,
+  onExpand: void 0,
+  expanded: void 0,
+  defaultExpanded: !1,
+  selected: void 0,
+  onSelect: void 0,
+  defaultSelected: !1,
+  title: void 0,
+  subheader: void 0,
+  image: void 0,
+  content: void 0,
+  expandedContent: void 0,
+  CardComponent: J,
+  HeaderComponent: K,
+  ThumbnailComponent: D,
+  ContentComponent: h,
+  ExpandComponent: I,
+  ExpandedContentComponent: h,
+  ActionsComponent: !1,
+  CardProps: {},
+  HeaderProps: {},
+  ThumbnailProps: {},
+  ContentProps: {},
+  ExpandProps: {},
+  ExpandedContentProps: {},
+  ActionsProps: {}
+};
+export {
+  x as default,
+  re as styles
+};

package/dist/es/media/MediaCardFullWidth/components/MediaCardExpand.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import o from "clsx";
+import { withStyles as i, IconButton as m } from "@material-ui/core";
+import { ExpandMore as s } from "@material-ui/icons";
+const p = (t) => ({
+  root: {
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-end"
+  },
+  expand: {
+    transform: "rotate(0deg)",
+    marginLeft: "auto",
+    transition: t.transitions.create("transform", {
+      duration: t.transitions.duration.shortest
+    })
+  },
+  expanded: {
+    transform: "rotate(180deg)"
+  },
+  IconComponent: {}
+});
+function x({
+  classes: t,
+  className: a,
+  expanded: r,
+  onExpand: e,
+  IconComponent: d = s
+}) {
+  return /* @__PURE__ */ n("div", { className: o(a, t.root), children: /* @__PURE__ */ n(
+    m,
+    {
+      className: o(t.expand, {
+        [t.expanded]: r
+      }),
+      onClick: e,
+      children: /* @__PURE__ */ n(d, { className: t.IconComponent })
+    }
+  ) });
+}
+const C = i(p, { name: "VdtMediaCardExpand" })(x);
+export {
+  C as default
+};

package/dist/es/media/MediaCardFullWidth/components/MediaCardFullWidthCard.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import l from "clsx";
+import { withStyles as i, Card as s } from "@material-ui/core";
+const n = (r) => ({
+  root: {
+    width: "100%",
+    borderColor: "transparent",
+    borderWidth: 0.7,
+    borderStyle: "solid",
+    transition: "border-color .2s ease-out"
+  },
+  selected: {
+    borderColor: r.palette.secondary.main
+  }
+});
+function C({ className: r, classes: t, selected: o, children: d, ...e }) {
+  return /* @__PURE__ */ a(
+    s,
+    {
+      className: l(
+        t.root,
+        {
+          [t.selected]: o
+        },
+        "VdtMediaCardFullWidthCard-root",
+        r
+      ),
+      elevation: 2,
+      ...e,
+      children: d
+    }
+  );
+}
+const h = i(n, { name: "VdtMediaCardFullWidthCard" })(C);
+export {
+  h as default
+};

package/dist/es/media/MediaCardFullWidth/components/MediaCardFullWidthContent.js

@@ -0,0 +1,60 @@
+import { jsx as i } from "react/jsx-runtime";
+import d from "clsx";
+import { withStyles as y, CardContent as c, Tooltip as s, Typography as g } from "@material-ui/core";
+const h = (o) => ({
+  root: {
+    paddingBottom: o.spacing(1),
+    paddingTop: o.spacing(1),
+    "&:last-child": {
+      paddingBottom: o.spacing(1)
+    }
+  },
+  Typography: {
+    ...o.typography.body2,
+    color: o.palette.text.secondary
+  },
+  truncate: {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  },
+  Tooltip: {}
+});
+function m({
+  classes: o,
+  className: l,
+  content: a,
+  truncateContentRows: t = 3,
+  TooltipProps: r = {},
+  TypographyProps: p = {},
+  enterDelay: n = 500,
+  component: e = "p"
+}) {
+  return /* @__PURE__ */ i(c, { className: d(l, o.root), children: /* @__PURE__ */ i(
+    s,
+    {
+      className: o.Tooltip,
+      title: a,
+      enterDelay: n,
+      ...r,
+      children: /* @__PURE__ */ i(
+        g,
+        {
+          className: d(o.Typography, { [o.truncate]: t }),
+          component: e,
+          style: {
+            WebkitLineClamp: t === !1 ? void 0 : t
+          },
+          ...p,
+          children: a
+        }
+      )
+    }
+  ) });
+}
+const u = y(h, { name: "VdtMediaCardFullWidthContent" })(
+  m
+);
+export {
+  u as default
+};

package/dist/es/media/MediaCardFullWidth/components/MediaCardFullWidthHeader.js

@@ -0,0 +1,43 @@
+import { jsx as i } from "react/jsx-runtime";
+import { withStyles as p, CardHeader as l } from "@material-ui/core";
+const s = (d) => ({
+  root: {
+    paddingLeft: d.spacing(2),
+    paddingRight: d.spacing(2),
+    paddingTop: d.spacing(1),
+    paddingBottom: d.spacing(1),
+    overflow: "hidden"
+  },
+  content: {
+    overflow: "hidden"
+  }
+});
+function c({
+  classes: d,
+  className: o,
+  title: t,
+  titleTypographyProps: a = { noWrap: !0 },
+  subheader: n,
+  subheaderTypographyProps: r = { noWrap: !0 },
+  ...e
+}) {
+  return /* @__PURE__ */ i(
+    l,
+    {
+      className: o,
+      title: t,
+      titleTypographyProps: a,
+      subheader: n,
+      subheaderTypographyProps: r,
+      classes: {
+        root: d.root,
+        content: d.content
+      },
+      ...e
+    }
+  );
+}
+const f = p(s, { name: "MediaCardFullWidthHeader" })(c);
+export {
+  f as default
+};

package/dist/es/media/MediaCardFullWidth/index.js

@@ -0,0 +1,7 @@
+import { withStyles as t } from "@material-ui/core";
+import d, { styles as a } from "./MediaCardFullWidth.js";
+const e = t(a, { name: "VdtMediaCardFullWidth" })(d);
+e.displayName = "MediaCardFullWidth";
+export {
+  e as default
+};