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

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

@@ -1,200 +1,105 @@
-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 { jsxs as l, jsx as m, Fragment as q } from "react/jsx-runtime";
+import { useMemo as A } from "react";
+import F from "@mui/material/List";
+import N from "@mui/material/ListSubheader";
+import T from "@mui/material/Typography";
+import { styled as V } from "@mui/material/styles";
+import { uuidv4 as n } 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)(() => ({
+import a from "../../item/ItemListItem/index.js";
+const B = () => /* @__PURE__ */ m(T, { children: "No entities found..." }), G = V(F)(() => ({
   width: "100%"
 })), H = {
   Root: G,
-  ListSubheader: A,
+  ListSubheader: N,
   CollectionListItem: z,
-  ItemListItem: p,
-  LoadingListItem: p
-};
-function d({
-  entities: s,
-  header: f,
-  primary: u,
-  secondary: y,
-  avatarVariant: L,
+  ItemListItem: a,
+  LoadingListItem: a,
+  ListItem: null
+  // for shared componentsProps
+}, J = ({
+  entities: r,
+  header: d,
+  primary: p,
+  secondary: L,
+  avatarVariant: u,
   dense: I,
-  amountLoading: h,
-  isLoading: n,
-  onListItemClick: O,
-  onListItemDelete: b,
-  emptySlot: g,
-  components: T,
-  componentsProps: e
-}) {
+  amountLoading: f,
+  isLoading: e,
+  onListItemClick: h,
+  onListItemDelete: c,
+  emptySlot: S,
+  components: g,
+  componentsProps: o
+}) => {
   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,
+    Root: C,
+    ListSubheader: v,
+    CollectionListItem: M,
+    ItemListItem: k,
+    LoadingListItem: x
+  } = g, y = [...Array(Math.max(f, 0)).keys()].map(() => ({
+    key: n()
+  })), s = A(() => r.map((t) => ({
+    key: n(),
+    ..."item" in t ? {
+      itemType: t == null ? void 0 : t.item
+    } : {},
+    ..."collection" in t ? {
+      collectionType: t == null ? void 0 : t.collection
+    } : {}
+  })) || [], [r]), w = ({
+    itemType: t,
+    collectionType: i
+  }) => t ? {
+    component: k,
     props: {
-      itemType: i,
-      ...e.listItem,
-      ...e.itemListItem
+      itemType: t,
+      ...o.listItem,
+      ...o.itemListItem
     }
-  } : o ? {
-    component: j,
+  } : i ? {
+    component: M,
     props: {
-      collectionType: o,
-      ...e.listItem,
-      ...e.collectionListItem
+      collectionType: i,
+      ...o.listItem,
+      ...o.collectionListItem
     }
   } : {
     // Default to an ItemListItem (use it as loading list)
-    component: k,
+    component: x,
     props: {
-      collectionType: o,
-      ...e.listItem,
-      ...e.loadingListItem
+      ...o.listItem,
+      ...o.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
+  return /* @__PURE__ */ l(C, { dense: I, ...o.root, children: [
+    /* @__PURE__ */ m(v, { ...o.listSubheader, children: d }),
+    /* @__PURE__ */ l(q, { children: [
+      !e && s.length === 0 && $(S),
+      (e ? y : s).map(({
+        key: t,
+        itemType: i,
+        collectionType: D
       }) => {
         const {
-          component: D,
+          component: E,
           props: R
-        } = x({
-          itemType: o,
-          collectionType: E
+        } = w({
+          itemType: i,
+          collectionType: D
         });
-        return /* @__PURE__ */ m(D, { primary: u, secondary: y, avatarVariant: L, isLoading: n, onClick: O, onDelete: b, ...R }, i);
+        return /* @__PURE__ */ m(E, { primary: p, secondary: L, avatarVariant: u, isLoading: e, onClick: h, onDelete: c, ...R }, t);
       })
     ] })
   ] });
-}
-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 = {
+J.defaultProps = {
   entities: [],
   header: void 0,
-  primary: void 0,
+  primary: "id",
   secondary: void 0,
   avatarVariant: "square",
   dense: !1,
@@ -207,5 +112,5 @@ d.defaultProps = {
   componentsProps: void 0
 };
 export {
-  d as default
+  J as default
 };

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ListItemAvatarProps as MuiListItemAvatarProps } from '@mui/material';
+import type { CollectionType, ItemType } from '@vidispine/types';
+import { EntityAvatarProps } from '../../EntityAvatar/EntityAvatar';
+export interface EntityListItemAvatarProps extends Omit<MuiListItemAvatarProps, 'itemType'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    entityType?: EntityAvatarProps['entityType'];
+    isLoading?: boolean;
+    variant?: EntityAvatarProps['variant'];
+    entityAvatar?: EntityAvatarProps;
+}
+declare const EntityListItemAvatar: React.FC<EntityListItemAvatarProps>;
+export default EntityListItemAvatar;

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

@@ -1,26 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import y from "@mui/material/ListItemAvatar";
+import { jsx as r } from "react/jsx-runtime";
+import f 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,
+import u from "../../EntityAvatar/index.js";
+const c = ({
+  itemType: e,
+  collectionType: t,
+  isLoading: i,
   variant: m,
   entityAvatar: o,
   ...n
-}) {
+}) => {
   const {
     metadata: p
-  } = t || e || {}, s = t && "item" || e && "collection", {
+  } = e || t || {}, s = e && "item" || t && "collection" || t && "library", {
     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 }) });
-}
+  }), y = typeof a == "string" ? a.split("/")[0] : void 0;
+  return /* @__PURE__ */ r(f, { ...n, children: /* @__PURE__ */ r(u, { entityType: s || void 0, mediaType: d || y, isLoading: i, variant: m, ...o }) });
+};
+c.defaultProps = {};
 export {
-  x as default
+  c as default
 };

package/dist/es/entity/EntityListItem/components/EntityListItemButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ListItemButtonProps as MuiListItemButtonProps } from '@mui/material';
+import type { ItemType, CollectionType } from '@vidispine/types';
+import { getEntityProp } from '../../_utils';
+export interface EntityListItemButtonProps extends Omit<MuiListItemButtonProps, 'itemType' | 'onClick'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: ReturnType<typeof getEntityProp>) => void;
+    isLoading?: boolean;
+}
+declare const EntityListItemButton: React.FC<EntityListItemButtonProps>;
+export default EntityListItemButton;

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

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

package/dist/es/entity/EntityListItem/components/EntityListItemSecondaryAction.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ListItemSecondaryActionProps } from '@mui/material';
+import type { ItemType, CollectionType } from '@vidispine/types';
+import { getEntityProp } from '../../_utils';
+export interface EntityListItemSecondaryActionProps extends Omit<ListItemSecondaryActionProps, 'itemType'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    isLoading?: boolean;
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>, payload: ReturnType<typeof getEntityProp>) => void;
+}
+declare const EntityListItemSecondaryAction: React.FC<EntityListItemSecondaryActionProps>;
+export default EntityListItemSecondaryAction;

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

@@ -1,27 +1,23 @@
 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 d from "@mui/icons-material/esm/Delete";
+import l from "@mui/material/IconButton";
+import p from "@mui/material/ListItemSecondaryAction";
+import c 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({
+const s = () => /* @__PURE__ */ t("div", { style: {
+  paddingRight: 10
+}, children: /* @__PURE__ */ t(c, { width: 18, height: 36 }) }), f = ({
   itemType: r,
-  collectionType: n,
+  collectionType: i,
+  isLoading: 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, {}) })) });
-}
+}) => /* @__PURE__ */ t(p, { ...m, children: e && (n ? /* @__PURE__ */ t(s, {}) : /* @__PURE__ */ t(l, { onClick: (o) => (o.stopPropagation(), o.preventDefault(), e(o, a({
+  itemType: r,
+  collectionType: i
+}))), children: /* @__PURE__ */ t(d, {}) })) });
+f.defaultProps = {};
 export {
-  S as default
+  f as default
 };

package/dist/es/entity/EntityListItem/components/EntityListItemText.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ListItemTextProps as MuiListItemTextProps } from '@mui/material';
+import type { ItemType, CollectionType } from '@vidispine/types';
+import { getEntityText } from '../../_utils/getEntityText';
+export interface EntityListItemTextProps extends Omit<MuiListItemTextProps, 'itemType' | 'primary' | 'secondary'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    primary?: Parameters<typeof getEntityText>[0];
+    secondary?: Parameters<typeof getEntityText>[0];
+    isLoading?: boolean;
+}
+declare const EntityListItemText: React.FC<EntityListItemTextProps>;
+export default EntityListItemText;

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

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

package/dist/es/entity/EntityTableRow/components/EntityTableCellAvatar.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { TableCellProps as MuiTableCellProps } from '@mui/material';
+import type { ItemType, CollectionType } from '@vidispine/types';
+import type { EntityAvatarProps } from '../../EntityAvatar/EntityAvatar';
+export interface EntityTableCellAvatarProps extends Omit<MuiTableCellProps, 'itemType'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    entityType?: EntityAvatarProps['entityType'];
+    isLoading?: boolean;
+    avatarVariant?: EntityAvatarProps['variant'];
+    entityAvatar?: EntityAvatarProps;
+}
+declare const EntityTableCellAvatar: React.FC<EntityTableCellAvatarProps>;
+export default EntityTableCellAvatar;

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

@@ -1,26 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import f from "@mui/material/TableCell";
-import { parseMetadataType as y } from "@vidispine/vdt-js";
+import { jsx as r } from "react/jsx-runtime";
+import y from "@mui/material/TableCell";
+import { parseMetadataType as f } from "@vidispine/vdt-js";
 import c from "../../EntityAvatar/index.js";
-function x({
+const T = ({
   itemType: e,
   collectionType: t,
   isLoading: i,
-  variant: r,
+  avatarVariant: o,
   entityAvatar: m,
   ...n
-}) {
+}) => {
   const {
-    metadata: l
-  } = e || t || {}, p = e && "item" || t && "collection", {
+    metadata: p
+  } = e || t || {}, l = e && "item" || t && "collection" || t && "library", {
     mediaType: d,
     mimeType: a
-  } = y(l, {
+  } = f(p, {
     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 || {} }) });
-}
+  return /* @__PURE__ */ r(y, { padding: "checkbox", ...n, children: /* @__PURE__ */ r(c, { entityType: l || void 0, mediaType: d || s, variant: o, isLoading: i, ...m || {} }) });
+};
+T.defaultProps = {};
 export {
-  x as default
+  T as default
 };

package/dist/es/entity/EntityTableRow/components/EntityTableCellCheckbox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { TableCellProps as MuiTableCellProps } from '@mui/material';
+export interface EntityTableCellCheckboxProps extends Omit<MuiTableCellProps, 'itemType'> {
+    itemType?: unknown;
+    isLoading?: boolean;
+}
+declare const EntityTableCellCheckbox: React.FC<EntityTableCellCheckboxProps>;
+export default EntityTableCellCheckbox;

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

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

package/dist/es/entity/_utils/getEntityProp.d.ts

@@ -0,0 +1,9 @@
+import type { ItemType, CollectionType } from '@vidispine/types';
+export declare const getEntityProp: (entityObject: {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+}) => {
+    itemType?: ItemType;
+} | {
+    collectionType?: CollectionType;
+} | {};

package/dist/es/entity/_utils/getEntityText.d.ts

@@ -0,0 +1,7 @@
+import type { CollectionType, ItemType } from '@vidispine/types';
+type EntityObject = {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+};
+export declare const getEntityText: (funcOrFieldName: string | ((entity: EntityObject) => string), { itemType, collectionType }: EntityObject) => any;
+export {};