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

package/dist/es/item/ItemCard/ItemCard.js

@@ -1,65 +1,63 @@
-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/ItemCardMedia.js";
-const $ = d(X, {
-  shouldForwardProp: (t) => t !== "horizontal"
+import { jsxs as G, jsx as t } from "react/jsx-runtime";
+import { useState as v } from "react";
+import J from "@mui/material/CardActionArea";
+import K from "@mui/material/Collapse";
+import { styled as i } from "@mui/material/styles";
+import N from "../../entity/EntityCard/components/EntityCardActions.js";
+import Q from "../../entity/EntityCard/components/EntityCardBase.js";
+import U from "../../entity/EntityCard/components/EntityCardContent.js";
+import X from "../../entity/EntityCard/components/EntityCardHeader.js";
+import Y from "./components/ItemCardMedia.js";
+const Z = i(Q, {
+  shouldForwardProp: (d) => d !== "horizontal"
 })(({
-  horizontal: t
+  horizontal: d
 }) => ({
   display: "grid",
-  ...t ? {
+  ...d ? {
     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"
+})), _ = i(X, {
+  shouldForwardProp: (d) => d !== "horizontal"
 })(({
-  horizontal: t
+  horizontal: d
 }) => ({
   gridArea: "header",
-  ...t && {
+  ...d && {
     "& .MuiCardHeader-avatar": {
       display: "none"
     }
   }
-})), te = d(_, {
-  shouldForwardProp: (t) => !["horizontal", "mediaPadding", "mediaSize"].includes(t)
+})), $ = i(Y, {
+  shouldForwardProp: (d) => !["horizontal", "mediaPadding", "mediaSize"].includes(d)
 })(({
-  theme: t,
-  horizontal: i,
+  theme: d,
+  horizontal: r,
   mediaPadding: C,
-  mediaSize: c
+  mediaSize: n
 }) => ({
-  padding: t.spacing(C),
-  ...i ? {
-    width: c,
+  padding: d.spacing(C),
+  ...r ? {
+    width: n,
     height: "100%"
   } : {
-    height: c,
+    height: n,
     width: "100%"
   }
-})), b = d(Y, {
-  shouldForwardProp: (t) => t !== "horizontal"
+})), x = i(U, {
+  shouldForwardProp: (d) => d !== "horizontal"
 })(({
-  horizontal: t,
-  theme: i
+  theme: d,
+  horizontal: r
 }) => ({
   gridArea: "content",
-  paddingTop: t ? 0 : i.spacing(2)
-})), ne = d(U)(() => ({
+  paddingTop: r ? 0 : d.spacing(2)
+})), T = i(N)(() => ({
   gridArea: "actions"
-})), ae = d(K)(() => ({
+})), dd = i(J)(() => ({
   gridArea: "actionArea",
   transition: "filter 0.25s ease-in-out",
   "&:focus": {
@@ -68,208 +66,75 @@ const $ = d(X, {
   "& .MuiTouchRipple-root": {
     zIndex: 10
   }
-})), oe = d(N)(() => ({
+})), ad = i(K)(() => ({
   gridArea: "collapse"
-})), de = {
-  Root: $,
-  CardHeader: ee,
-  CardMedia: te,
-  CardContent: b,
-  CardContentExpanded: b,
-  CardActions: ne,
-  CardActionArea: ae,
-  Collapse: oe
-};
-function v({
-  itemType: t,
-  title: i,
+})), od = {
+  Root: Z,
+  CardHeader: _,
+  CardMedia: $,
+  CardContent: x,
+  CardContentExpanded: x,
+  CardActions: T,
+  CardActionArea: dd,
+  Collapse: ad
+}, td = ({
+  itemType: d,
+  title: r,
   subheader: C,
-  content: c,
-  expandedContent: f,
-  horizontal: s,
-  mediaSize: x,
-  mediaPadding: T,
+  content: n,
+  expandedContent: u,
+  horizontal: c,
+  mediaSize: M,
+  mediaPadding: E,
   checked: l,
-  expanded: p,
-  onClick: u,
-  onCheck: m,
-  onExpand: h,
-  menuOptions: M,
-  onOptionClick: j,
-  actions: k,
-  onActionClick: E,
-  components: S,
-  componentsProps: n
-}) {
+  expanded: s,
+  onClick: h,
+  onCheck: A,
+  onExpand: m,
+  menuOptions: S,
+  onOptionClick: k,
+  actions: y,
+  onActionClick: w,
+  components: H,
+  componentsProps: a
+}) => {
   const {
-    Root: H,
-    CardHeader: P,
-    CardActionArea: w,
-    CardMedia: z,
+    Root: V,
+    CardHeader: b,
+    CardActionArea: z,
+    CardMedia: F,
     CardContent: I,
-    CardContentExpanded: V,
-    CardActions: F,
+    CardContentExpanded: L,
+    CardActions: O,
     Collapse: R
-  } = S, [L, B] = g(l), [W, q] = g(p), D = (a) => {
-    var y;
-    const r = (y = a == null ? void 0 : a.target) == null ? void 0 : y.checked;
-    m && m(a, {
-      value: r,
-      itemType: t
-    }), l === void 0 && B(r);
-  }, G = (a, {
-    value: r
+  } = H, [j, B] = v(l), [P, W] = v(s), q = (o) => {
+    var p;
+    const e = (p = o == null ? void 0 : o.target) == null ? void 0 : p.checked;
+    A && A(o, {
+      value: e,
+      itemType: d
+    }), l === void 0 && B(e);
+  }, D = (o, {
+    value: e
   }) => {
-    h && h(a, {
-      value: r,
-      itemType: t
-    }), p === void 0 && q(r);
-  }, A = l !== void 0 ? l : L, O = p !== void 0 ? p : W;
-  return /* @__PURE__ */ J(H, { checked: A, horizontal: s, ...n.root, children: [
-    /* @__PURE__ */ o(P, { itemType: t, title: i, subheader: C, menuOptions: M, horizontal: s, onOptionClick: j, ...n.cardHeader }),
-    /* @__PURE__ */ o(w, { disabled: u === void 0, onClick: (a) => u(a, {
-      itemType: t
-    }), ...n.cardActionArea, children: /* @__PURE__ */ o(z, { itemType: t, mediaSize: x, mediaPadding: T, horizontal: s, ...n.cardMedia }) }),
-    /* @__PURE__ */ o(I, { itemType: t, content: c, horizontal: s, ...n.cardContent }),
-    /* @__PURE__ */ o(F, { itemType: t, checked: A, expanded: O, actions: k, onCheck: m ? D : null, onExpand: f ? G : null, onActionClick: E, ...n.cardActions }),
-    /* @__PURE__ */ o(R, { in: O && f !== void 0, timeout: "auto", unmountOnExit: !0, ...n.collapse, children: /* @__PURE__ */ o(V, { itemType: t, content: f, WebkitLineClamp: 0, ...n.cardContentExpanded }) })
+    m && m(o, {
+      value: e,
+      itemType: d
+    }), s === void 0 && W(e);
+  }, f = l !== void 0 ? l : j, g = s !== void 0 ? s : P;
+  return /* @__PURE__ */ G(V, { checked: f, horizontal: c, ...a.root, children: [
+    /* @__PURE__ */ t(b, { itemType: d, title: r, subheader: C, menuOptions: S, horizontal: c, onOptionClick: k, ...a.cardHeader }),
+    /* @__PURE__ */ t(z, { disabled: h === void 0, onClick: (o) => h(o, {
+      itemType: d
+    }), ...a.cardActionArea, children: /* @__PURE__ */ t(F, { itemType: d, mediaSize: M, mediaPadding: E, horizontal: c, ...a.cardMedia }) }),
+    /* @__PURE__ */ t(I, { itemType: d, content: n, horizontal: c, ...a.cardContent }),
+    /* @__PURE__ */ t(O, { itemType: d, checked: f, expanded: g, actions: y, onCheck: A ? q : null, onExpand: u ? D : null, onActionClick: w, ...a.cardActions }),
+    /* @__PURE__ */ t(R, { in: g && u !== void 0, timeout: "auto", unmountOnExit: !0, ...a.collapse, children: /* @__PURE__ */ t(L, { itemType: d, content: u, WebkitLineClamp: 0, ...a.cardContentExpanded }) })
   ] });
-}
-v.propTypes = {
-  /**
-   * The Item to show
-   */
-  itemType: Q.ItemType,
-  /**
-   * Title text for the item card header
-   *
-   * Set to *field name* the value should be extracted from
-   * or set *function* which will get itemType as argument
-   *
-   * Defaults to id of item
-   */
-  title: e.oneOfType([e.string, e.func]),
-  /**
-   * Subheader text for the item card header
-   *
-   * Set to *field name* the value should be extracted from
-   * or set *function* which will get itemType 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 itemType 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]),
-  /**
-   * Whether the card should have horizontal or standard layout
-   */
-  horizontal: e.bool,
-  /**
-   * 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,
-  /**
-   * The list of actions to show
-   */
-  actions: e.arrayOf(e.shape({
-    name: e.string,
-    Icon: e.elementType,
-    iconProps: e.instanceOf(Object)
-  })),
-  /**
-   * A list of options for the card header action
-   */
-  menuOptions: e.arrayOf(e.instanceOf(Object)),
-  // Callbacks
-  /**
-   * A function that handles the onClick event
-   */
-  onClick: e.func,
-  /**
-   * A function that handles the expand button being clicked
-   */
-  onExpand: e.func,
-  /**
-   * A function that handles the check box being clicked
-   */
-  onCheck: 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({
-      itemThumbnail: e.instanceOf(Object),
-      itemPoster: e.instanceOf(Object)
-    }),
-    cardContent: e.instanceOf(Object),
-    cardContentExpanded: e.instanceOf(Object),
-    cardActions: e.shape({
-      expandButton: e.instanceOf(Object)
-    }),
-    collapse: e.instanceOf(Object)
-  })
 };
-v.defaultProps = {
+td.defaultProps = {
   itemType: void 0,
-  title: void 0,
+  title: "id",
   subheader: void 0,
   content: void 0,
   expandedContent: void 0,
@@ -285,9 +150,9 @@ v.defaultProps = {
   onExpand: void 0,
   onOptionClick: void 0,
   onActionClick: void 0,
-  components: de,
+  components: od,
   componentsProps: void 0
 };
 export {
-  v as default
+  td as default
 };

package/dist/es/item/ItemCard/components/ItemCardMedia.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { CardMediaProps as MuiCardMediaProps } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import type { ItemPosterProps } from '../../ItemPoster/ItemPoster';
+import type { ItemThumbnailProps } from '../../ItemThumbnail/ItemThumbnail';
+export interface ItemCardMediaProps extends Omit<MuiCardMediaProps, 'itemType'> {
+    itemType?: ItemType;
+    itemThumbnail?: ItemThumbnailProps;
+    itemPoster?: ItemPosterProps;
+}
+declare const ItemCardMedia: React.FC<ItemCardMediaProps>;
+export default ItemCardMedia;

package/dist/es/item/ItemCard/components/ItemCardMedia.js

@@ -1,20 +1,22 @@
 import { jsx as r } from "react/jsx-runtime";
 import i from "@mui/material/CardMedia";
-import c from "../../ItemPoster/index.js";
-import f from "../../ItemThumbnail/index.js";
-function z({
+import m from "../../ItemPoster/index.js";
+import l from "../../ItemThumbnail/index.js";
+const u = ({
   itemType: o,
-  padding: l,
-  size: u,
-  horizontal: m,
-  itemThumbnail: d = {},
-  itemPoster: a = {},
+  itemThumbnail: e = {},
+  itemPoster: n = {},
   ...s
-}) {
-  var n, t;
-  const e = ((t = (n = o == null ? void 0 : o.posters) == null ? void 0 : n.uri) == null ? void 0 : t.length) > 0;
-  return /* @__PURE__ */ r(i, { ...s, children: e ? /* @__PURE__ */ r(c, { itemType: o, backgroundSize: "cover", ...a }) : /* @__PURE__ */ r(f, { itemType: o, cover: !0, ...d }) });
-}
+}) => {
+  var t, d;
+  const a = ((d = (t = o == null ? void 0 : o.posters) == null ? void 0 : t.uri) == null ? void 0 : d.length) > 0;
+  return /* @__PURE__ */ r(i, { ...s, children: a ? /* @__PURE__ */ r(m, { itemType: o, backgroundSize: "cover", ...n }) : /* @__PURE__ */ r(l, { itemType: o, cover: !0, ...e }) });
+};
+u.defaultProps = {
+  itemType: void 0,
+  itemThumbnail: void 0,
+  itemPoster: void 0
+};
 export {
-  z as default
+  u as default
 };

package/dist/es/item/ItemCard/index.d.ts

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

package/dist/es/item/ItemCard/index.js

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

package/dist/es/item/ItemList/ItemList.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { List as MuiList, ListSubheader as MuiListSubheader } from '@mui/material';
+import type { ItemListType, ItemType } from '@vidispine/types';
+import VdtItemListItem from '../ItemListItem';
+import type { PropsFrom, WithOverrideProps } from '../../_types';
+declare const StyledMuiList: typeof MuiList;
+declare const defaultComponents: {
+    Root: typeof StyledMuiList;
+    ListSubheader: typeof MuiListSubheader;
+    ListItem: typeof VdtItemListItem;
+};
+export interface ItemListProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The `ItemListType` to show in the list
+     */
+    itemListType?: ItemListType;
+    /**
+     * 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 itemType as argument
+     */
+    primary?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => string);
+    /**
+     * Secondary text for the list item
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get itemType as argument
+     *
+     * Defaults to undefined
+     */
+    secondary?: string | (({ itemType }: {
+        itemType: ItemType;
+    }) => 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 VdtItemListItem>['onClick'];
+    /**
+     * Callback for ListItem delete event
+     *
+     * Set to `undefined` to disable
+     */
+    onListItemDelete?: PropsFrom<typeof VdtItemListItem>['onDelete'];
+    /**
+     * Shown when list is empty
+     */
+    emptySlot?: () => JSX.Element;
+}
+declare const ItemList: React.FC<ItemListProps>;
+export default ItemList;