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

package/dist/es/entity/EntityList/EntityList.js

@@ -0,0 +1,211 @@
+import { jsxs as a, jsx as m, Fragment as V } from "react/jsx-runtime";
+import { useMemo as q } from "react";
+import t from "prop-types";
+import w from "@mui/material/List";
+import A from "@mui/material/ListSubheader";
+import F from "@mui/material/Typography";
+import { styled as N } from "@mui/material/styles";
+import c from "@vidispine/proptypes";
+import { uuidv4 as l } from "../../_utils/uuidv4.js";
+import "clsx";
+import { showSlot as $ } from "../../_utils/showSlot.js";
+import z from "../../collection/CollectionListItem/index.js";
+import p from "../../item/ItemListItem/index.js";
+function B() {
+  return /* @__PURE__ */ m(F, { children: "No entities found..." });
+}
+const G = N(w)(() => ({
+  width: "100%"
+})), H = {
+  Root: G,
+  ListSubheader: A,
+  CollectionListItem: z,
+  ItemListItem: p,
+  LoadingListItem: p
+};
+function d({
+  entities: s,
+  header: f,
+  primary: u,
+  secondary: y,
+  avatarVariant: L,
+  dense: I,
+  amountLoading: h,
+  isLoading: n,
+  onListItemClick: O,
+  onListItemDelete: b,
+  emptySlot: g,
+  components: T,
+  componentsProps: e
+}) {
+  const {
+    Root: S,
+    ListSubheader: C,
+    CollectionListItem: j,
+    ItemListItem: v,
+    LoadingListItem: k
+  } = T, M = [...Array(Math.max(h, 0)).keys()].map(() => ({
+    key: l()
+  })), r = q(() => s.map(({
+    item: i,
+    collection: o
+  }) => ({
+    key: l(),
+    itemType: i,
+    collectionType: o
+  })) || [], [s]), x = ({
+    itemType: i,
+    collectionType: o
+  }) => i ? {
+    component: v,
+    props: {
+      itemType: i,
+      ...e.listItem,
+      ...e.itemListItem
+    }
+  } : o ? {
+    component: j,
+    props: {
+      collectionType: o,
+      ...e.listItem,
+      ...e.collectionListItem
+    }
+  } : {
+    // Default to an ItemListItem (use it as loading list)
+    component: k,
+    props: {
+      collectionType: o,
+      ...e.listItem,
+      ...e.loadingListItem
+    }
+  };
+  return /* @__PURE__ */ a(S, { dense: I, ...e.root, children: [
+    /* @__PURE__ */ m(C, { ...e.listSubheader, children: f }),
+    /* @__PURE__ */ a(V, { children: [
+      !n && r.length === 0 && $(g),
+      (n ? M : r).map(({
+        key: i,
+        itemType: o,
+        collectionType: E
+      }) => {
+        const {
+          component: D,
+          props: R
+        } = x({
+          itemType: o,
+          collectionType: E
+        });
+        return /* @__PURE__ */ m(D, { primary: u, secondary: y, avatarVariant: L, isLoading: n, onClick: O, onDelete: b, ...R }, i);
+      })
+    ] })
+  ] });
+}
+const J = t.shape({
+  item: c.ItemType
+}), K = t.shape({
+  collection: c.CollectionType
+});
+d.propTypes = {
+  /**
+   * The entities to show in the list
+   *
+   * `EntityItemType = { item: VidispinePropTypes.ItemType }`
+   * `EntityCollectionType = { collection: VidispinePropTypes.CollectionType }`
+   *
+   */
+  entities: t.arrayOf(t.objectOf(t.oneOfType([J, K]))),
+  /**
+   * Add a list header
+   */
+  header: t.string,
+  /**
+   * Primary text for the list item
+   *
+   * Set to *field name* the value should be extracted from
+   * or set *function* which will get entity as argument
+   *
+   * Defaults to id of entity
+   */
+  primary: t.oneOfType([t.string, t.func]),
+  /**
+   * Secondary text for the list item
+   *
+   * Set to *field name* the value should be extracted from
+   * or set *function* which will get entity as argument
+   *
+   * Defaults to undefined
+   */
+  secondary: t.oneOfType([t.string, t.func]),
+  /**
+   * Variant/shapes for the list item avatars
+   */
+  avatarVariant: t.oneOf(["circular", "rounded", "square"]),
+  /**
+   * If list should be displayed as dense
+   */
+  dense: t.bool,
+  /**
+   * Show skeleton list items as loading state
+   */
+  isLoading: t.bool,
+  /**
+   * amount of list items to show when loading
+   */
+  amountLoading: t.number,
+  /**
+   * Callback for ListItem click event
+   *
+   * Set to `undefined` to disable
+   */
+  onListItemClick: t.func,
+  /**
+   * Callback for ListItem click event
+   *
+   * Set to `undefined` to disable
+   */
+  onListItemDelete: t.func,
+  /**
+   * Shown when list is empty
+   */
+  emptySlot: t.oneOfType([t.elementType, t.node]),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: t.shape({
+    Root: t.elementType,
+    ListSubheader: t.elementType,
+    CollectionListItem: t.elementType,
+    ItemListItem: t.elementType,
+    LoadingListItem: t.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: t.shape({
+    root: t.instanceOf(Object),
+    listSubheader: t.instanceOf(Object),
+    collectionListItem: t.instanceOf(Object),
+    itemListItem: t.instanceOf(Object),
+    loadingListItem: t.instanceOf(Object),
+    listItem: t.instanceOf(Object)
+  })
+};
+d.defaultProps = {
+  entities: [],
+  header: void 0,
+  primary: void 0,
+  secondary: void 0,
+  avatarVariant: "square",
+  dense: !1,
+  isLoading: !1,
+  amountLoading: 3,
+  onListItemClick: void 0,
+  onListItemDelete: void 0,
+  emptySlot: B,
+  components: H,
+  componentsProps: void 0
+};
+export {
+  d as default
+};

package/dist/es/entity/EntityList/index.js

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

package/dist/es/entity/EntityListItem/components/EntityListItemAvatar.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import y from "@mui/material/ListItemAvatar";
+import { parseMetadataType as l } from "@vidispine/vdt-js";
+import c from "../../EntityAvatar/index.js";
+function x({
+  itemType: t,
+  collectionType: e,
+  isLoading: r,
+  variant: m,
+  entityAvatar: o,
+  ...n
+}) {
+  const {
+    metadata: p
+  } = t || e || {}, s = t && "item" || e && "collection", {
+    mediaType: d,
+    mimeType: a
+  } = l(p, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  }), f = typeof a == "string" ? a.split("/")[0] : void 0;
+  return /* @__PURE__ */ i(y, { ...n, children: /* @__PURE__ */ i(c, { entityType: s, mediaType: d || f, isLoading: r, variant: m, ...o }) });
+}
+export {
+  x as default
+};

package/dist/es/entity/EntityListItem/components/EntityListItemButton.js

@@ -0,0 +1,27 @@
+import { jsx as u } from "react/jsx-runtime";
+import { Fragment as a } from "react";
+import f from "@mui/material/ListItemButton";
+import { getEntityProp as d } from "../../_utils/getEntityProp.js";
+import "@vidispine/vdt-js";
+function y({
+  itemType: i,
+  collectionType: m,
+  onClick: o,
+  isLoading: r,
+  ...t
+}) {
+  const n = !r && !!o, e = n ? f : a, l = n ? {
+    role: void 0,
+    onClick: (c) => o(c, d({
+      itemType: i,
+      collectionType: m
+    })),
+    ...t
+  } : {
+    children: t == null ? void 0 : t.children
+  };
+  return /* @__PURE__ */ u(e, { ...l });
+}
+export {
+  y as default
+};

package/dist/es/entity/EntityListItem/components/EntityListItemSecondaryAction.js

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+import c from "@mui/icons-material/esm/Delete";
+import d from "@mui/material/IconButton";
+import l from "@mui/material/ListItemSecondaryAction";
+import p from "@mui/material/Skeleton";
+import { getEntityProp as a } from "../../_utils/getEntityProp.js";
+import "@vidispine/vdt-js";
+function f() {
+  return /* @__PURE__ */ t("div", { style: {
+    paddingRight: 10
+  }, children: /* @__PURE__ */ t(p, { width: 18, height: 36 }) });
+}
+function S({
+  itemType: r,
+  collectionType: n,
+  onDelete: e,
+  isLoading: i,
+  ...m
+}) {
+  return /* @__PURE__ */ t(l, { ...m, children: e && (i ? /* @__PURE__ */ t(f, {}) : /* @__PURE__ */ t(d, { onClick: (o) => (o.stopPropagation(), o.preventDefault(), e(o, a({
+    itemType: r,
+    collectionType: n
+  }))), children: /* @__PURE__ */ t(c, {}) })) });
+}
+export {
+  S as default
+};

package/dist/es/entity/EntityListItem/components/EntityListItemText.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import p from "@mui/material/ListItemText";
+import i from "@mui/material/Skeleton";
+import { getEntityText as n } from "../../_utils/getEntityText.js";
+function y({
+  itemType: t,
+  collectionType: r,
+  primary: s,
+  secondary: e,
+  isLoading: m,
+  ...x
+}) {
+  const {
+    id: f
+  } = t || r || {}, a = n(s, {
+    itemType: t,
+    collectionType: r
+  }), d = n(e, {
+    itemType: t,
+    collectionType: r
+  });
+  return /* @__PURE__ */ o(p, { primary: m ? /* @__PURE__ */ o(i, { width: 60 }) : a || f, secondary: m ? /* @__PURE__ */ o(i, { width: 120 }) : d, ...x });
+}
+export {
+  y as default
+};

package/dist/es/entity/EntityTableRow/components/EntityTableCellAvatar.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import f from "@mui/material/TableCell";
+import { parseMetadataType as y } from "@vidispine/vdt-js";
+import c from "../../EntityAvatar/index.js";
+function x({
+  itemType: e,
+  collectionType: t,
+  isLoading: i,
+  variant: r,
+  entityAvatar: m,
+  ...n
+}) {
+  const {
+    metadata: l
+  } = e || t || {}, p = e && "item" || t && "collection", {
+    mediaType: d,
+    mimeType: a
+  } = y(l, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  }), s = typeof a == "string" ? a.split("/")[0] : void 0;
+  return /* @__PURE__ */ o(f, { padding: "checkbox", ...n, children: /* @__PURE__ */ o(c, { entityType: p, mediaType: d || s, variant: r, isLoading: i, ...m || {} }) });
+}
+export {
+  x as default
+};

package/dist/es/entity/EntityTableRow/components/EntityTableCellCheckbox.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "@mui/material/TableCell";
+import l from "@mui/material/Skeleton";
+function c({
+  isLoading: t,
+  checkbox: m,
+  itemType: p,
+  children: o,
+  ...i
+}) {
+  return /* @__PURE__ */ e(r, { padding: "checkbox", ...i, children: t ? /* @__PURE__ */ e(l, { sx: {
+    width: "18px",
+    height: "36px",
+    margin: "auto"
+  } }) : o });
+}
+export {
+  c as default
+};

package/dist/es/entity/_utils/getEntityProp.js

@@ -0,0 +1,11 @@
+const g = ({
+  itemType: t,
+  collectionType: r
+}) => t && {
+  itemType: t
+} || r && {
+  collectionType: r
+} || {};
+export {
+  g as getEntityProp
+};

package/dist/es/entity/_utils/getEntityText.js

@@ -0,0 +1,34 @@
+import { parseMetadataType as e } from "@vidispine/vdt-js";
+const i = (t, {
+  itemType: n,
+  collectionType: r
+}) => {
+  const f = typeof t == "function" && t;
+  if (f)
+    return n ? f({
+      itemType: n
+    }) : r ? f({
+      collectionType: r
+    }) : void 0;
+  const a = typeof t == "string" && t;
+  if (a) {
+    const {
+      metadata: u
+    } = n || r || {}, {
+      [a]: s
+    } = e(u, {
+      flat: !0,
+      arrayOnSingleValue: !1
+    });
+    return s;
+  }
+  if (a === "id") {
+    const {
+      id: u
+    } = n || r || {};
+    return u;
+  }
+};
+export {
+  i as getEntityText
+};

package/dist/es/general/AvatarMenu/AvatarMenu.js

@@ -0,0 +1,153 @@
+import { jsxs as A, jsx as a } from "react/jsx-runtime";
+import { useState as I } from "react";
+import e from "prop-types";
+import T from "@mui/material/Box";
+import x from "@mui/material/Menu";
+import { styled as l, darken as j } from "@mui/material/styles";
+import S from "./components/Avatar.js";
+import W from "./components/MenuItem.js";
+const P = l(S)(({
+  theme: t,
+  characters: o
+}) => ({
+  transition: "color .2s ease-out",
+  backgroundColor: t.palette.primary.main,
+  "&:hover": {
+    backgroundColor: j(t.palette.primary.main, 0.3)
+  },
+  ...(o == null ? void 0 : o.length) > 1 ? {
+    fontSize: `${(o == null ? void 0 : o.length) === 2 ? "16" : "12"}px`,
+    lineHeight: 0,
+    fontWeight: 600
+  } : {
+    fontWeight: 500
+  }
+})), z = l(W, {
+  shouldForwardProp: (t) => t !== "minWidth"
+})(({
+  minWidth: t
+}) => ({
+  minWidth: t
+})), B = l(x)({
+  "& .MuiPaper-root": {
+    // Reduce the "opacity"
+    backgroundImage: "linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"
+  }
+}), R = {
+  Root: T,
+  Avatar: P,
+  Menu: B,
+  MenuItem: z
+};
+function c({
+  type: t,
+  characters: o,
+  variant: f,
+  minWidth: g,
+  options: v,
+  onAvatarClick: m,
+  onOptionClick: u,
+  components: y,
+  componentsProps: r
+}) {
+  const {
+    Root: O,
+    Avatar: h,
+    Menu: M,
+    MenuItem: b
+  } = y, [s, p] = I(null), k = (n) => {
+    p(n.currentTarget), m && m(n);
+  }, d = () => {
+    p(null);
+  }, C = (n, i) => {
+    u && u(n, i), d();
+  };
+  return /* @__PURE__ */ A(O, { ...r.root, children: [
+    /* @__PURE__ */ a(h, { onClick: k, type: t, variant: f, characters: o, ...r.avatar }),
+    /* @__PURE__ */ a(M, { anchorEl: s, keepMounted: !0, open: !!s, onClose: d, PaperProps: {
+      square: !0,
+      ...r.menu.PaperProps || {}
+    }, anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center",
+      ...r.menu.anchorOrigin || {}
+    }, transformOrigin: {
+      vertical: "top",
+      horizontal: "center",
+      ...r.menu.transformOrigin || {}
+    }, ...r.menu, children: v.map((n) => /* @__PURE__ */ a(b, { onClick: (i) => C(i, n), option: n, minWidth: g, ...r.menuItem }, n.name || n.label)) })
+  ] });
+}
+c.propTypes = {
+  /**
+   * Type for avatar button icons
+   */
+  type: e.oneOf(["dots", "lines", "user"]),
+  /**
+   * Up to 3 characters to show inside avatar button (instead of icon)
+   */
+  characters: e.string,
+  /**
+   * Variant/shapes for the list item avatars
+   */
+  variant: e.oneOf(["circular", "rounded", "square"]),
+  /**
+   * Set min width of menu items
+   */
+  minWidth: e.string,
+  /**
+   * The menu options
+   */
+  options: e.arrayOf(e.shape({
+    icon: e.elementType,
+    name: e.string,
+    label: e.string,
+    secondaryLabel: e.string
+  })),
+  // Callbacks
+  /**
+   * Callback for clicking on the avatar
+   *
+   * Note: Will open menu when clicked
+   */
+  onAvatarClick: e.func,
+  /**
+   * Callback for clicking on an option
+   *
+   * Note: Will close menu when an option is clicked
+   */
+  onOptionClick: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    Avatar: e.elementType,
+    Menu: e.elementType,
+    MenuItem: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    avatar: e.instanceOf(Object),
+    menu: e.instanceOf(Object),
+    menuItem: e.instanceOf(Object)
+  })
+};
+c.defaultProps = {
+  type: "dots",
+  characters: void 0,
+  variant: "circular",
+  minWidth: "200px",
+  options: [],
+  onAvatarClick: void 0,
+  onOptionClick: void 0,
+  components: R,
+  componentsProps: void 0
+};
+export {
+  c as default
+};

package/dist/es/general/AvatarMenu/components/Avatar.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import i from "@mui/icons-material/esm/MoreVert";
+import m from "@mui/icons-material/esm/Menu";
+import s from "@mui/icons-material/esm/Person";
+import a from "@mui/material/Avatar";
+import f from "@mui/material/IconButton";
+function b({
+  type: e,
+  characters: r,
+  ...n
+}) {
+  let o;
+  switch (e) {
+    case "dots": {
+      o = i;
+      break;
+    }
+    case "lines": {
+      o = m;
+      break;
+    }
+    case "user":
+    default:
+      o = s;
+  }
+  return /* @__PURE__ */ t(a, { component: f, ...n, children: r && typeof r == "string" ? r.substring(0, 3) : /* @__PURE__ */ t(o, {}) });
+}
+export {
+  b as default
+};

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

@@ -0,0 +1,29 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import c from "@mui/material/MenuItem";
+import a from "@mui/material/ListItemIcon";
+import l from "@mui/material/ListItemText";
+import s from "@mui/material/Typography";
+import { styled as p } from "@mui/material/styles";
+const d = p(s)(({
+  theme: r
+}) => ({
+  marginLeft: r.spacing(3)
+}));
+function g({
+  option: r,
+  ...n
+}) {
+  const {
+    icon: t,
+    label: i,
+    secondaryLabel: e
+  } = r || {};
+  return /* @__PURE__ */ m(c, { ...n, children: [
+    t && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(t, { fontSize: "small" }) }),
+    /* @__PURE__ */ o(l, { children: i }),
+    e && /* @__PURE__ */ o(d, { variant: "body2", color: "text.secondary", children: e })
+  ] });
+}
+export {
+  g as default
+};

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