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

package/dist/es/collection/CollectionCard/CollectionCard.js

@@ -0,0 +1,292 @@
+import { jsxs as J, jsx as o } from "react/jsx-runtime";
+import { useState as g } from "react";
+import e from "prop-types";
+import K from "@mui/material/CardActionArea";
+import N from "@mui/material/Collapse";
+import { styled as d } from "@mui/material/styles";
+import Q from "@vidispine/proptypes";
+import U from "../../entity/EntityCard/components/EntityCardActions.js";
+import X from "../../entity/EntityCard/components/EntityCardBase.js";
+import Y from "../../entity/EntityCard/components/EntityCardContent.js";
+import Z from "../../entity/EntityCard/components/EntityCardHeader.js";
+import _ from "./components/CollectionCardMedia.js";
+const $ = d(X, {
+  shouldForwardProp: (t) => t !== "horizontal"
+})(({
+  horizontal: t
+}) => ({
+  display: "grid",
+  ...t ? {
+    gridTemplateAreas: '"actionArea header" "actionArea content" "actionArea actions" "collapse collapse"',
+    gridTemplateColumns: "min-content auto"
+  } : {
+    gridTemplateAreas: '"header" "actionArea" "content" "actions" "collapse"'
+  }
+})), ee = d(Z, {
+  shouldForwardProp: (t) => t !== "horizontal"
+})(({
+  horizontal: t
+}) => ({
+  gridArea: "header",
+  ...t && {
+    "& .MuiCardHeader-avatar": {
+      display: "none"
+    }
+  }
+})), te = d(_, {
+  shouldForwardProp: (t) => !["horizontal", "mediaPadding", "mediaSize"].includes(t)
+})(({
+  theme: t,
+  horizontal: i,
+  mediaPadding: C,
+  mediaSize: c
+}) => ({
+  padding: t.spacing(C),
+  ...i ? {
+    width: c,
+    height: "100%"
+  } : {
+    height: c,
+    width: "100%"
+  }
+})), b = d(Y, {
+  shouldForwardProp: (t) => t !== "horizontal"
+})(({
+  horizontal: t,
+  theme: i
+}) => ({
+  gridArea: "content",
+  paddingTop: t ? 0 : i.spacing(2)
+})), ne = d(U)(() => ({
+  gridArea: "actions"
+})), ae = d(K)(() => ({
+  gridArea: "actionArea",
+  transition: "filter 0.25s ease-in-out",
+  "&:focus": {
+    filter: "brightness(120%)"
+  },
+  "& .MuiTouchRipple-root": {
+    zIndex: 10
+  }
+})), oe = d(N)(() => ({
+  gridArea: "collapse"
+})), de = {
+  Root: $,
+  CardHeader: ee,
+  CardMedia: te,
+  CardContent: b,
+  CardContentExpanded: b,
+  CardActions: ne,
+  CardActionArea: ae,
+  Collapse: oe
+};
+function v({
+  collectionType: t,
+  title: i,
+  subheader: C,
+  content: c,
+  expandedContent: f,
+  checked: s,
+  expanded: l,
+  horizontal: p,
+  mediaPadding: x,
+  mediaSize: T,
+  menuOptions: M,
+  actions: j,
+  onClick: u,
+  onCheck: m,
+  onExpand: h,
+  onOptionClick: k,
+  onActionClick: E,
+  components: S,
+  componentsProps: n
+}) {
+  const {
+    Root: H,
+    CardHeader: w,
+    CardActionArea: z,
+    CardMedia: P,
+    CardContent: R,
+    CardContentExpanded: V,
+    CardActions: F,
+    Collapse: L
+  } = S, [B, I] = g(s), [W, q] = g(l), D = (a) => {
+    var y;
+    const r = (y = a == null ? void 0 : a.target) == null ? void 0 : y.checked;
+    m && m(a, {
+      value: r,
+      collectionType: t
+    }), s === void 0 && I(r);
+  }, G = (a, {
+    value: r
+  }) => {
+    h && h(a, {
+      value: r,
+      collectionType: t
+    }), l === void 0 && q(r);
+  }, A = s !== void 0 ? s : B, O = l !== void 0 ? l : W;
+  return /* @__PURE__ */ J(H, { horizontal: p, checked: A, ...n.root, children: [
+    /* @__PURE__ */ o(w, { collectionType: t, title: i, subheader: C, menuOptions: M, horizontal: p, onOptionClick: k, ...n.cardHeader }),
+    /* @__PURE__ */ o(z, { disabled: u === void 0, onClick: (a) => u(a, {
+      collectionType: t
+    }), ...n.cardActionArea, children: /* @__PURE__ */ o(P, { collectionType: t, mediaSize: T, mediaPadding: x, horizontal: p, ...n.cardMedia }) }),
+    /* @__PURE__ */ o(R, { collectionType: t, content: c, horizontal: p, ...n.cardContent }),
+    /* @__PURE__ */ o(F, { collectionType: t, checked: A, expanded: O, actions: j, onCheck: m ? D : null, onExpand: f ? G : null, onActionClick: E, ...n.cardActions }),
+    /* @__PURE__ */ o(L, { in: O && f !== void 0, timeout: "auto", unmountOnExit: !0, ...n.collapse, children: /* @__PURE__ */ o(V, { collectionType: t, content: f, WebkitLineClamp: 0, ...n.cardContentExpanded }) })
+  ] });
+}
+v.propTypes = {
+  /**
+   * The Collection to show
+   */
+  collectionType: Q.CollectionType,
+  /**
+   * Title text for the collection card header
+   *
+   * Set to *field name* the value should be extracted from
+   * or set *function* which will get collectionType as argument
+   *
+   * Defaults to id of collection
+   */
+  title: e.oneOfType([e.string, e.func]),
+  /**
+   * Subheader text for the collection card header
+   *
+   * Set to *field name* the value should be extracted from
+   * or set *function* which will get collectionType as argument
+   *
+   * Defaults to undefined
+   */
+  subheader: e.oneOfType([e.string, e.func]),
+  /**
+   * Content text for the card body
+   *
+   * Set to *field name* the value should be extracted from
+   * or set *function* which will get collectionType as argument
+   *
+   * Defaults to undefined
+   */
+  content: e.oneOfType([e.string, e.func]),
+  /**
+   * Content text for the expanded card body
+   *
+   * Set to *field name* the value should be extracted from
+   * or set *function* which will get collectionType as argument
+   *
+   * Defaults to undefined which disables the expand functionality
+   */
+  expandedContent: e.oneOfType([e.string, e.func]),
+  /**
+   * Add padding around media (theme spacing value)
+   */
+  mediaPadding: e.number,
+  /**
+   * Set size for the card media
+   *
+   * `width` if horizontal: true, `height` otherwise
+   */
+  mediaSize: e.string,
+  /**
+   * Whether the media card is marked as checked or not
+   */
+  checked: e.bool,
+  /**
+   * Whether the expanded content is shown or not
+   */
+  expanded: e.bool,
+  /**
+   * Whether the card should have horizontal or standard layout
+   */
+  horizontal: e.bool,
+  /**
+   * A list of options for the card header action
+   */
+  menuOptions: e.arrayOf(e.instanceOf(Object)),
+  /**
+   * The list of actions to show
+   */
+  actions: e.arrayOf(e.shape({
+    name: e.string,
+    Icon: e.elementType,
+    iconProps: e.instanceOf(Object)
+  })),
+  // Callbacks
+  /**
+   * A function that handles the onClick event
+   */
+  onClick: e.func,
+  /**
+   * A function that handles the check box being clicked
+   */
+  onCheck: e.func,
+  /**
+   * A function that handles the expand button being clicked
+   */
+  onExpand: e.func,
+  /**
+   * Callback for clicking on option which will get the option as argument
+   */
+  onOptionClick: e.func,
+  /**
+   * Callback for clicking on an action which will get the action name as argument
+   */
+  onActionClick: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    CardHeader: e.elementType,
+    CardActionArea: e.elementType,
+    CardMedia: e.elementType,
+    CardContent: e.elementType,
+    CardContentExpanded: e.elementType,
+    CardActions: e.elementType,
+    Collapse: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    cardHeader: e.shape({
+      entityAvatar: e.instanceOf(Object),
+      avatarMenu: e.instanceOf(Object)
+    }),
+    cardActionArea: e.instanceOf(Object),
+    cardMedia: e.shape({
+      collectionRepresentativeThumbnail: e.instanceOf(Object)
+    }),
+    cardContent: e.instanceOf(Object),
+    cardContentExpanded: e.instanceOf(Object),
+    cardActions: e.shape({
+      expandButton: e.instanceOf(Object)
+    }),
+    collapse: e.instanceOf(Object)
+  })
+};
+v.defaultProps = {
+  collectionType: void 0,
+  onClick: void 0,
+  title: void 0,
+  subheader: void 0,
+  content: void 0,
+  expandedContent: void 0,
+  checked: void 0,
+  expanded: void 0,
+  horizontal: !1,
+  mediaSize: "200px",
+  mediaPadding: 0,
+  menuOptions: void 0,
+  actions: void 0,
+  onCheck: void 0,
+  onExpand: void 0,
+  onOptionClick: void 0,
+  onActionClick: void 0,
+  components: de,
+  componentsProps: void 0
+};
+export {
+  v as default
+};

package/dist/es/collection/CollectionCard/components/CollectionCardMedia.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import i from "@mui/material/CardMedia";
+import d from "../../CollectionRepresentativeThumbnail/index.js";
+function f({
+  collectionType: r,
+  showCombined: m,
+  collectionRepresentativeThumbnail: e = {},
+  ...t
+}) {
+  return /* @__PURE__ */ o(i, { ...t, children: /* @__PURE__ */ o(d, { collectionType: r, showCombined: !0, ...e }) });
+}
+export {
+  f as default
+};

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

package/dist/es/collection/CollectionList/CollectionList.js

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

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

package/dist/es/collection/CollectionListItem/CollectionListItem.js

@@ -0,0 +1,122 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import t from "prop-types";
+import v from "@mui/material/ListItem";
+import T from "@vidispine/proptypes";
+import A from "../../entity/EntityListItem/components/EntityListItemAvatar.js";
+import O from "../../entity/EntityListItem/components/EntityListItemButton.js";
+import b from "../../entity/EntityListItem/components/EntityListItemSecondaryAction.js";
+import x from "../../entity/EntityListItem/components/EntityListItemText.js";
+const j = {
+  Root: v,
+  ListItemButton: O,
+  ListItemAvatar: A,
+  ListItemText: x,
+  ListItemSecondaryAction: b
+};
+function m({
+  collectionType: o,
+  primary: c,
+  secondary: l,
+  avatarVariant: p,
+  isLoading: e,
+  onClick: r,
+  onDelete: I,
+  components: f,
+  componentsProps: i
+}) {
+  const {
+    Root: y,
+    ListItemAvatar: d,
+    ListItemText: u,
+    ListItemButton: a,
+    ListItemSecondaryAction: L
+  } = f;
+  return /* @__PURE__ */ s(y, { disablePadding: !e && !!r && !!a, ...i.root, children: [
+    /* @__PURE__ */ s(a, { collectionType: o, onClick: r, isLoading: e, ...i.listItemButton, children: [
+      /* @__PURE__ */ n(d, { collectionType: o, variant: p, isLoading: e, ...i.listItemAvatar }),
+      /* @__PURE__ */ n(u, { collectionType: o, primary: c, secondary: l, isLoading: e, ...i.listItemText })
+    ] }),
+    /* @__PURE__ */ n(L, { collectionType: o, onDelete: I, isLoading: e, ...i.listItemSecondaryAction })
+  ] });
+}
+m.propTypes = {
+  /**
+   * The CollectionType to display as a list item
+   */
+  collectionType: T.CollectionType,
+  /**
+   * 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 Avatar
+   */
+  avatarVariant: t.oneOf(["circular", "rounded", "square"]),
+  /**
+   * Set true to show a skeleton placeholder
+   */
+  isLoading: t.bool,
+  /**
+   * Add event handler when list item is clicked
+   *
+   * Set `undefined` to disable
+   */
+  onClick: t.func,
+  /**
+   * Show a delete icon as secondary action
+   *
+   * Set `undefined` to hide
+   */
+  onDelete: t.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: t.shape({
+    Root: t.elementType,
+    ListItemButton: t.elementType,
+    ListItemAvatar: t.elementType,
+    ListItemText: t.elementType,
+    ListItemSecondaryAction: t.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: t.shape({
+    root: t.instanceOf(Object),
+    listItemButton: t.instanceOf(Object),
+    listItemAvatar: t.shape({
+      entityAvatar: t.instanceOf(Object)
+    }),
+    listItemText: t.instanceOf(Object),
+    listItemSecondaryAction: t.instanceOf(Object)
+  })
+};
+m.defaultProps = {
+  collectionType: void 0,
+  primary: void 0,
+  secondary: void 0,
+  avatarVariant: "square",
+  isLoading: !1,
+  onClick: void 0,
+  onDelete: void 0,
+  components: j,
+  componentsProps: void 0
+};
+export {
+  m as default
+};

package/dist/es/collection/CollectionListItem/index.js

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