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

package/dist/es/collection/CollectionList/CollectionList.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { List as MuiList, ListSubheader as MuiListSubheader } from '@mui/material';
+import type { CollectionListType, CollectionType } from '@vidispine/types';
+import VdtCollectionListItem from '../CollectionListItem';
+import type { PropsFrom, WithOverrideProps } from '../../_types';
+declare const StyledMuiList: typeof MuiList;
+declare const defaultComponents: {
+    Root: typeof StyledMuiList;
+    ListSubheader: typeof MuiListSubheader;
+    ListItem: typeof VdtCollectionListItem;
+};
+export interface CollectionListProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The `CollectionListType` to show in the list
+     */
+    collectionListType?: CollectionListType;
+    /**
+     * Add a list header
+     */
+    header?: 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
+     */
+    primary?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * 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?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * Variant/shapes for the list item avatars
+     */
+    avatarVariant?: 'circular' | 'rounded' | 'square';
+    /**
+     * If list should be displayed as dense
+     */
+    dense?: boolean;
+    /**
+     * Show skeleton list items as loading state
+     */
+    isLoading?: boolean;
+    /**
+     * amount of list items to show when loading
+     */
+    amountLoading?: number;
+    /**
+     * Callback for ListItem click event
+     *
+     * Set to `undefined` to disable
+     */
+    onListItemClick?: PropsFrom<typeof VdtCollectionListItem>['onClick'];
+    /**
+     * Callback for ListItem delete event
+     *
+     * Set to `undefined` to disable
+     */
+    onListItemDelete?: PropsFrom<typeof VdtCollectionListItem>['onDelete'];
+    /**
+     * Shown when list is empty
+     */
+    emptySlot?: () => JSX.Element;
+}
+declare const CollectionList: React.FC<CollectionListProps>;
+export default CollectionList;

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

@@ -1,148 +1,63 @@
-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 { jsxs as a, jsx as m, Fragment as k } from "react/jsx-runtime";
+import { useMemo as C } from "react";
+import b from "@mui/material/List";
+import x from "@mui/material/ListSubheader";
+import j from "@mui/material/Typography";
+import { styled as w } from "@mui/material/styles";
+import { uuidv4 as d } 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)(() => ({
+import { showSlot as D } from "../../_utils/showSlot.js";
+import R from "../CollectionListItem/index.js";
+const q = () => /* @__PURE__ */ m(j, { children: "No collections found..." }), A = w(b)(() => ({
   width: "100%",
   padding: 0
-})), A = {
-  Root: w,
-  ListSubheader: M,
-  ListItem: V
-};
-function d({
+})), E = {
+  Root: A,
+  ListSubheader: x,
+  ListItem: R
+}, F = ({
   collectionListType: t,
-  header: l,
-  primary: c,
-  secondary: u,
-  avatarVariant: f,
-  dense: y,
+  header: n,
+  primary: l,
+  secondary: p,
+  avatarVariant: u,
+  dense: f,
   amountLoading: h,
-  isLoading: i,
-  onListItemClick: L,
-  onListItemDelete: b,
+  isLoading: e,
+  onListItemClick: c,
+  onListItemDelete: y,
   emptySlot: S,
-  components: I,
-  componentsProps: n
-}) {
+  components: L,
+  componentsProps: i
+}) => {
   const {
-    Root: g,
-    ListSubheader: O,
-    ListItem: v
-  } = I, T = [...Array(Math.max(h, 0)).keys()].map(() => ({
-    key: p()
-  })), m = k(() => {
+    Root: v,
+    ListSubheader: I,
+    ListItem: M
+  } = L, g = [...Array(Math.max(h, 0)).keys()].map(() => ({
+    key: d()
+  })), s = C(() => {
     var o;
     return ((o = t == null ? void 0 : t.collection) == null ? void 0 : o.map((r) => ({
-      key: p(),
+      key: d(),
       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(({
+  return /* @__PURE__ */ a(v, { dense: f, ...i.root, children: [
+    /* @__PURE__ */ m(I, { ...i.listSubheader, children: n }),
+    /* @__PURE__ */ a(k, { children: [
+      !e && s.length === 0 && D(S),
+      (e ? g : s).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))
+      }) => /* @__PURE__ */ m(M, { collectionType: r, primary: l, secondary: p, avatarVariant: u, isLoading: e, onClick: c, onDelete: y, ...i.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 = {
+F.defaultProps = {
   collectionListType: {},
   header: void 0,
-  primary: void 0,
+  primary: "id",
   secondary: void 0,
   avatarVariant: "square",
   dense: !1,
@@ -151,9 +66,9 @@ d.defaultProps = {
   onListItemClick: void 0,
   onListItemDelete: void 0,
   emptySlot: q,
-  components: A,
+  components: E,
   componentsProps: void 0
 };
 export {
-  d as default
+  F as default
 };

package/dist/es/collection/CollectionList/index.d.ts

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

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

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

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { ListItem as MuiListItem } from '@mui/material';
+import type { CollectionType } from '@vidispine/types';
+import VdtListItemAvatar from '../../entity/EntityListItem/components/EntityListItemAvatar';
+import VdtListItemButton from '../../entity/EntityListItem/components/EntityListItemButton';
+import VdtListItemSecondaryAction from '../../entity/EntityListItem/components/EntityListItemSecondaryAction';
+import VdtListItemText from '../../entity/EntityListItem/components/EntityListItemText';
+import type { WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: typeof MuiListItem;
+    ListItemButton: typeof VdtListItemButton;
+    ListItemAvatar: typeof VdtListItemAvatar;
+    ListItemText: typeof VdtListItemText;
+    ListItemSecondaryAction: typeof VdtListItemSecondaryAction;
+};
+export interface CollectionListItemProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The CollectionType to display as a list item
+     */
+    collectionType?: 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
+     */
+    primary?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * 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?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * Variant/shapes for the Avatar
+     */
+    avatarVariant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Set true to show a skeleton placeholder
+     */
+    isLoading?: boolean;
+    /**
+     * Add event handler when list item is clicked
+     *
+     * Set `undefined` to disable
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        collectionType?: CollectionType;
+    }) => void;
+    /**
+     * Show a delete icon as secondary action
+     *
+     * Set `undefined` to hide
+     */
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        collectionType?: CollectionType;
+    }) => void;
+}
+declare const CollectionListItem: React.FC<CollectionListItemProps>;
+export default CollectionListItem;

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

@@ -1,122 +1,52 @@
-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,
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import u from "@mui/material/ListItem";
+import y from "../../entity/EntityListItem/components/EntityListItemAvatar.js";
+import A from "../../entity/EntityListItem/components/EntityListItemButton.js";
+import x from "../../entity/EntityListItem/components/EntityListItemSecondaryAction.js";
+import B from "../../entity/EntityListItem/components/EntityListItemText.js";
+const C = {
+  Root: u,
+  ListItemButton: A,
+  ListItemAvatar: y,
+  ListItemText: B,
+  ListItemSecondaryAction: x
+}, E = ({
+  collectionType: e,
+  primary: s,
+  secondary: n,
+  avatarVariant: I,
+  isLoading: t,
+  onClick: m,
+  onDelete: d,
+  components: l,
   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 })
+    Root: c,
+    ListItemAvatar: L,
+    ListItemText: v,
+    ListItemButton: r,
+    ListItemSecondaryAction: f
+  } = l;
+  return /* @__PURE__ */ a(c, { disablePadding: !t && !!m && !!r, ...i.root, children: [
+    /* @__PURE__ */ a(r, { collectionType: e, onClick: m, isLoading: t, ...i.listItemButton, children: [
+      /* @__PURE__ */ o(L, { collectionType: e, variant: I, isLoading: t, ...i.listItemAvatar }),
+      /* @__PURE__ */ o(v, { collectionType: e, primary: s, secondary: n, isLoading: t, ...i.listItemText })
     ] }),
-    /* @__PURE__ */ n(L, { collectionType: o, onDelete: I, isLoading: e, ...i.listItemSecondaryAction })
+    /* @__PURE__ */ o(f, { collectionType: e, onDelete: d, isLoading: t, ...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 = {
+E.defaultProps = {
   collectionType: void 0,
-  primary: void 0,
+  primary: "id",
   secondary: void 0,
   avatarVariant: "square",
   isLoading: !1,
   onClick: void 0,
   onDelete: void 0,
-  components: j,
+  components: C,
   componentsProps: void 0
 };
 export {
-  m as default
+  E as default
 };

package/dist/es/collection/CollectionListItem/index.d.ts

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

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

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

package/dist/es/collection/CollectionRepresentativeThumbnail/CollectionRepresentativeThumbnail.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { CollectionType } from '@vidispine/types';
+import { CornerLabelPlacer as VdtCornerLabelPlacer, ImageCollage as VdtImageCollage, BlurredBackground as VdtBlurredBackground } from '../../general';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledVdtBlurredBackground: typeof VdtBlurredBackground;
+declare const StyledVdtImageCollage: typeof VdtImageCollage;
+declare const StyledMuiImageBox: typeof MuiBox;
+declare const StyledVdtCornerLabelPlacer: typeof VdtCornerLabelPlacer;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    BlurredBackground: typeof StyledVdtBlurredBackground;
+    ImageCollage: typeof StyledVdtImageCollage;
+    ImageBox: typeof StyledMuiImageBox;
+    CornerLabelPlacer: typeof StyledVdtCornerLabelPlacer;
+};
+export interface CollectionRepresentativeThumbnailProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * A VidiCore Collection
+     *
+     */
+    collectionType?: CollectionType;
+    /**
+     * Show a blurred background behind the thumbnail
+     */
+    showBlurredBackground?: boolean;
+    /**
+     * Show multiple or thumbnail combined to one
+     */
+    showCombined?: boolean;
+    /**
+     * Add a label above thumbnail
+     */
+    label?: string;
+    /**
+     * Add event handler when the thumbnail is clicked
+     *
+     * Set `undefined` to disable
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        collectionType: CollectionType;
+    }) => void;
+}
+declare const CollectionRepresentativeThumbnail: React.FC<CollectionRepresentativeThumbnailProps>;
+export default CollectionRepresentativeThumbnail;