@vidispine/vdt-mui 23.3.0-pre.1 → 23.3.0-pre.3

package/dist/es/entity/EntityCard/components/EntityCardContent.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { CardContentProps as MuiCardContentProps } from '@mui/material';
+import type { CollectionType, ItemType } from '@vidispine/types';
+export interface EntityCardContentProps extends Omit<MuiCardContentProps, 'itemType'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    content?: string | (({ itemType, collectionType, }: {
+        itemType?: ItemType;
+        collectionType?: CollectionType;
+    }) => string);
+    showTooltip?: boolean;
+    WebkitLineClamp?: React.CSSProperties['WebkitLineClamp'];
+}
+declare const EntityCardContent: React.FC<EntityCardContentProps>;
+export default EntityCardContent;

package/dist/es/entity/EntityCard/components/EntityCardContent.js

@@ -1,34 +1,36 @@
-import { jsx as o } from "react/jsx-runtime";
-import d from "@mui/material/CardContent";
-import m from "@mui/material/Tooltip";
-import a from "@mui/material/Typography";
-import f from "@mui/material/Box";
-import { styled as y } from "@mui/material/styles";
-import { getEntityText as c } from "../../_utils/getEntityText.js";
-const h = y(a, {
-  shouldForwardProp: (t) => t !== "WebkitLineClamp"
-})(({
-  WebkitLineClamp: t
-}) => ({
-  display: "-webkit-box",
-  WebkitBoxOrient: "vertical",
-  overflow: "hidden",
-  WebkitLineClamp: t
-}));
-function k({
-  itemType: t,
-  collectionType: i,
-  content: r,
-  showTooltip: n = !1,
-  WebkitLineClamp: l = 3,
-  ...p
-}) {
-  const e = c(r, {
-    itemType: t,
-    collectionType: i
+import { jsx as t } from "react/jsx-runtime";
+import m from "@mui/material/CardContent";
+import a from "@mui/material/Tooltip";
+import d from "@mui/material/Box";
+import { getEntityText as f } from "../../_utils/getEntityText.js";
+import c from "../_components/Typography.js";
+const s = ({
+  itemType: e,
+  collectionType: n,
+  content: o,
+  showTooltip: i,
+  WebkitLineClamp: p,
+  ...l
+}) => {
+  const r = f(o, {
+    itemType: e,
+    collectionType: n
   });
-  return r ? /* @__PURE__ */ o(d, { ...p, children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(m, { title: e || "", enterDelay: 500, open: n, children: /* @__PURE__ */ o(h, { WebkitLineClamp: l, variant: "body2", color: "textSecondary", component: "p", children: e }) }) }) }) : null;
-}
+  return o ? /* @__PURE__ */ t(m, { ...l, children: /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(a, { title: r || "", enterDelay: 500, open: i, children: /* @__PURE__ */ t(
+    c,
+    {
+      webkitLineClamp: p,
+      variant: "body2",
+      color: "textSecondary",
+      component: "p",
+      children: r
+    }
+  ) }) }) }) : null;
+};
+s.defaultProps = {
+  showTooltip: !1,
+  WebkitLineClamp: 3
+};
 export {
-  k as default
+  s as default
 };

package/dist/es/entity/EntityCard/components/EntityCardHeader.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { CardHeaderProps as MuiCardHeaderProps } from '@mui/material';
+import type { CollectionType, ItemType } from '@vidispine/types';
+import { EntityAvatarProps } from '../../EntityAvatar/EntityAvatar';
+import type { AvatarMenuProps } from '../../../general/AvatarMenu/AvatarMenu';
+export interface EntityCardHeaderProps extends Omit<MuiCardHeaderProps, 'itemType' | 'title' | 'subheader'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    title?: string | (({ itemType, collectionType, }: {
+        itemType?: ItemType;
+        collectionType?: CollectionType;
+    }) => string);
+    subheader?: string | (({ itemType, collectionType, }: {
+        itemType?: ItemType;
+        collectionType?: CollectionType;
+    }) => string);
+    menuOptions?: AvatarMenuProps['options'];
+    onOptionClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, payload: {
+        option: AvatarMenuProps['options'][number];
+    } & ({
+        itemType?: ItemType;
+    } | {
+        collectionType?: CollectionType;
+    })) => void;
+    entityAvatar?: EntityAvatarProps;
+    avatarMenu?: AvatarMenuProps;
+}
+declare const EntityCardHeader: React.FC<EntityCardHeaderProps>;
+export default EntityCardHeader;

package/dist/es/entity/EntityCard/components/EntityCardHeader.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import H from "@mui/material/CardHeader";
-import { styled as p } from "@mui/material/styles";
+import { jsx as n } from "react/jsx-runtime";
+import k from "@mui/material/CardHeader";
+import { styled as m } from "@mui/material/styles";
 import "../../EntityIcon/index.js";
-import P from "../../EntityAvatar/index.js";
+import H from "../../EntityAvatar/index.js";
 import "../../EntityList/index.js";
 import S from "../../../general/AvatarMenu/index.js";
 import "../../../general/BlurredBackground/index.js";
@@ -17,14 +17,15 @@ import "../../../general/MenuItem/index.js";
 import "../../../general/ScrubLine/index.js";
 import "../../../general/Sort/index.js";
 import "../../../general/TablePagination/index.js";
+import "../../../general/Form/index.js";
 import "../../../general/ThemeContext/ThemeContext.js";
 import { getEntityProp as W } from "../../_utils/getEntityProp.js";
-import { getEntityText as r } from "../../_utils/getEntityText.js";
-const E = p(H)(({
+import { getEntityText as i } from "../../_utils/getEntityText.js";
+const E = m(k)(({
   avatar: t,
-  action: o
+  action: r
 }) => {
-  const i = t ? 56 : 0, a = o ? 40 + 16 : 0;
+  const e = t ? 56 : 0, p = r ? 40 + 16 : 0;
   return {
     display: "inline-block",
     padding: 16,
@@ -34,7 +35,7 @@ const E = p(H)(({
     },
     "& .MuiCardHeader-content": {
       float: "left",
-      width: `calc(100% - ${i}px - ${a}px)`
+      width: `calc(100% - ${e}px - ${p}px)`
     },
     "& .MuiCardHeader-action": {
       marginTop: 0,
@@ -42,11 +43,11 @@ const E = p(H)(({
     },
     float: "none"
   };
-}), M = p(P)(({
+}), A = m(H)(({
   theme: t
 }) => ({
   backgroundColor: t.palette.mode === "light" ? "rgba(0, 0, 0, 0.54)" : "#fff"
-})), A = p(S)(({
+})), O = m(S)(({
   theme: t
 }) => ({
   marginLeft: 16,
@@ -57,45 +58,42 @@ const E = p(H)(({
       backgroundColor: "rgba(255, 255, 255, 0.08)"
     }
   }
-}));
-function Z({
+})), T = ({
   itemType: t,
-  collectionType: o,
-  title: i,
-  subheader: a,
-  menuOptions: m,
+  collectionType: r,
+  title: e,
+  subheader: p,
+  menuOptions: a,
   onOptionClick: c,
-  entityAvatar: f = {},
-  avatarMenu: n = {},
+  entityAvatar: f,
+  avatarMenu: o,
   ...h
-}) {
+}) => {
   var d, l, s;
-  const {
-    id: g
-  } = t || o || {}, u = r(i, {
+  const g = i(e, {
     itemType: t,
-    collectionType: o
-  }), C = r(a, {
+    collectionType: r
+  }), y = i(p, {
     itemType: t,
-    collectionType: o
-  }), b = (l = (d = r("mimeType", {
+    collectionType: r
+  }), C = (l = (d = i("mimeType", {
     itemType: t
-  })) == null ? void 0 : d.split("/")) == null ? void 0 : l[0], y = r("mediaType", {
+  })) == null ? void 0 : d.split("/")) == null ? void 0 : l[0], b = i("mediaType", {
     itemType: t
-  }) || b, v = (x, k) => {
+  }) || C, u = (x, P) => {
     c(x, {
-      option: k,
+      option: P,
       ...W({
         itemType: t,
-        collectionType: o
+        collectionType: r
       })
     });
   };
-  return /* @__PURE__ */ e(E, { title: u || g, subheader: C, titleTypographyProps: {
+  return /* @__PURE__ */ n(E, { title: g, subheader: y, titleTypographyProps: {
     noWrap: !0
   }, subheaderTypographyProps: {
     noWrap: !0
-  }, avatar: /* @__PURE__ */ e(M, { entityType: t && "item" || o && "collection", mediaType: y, ...f }), action: m && /* @__PURE__ */ e(A, { minWidth: "unset", options: m, onOptionClick: v, componentsProps: {
+  }, avatar: /* @__PURE__ */ n(A, { entityType: t && "item" || r && "collection" || "library", mediaType: b, ...f ?? {} }), action: a && /* @__PURE__ */ n(O, { minWidth: "unset", options: a, onOptionClick: u, componentsProps: {
     menu: {
       anchorOrigin: {
         vertical: "bottom",
@@ -105,11 +103,12 @@ function Z({
         vertical: "top",
         horizontal: "right"
       },
-      ...((s = n.componentsProps) == null ? void 0 : s.menu) || {}
+      ...((s = o == null ? void 0 : o.componentsProps) == null ? void 0 : s.menu) || {}
     },
-    ...n.componentsProps || {}
-  }, ...n }), ...h });
-}
+    ...(o == null ? void 0 : o.componentsProps) || {}
+  }, ...o ?? {} }), ...h });
+};
+T.defaultProps = {};
 export {
-  Z as default
+  T as default
 };

package/dist/es/entity/EntityIcon/EntityIcon.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { Folder as MuiFolderIcon, NoteAdd as MuiNoteAddIcon } from '@mui/icons-material';
+import { Box as MuiBox } from '@mui/material';
+import { MediaIcon as VdtMediaIcon } from '../../general';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledMuiNoteAddIcon: StyledComponent<typeof MuiNoteAddIcon>;
+declare const StyledMuiFolderIcon: StyledComponent<typeof MuiFolderIcon>;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    ItemIcon: typeof VdtMediaIcon;
+    LibraryIcon: typeof VdtMediaIcon;
+    PlaceholderIcon: typeof StyledMuiNoteAddIcon;
+    CollectionIcon: typeof StyledMuiFolderIcon;
+};
+export interface EntityIconProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * `placeholderIcon` is shown if entityType is undefined or not a string
+     */
+    entityType?: 'item' | 'collection' | 'library';
+    /**
+     * Optional, use mediaType icon for item and library
+     */
+    mediaType?: 'video' | 'audio' | 'image' | 'document' | 'data' | 'pdf' | 'none' | string;
+}
+declare const EntityIcon: React.FC<EntityIconProps>;
+export default EntityIcon;

package/dist/es/entity/EntityIcon/EntityIcon.js

@@ -1,13 +1,12 @@
-import { jsxs as b, jsx as i } from "react/jsx-runtime";
-import o from "prop-types";
-import u from "@mui/icons-material/esm/Folder";
-import h from "@mui/icons-material/esm/NoteAdd";
-import l from "@mui/icons-material/esm/LibraryBooks";
-import O from "@mui/icons-material/esm/LibraryMusic";
-import L from "@mui/icons-material/esm/PhotoLibrary";
-import j from "@mui/icons-material/esm/VideoLibrary";
-import x from "@mui/material/Box";
-import { styled as c } from "@mui/material/styles";
+import { jsxs as u, jsx as c } from "react/jsx-runtime";
+import y from "@mui/icons-material/esm/Folder";
+import f from "@mui/icons-material/esm/NoteAdd";
+import m from "@mui/icons-material/esm/LibraryBooks";
+import b from "@mui/icons-material/esm/LibraryMusic";
+import h from "@mui/icons-material/esm/PhotoLibrary";
+import x from "@mui/icons-material/esm/VideoLibrary";
+import L from "@mui/material/Box";
+import { styled as n } from "@mui/material/styles";
 import "../../general/AvatarMenu/index.js";
 import "../../general/BlurredBackground/index.js";
 import "../../general/CalendarPicker/index.js";
@@ -16,92 +15,59 @@ import "../../general/CompactLabel/index.js";
 import "../../general/CornerLabelPlacer/index.js";
 import "../../general/ExpandButton/index.js";
 import "../../general/ImageCollage/index.js";
-import m from "../../general/MediaIcon/index.js";
+import e from "../../general/MediaIcon/index.js";
 import "../../general/MenuItem/index.js";
 import "../../general/ScrubLine/index.js";
 import "../../general/Sort/index.js";
 import "../../general/TablePagination/index.js";
+import "../../general/Form/index.js";
 import "../../general/ThemeContext/ThemeContext.js";
-const C = c(x)(({
-  theme: e
+const M = n(L)(({
+  theme: o
 }) => ({
   display: "flex",
-  color: e.palette.primary.main
-})), M = c(h, {
-  shouldForwardProp: (e) => e !== "mediaType"
-})(() => ({})), T = c(u, {
-  shouldForwardProp: (e) => e !== "mediaType"
-})(() => ({})), P = {
-  Root: C,
-  ItemIcon: m,
-  LibraryIcon: m,
-  PlaceholderIcon: M,
-  CollectionIcon: T
-};
-function p({
-  entityType: e,
-  mediaType: r,
-  components: a,
-  componentsProps: t
-}) {
+  color: o.palette.primary.main
+})), C = n(f, {
+  shouldForwardProp: (o) => o !== "mediaType"
+})(() => ({})), F = n(y, {
+  shouldForwardProp: (o) => o !== "mediaType"
+})(() => ({})), w = {
+  Root: M,
+  ItemIcon: e,
+  LibraryIcon: e,
+  PlaceholderIcon: C,
+  CollectionIcon: F
+}, B = ({
+  entityType: o,
+  mediaType: t,
+  components: l,
+  componentsProps: r
+}) => {
   const {
-    Root: d,
+    Root: p,
     PlaceholderIcon: I,
-    ItemIcon: s,
-    CollectionIcon: y,
-    LibraryIcon: f
-  } = a, n = e == null ? void 0 : e.toLowerCase();
-  return /* @__PURE__ */ b(d, { component: "span", ...t.root, children: [
-    n === "item" && /* @__PURE__ */ i(s, { type: r, ...t.itemIcon }),
-    n === "collection" && /* @__PURE__ */ i(y, { mediaType: r, ...t.collectionIcon }),
-    n === "library" && /* @__PURE__ */ i(f, { type: r, ...t.libraryIcon, components: {
-      PlaceholderIcon: l,
-      FileIcon: l,
-      AudioIcon: O,
-      VideoIcon: j,
-      ImageIcon: L,
-      ...t.libraryIcon.components || {}
+    ItemIcon: d,
+    CollectionIcon: a,
+    LibraryIcon: s
+  } = l, i = o == null ? void 0 : o.toLowerCase();
+  return /* @__PURE__ */ u(p, { component: "span", ...r.root, children: [
+    i === "item" && /* @__PURE__ */ c(d, { type: t, ...r.itemIcon }),
+    i === "collection" && /* @__PURE__ */ c(a, { type: t, ...r.collectionIcon }),
+    i === "library" && /* @__PURE__ */ c(s, { type: t, ...r.libraryIcon, components: {
+      PlaceholderIcon: m,
+      FileIcon: m,
+      AudioIcon: b,
+      VideoIcon: x,
+      ImageIcon: h,
+      ...r.libraryIcon.components || {}
     } }),
-    !["item", "collection", "library"].includes(n) && /* @__PURE__ */ i(I, { mediaType: r, ...t.placeholderIcon })
+    !["item", "collection", "library"].includes(i) && /* @__PURE__ */ c(I, { type: t, ...r.placeholderIcon })
   ] });
-}
-p.propTypes = {
-  /**
-   * `placeholderIcon` is shown if entityType is undefined or not a string
-   */
-  entityType: o.oneOf(["item", "collection", "library"]),
-  /**
-   * Optional, use mediaType icon for item and library
-   */
-  mediaType: o.oneOf(["audio", "video", "image", "document", "data", "pdf", "none"]),
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: o.shape({
-    Root: o.elementType,
-    PlaceholderIcon: o.elementType,
-    ItemIcon: o.elementType,
-    CollectionIcon: o.elementType,
-    LibraryIcon: o.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: o.shape({
-    root: o.instanceOf(Object),
-    placeholderIcon: o.instanceOf(Object),
-    itemIcon: o.instanceOf(Object),
-    collectionIcon: o.instanceOf(Object),
-    libraryIcon: o.instanceOf(Object)
-  })
 };
-p.defaultProps = {
-  entityType: void 0,
-  mediaType: void 0,
-  components: P,
+B.defaultProps = {
+  components: w,
   componentsProps: void 0
 };
 export {
-  p as default
+  B as default
 };

package/dist/es/entity/EntityIcon/index.d.ts

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

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

@@ -4,7 +4,7 @@ import m from "./EntityIcon.js";
 const o = "EntityIcon", t = `Vdt${o}`, i = r(t)(m), s = n(i, {
   name: t,
   overridesResolver: (d, e) => e.root
-})(() => ({}));
+})({});
 s.displayName = o;
 export {
   s as default

package/dist/es/entity/EntityList/EntityList.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import { List as MuiList, ListSubheader as MuiListSubheader } from '@mui/material';
+import type { ItemType, CollectionType } from '@vidispine/types';
+import VdtCollectionListItem from '../../collection/CollectionListItem';
+import VdtItemListItem from '../../item/ItemListItem';
+import type { PropsFrom, WithOverrideProps } from '../../_types';
+declare const StyledMuiList: typeof MuiList;
+declare const defaultComponents: {
+    Root: typeof StyledMuiList;
+    ListSubheader: typeof MuiListSubheader;
+    CollectionListItem: typeof VdtCollectionListItem;
+    ItemListItem: typeof VdtItemListItem;
+    LoadingListItem: typeof VdtItemListItem;
+    ListItem: (props?: PropsFrom<typeof VdtItemListItem> & PropsFrom<typeof VdtCollectionListItem>) => null;
+};
+export interface EntityListProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The entities to show in the list
+     */
+    entities?: ({
+        item?: ItemType;
+    } | {
+        collection?: CollectionType;
+    })[];
+    /**
+     * 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 entity as argument
+     */
+    primary?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => 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 | (({ itemType }: {
+        itemType: ItemType;
+    }) => 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?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        itemType?: ItemType;
+        collectionType?: CollectionType;
+    }) => void;
+    /**
+     * Callback for ListItem click event
+     *
+     * Set to `undefined` to disable
+     */
+    onListItemDelete?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        itemType?: ItemType;
+        collectionType?: CollectionType;
+    }) => void;
+    /**
+     * Shown when list is empty
+     */
+    emptySlot?: () => JSX.Element;
+}
+declare const EntityList: React.FC<EntityListProps>;
+export default EntityList;