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

package/dist/es/item/ItemList/ItemList.js

@@ -1,147 +1,63 @@
-import { jsxs as a, jsx as s, Fragment as k } from "react/jsx-runtime";
-import { useMemo as j } from "react";
-import e from "prop-types";
-import C 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 b } from "react";
+import x from "@mui/material/List";
+import C 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 "../ItemListItem/index.js";
-function q() {
-  return /* @__PURE__ */ s(x, { children: "No items found..." });
-}
-const w = D(C)(() => ({
+import { showSlot as D } from "../../_utils/showSlot.js";
+import R from "../ItemListItem/index.js";
+const q = () => /* @__PURE__ */ m(j, { children: "No items found..." }), A = w(x)(() => ({
   width: "100%",
   padding: 0
-})), A = {
-  Root: w,
-  ListSubheader: M,
-  ListItem: V
-};
-function d({
+})), E = {
+  Root: A,
+  ListSubheader: C,
+  ListItem: R
+}, F = ({
   itemListType: t,
-  header: l,
-  primary: u,
-  secondary: c,
-  avatarVariant: f,
-  dense: y,
-  amountLoading: h,
-  isLoading: i,
-  onListItemClick: L,
-  onListItemDelete: I,
-  emptySlot: b,
-  components: S,
-  componentsProps: n
-}) {
+  header: n,
+  primary: l,
+  secondary: p,
+  avatarVariant: u,
+  dense: f,
+  amountLoading: c,
+  isLoading: e,
+  onListItemClick: h,
+  onListItemDelete: y,
+  emptySlot: S,
+  components: I,
+  componentsProps: r
+}) => {
   const {
-    Root: g,
-    ListSubheader: O,
-    ListItem: v
-  } = S, T = [...Array(Math.max(h, 0)).keys()].map(() => ({
-    key: p()
-  })), m = j(() => {
+    Root: L,
+    ListSubheader: v,
+    ListItem: M
+  } = I, g = [...Array(Math.max(c, 0)).keys()].map(() => ({
+    key: d()
+  })), s = b(() => {
     var o;
-    return ((o = t == null ? void 0 : t.item) == null ? void 0 : o.map((r) => ({
-      key: p(),
-      itemType: r
+    return ((o = t == null ? void 0 : t.item) == null ? void 0 : o.map((i) => ({
+      key: d(),
+      itemType: i
     }))) || [];
   }, [t.item]);
-  return /* @__PURE__ */ a(g, { dense: y, ...n.root, children: [
-    /* @__PURE__ */ s(O, { ...n.listSubheader, children: l }),
+  return /* @__PURE__ */ a(L, { dense: f, ...r.root, children: [
+    /* @__PURE__ */ m(v, { ...r.listSubheader, children: n }),
     /* @__PURE__ */ a(k, { children: [
-      !i && m.length === 0 && R(b),
-      (i ? T : m).map(({
+      !e && s.length === 0 && D(S),
+      (e ? g : s).map(({
         key: o,
-        itemType: r
-      }) => /* @__PURE__ */ s(v, { itemType: r, primary: u, secondary: c, avatarVariant: f, isLoading: i, onClick: L, onDelete: I, ...n.listItem }, o))
+        itemType: i
+      }) => /* @__PURE__ */ m(M, { itemType: i, primary: l, secondary: p, avatarVariant: u, isLoading: e, onClick: h, onDelete: y, ...r.listItem }, o))
     ] })
   ] });
-}
-d.propTypes = {
-  /**
-   * The `ItemListType` to show in the list
-   */
-  itemListType: P.ItemListType,
-  /**
-   * 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 itemType 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 itemType 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 = {
   itemListType: {},
   header: void 0,
-  primary: void 0,
+  primary: "id",
   secondary: void 0,
   avatarVariant: "square",
   dense: !1,
@@ -150,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/item/ItemList/index.d.ts

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

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

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

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

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { ListItem as MuiListItem } from '@mui/material';
+import type { ItemType } 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 ItemListItemProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The ItemType to display as a list item
+     */
+    itemType?: ItemType;
+    /**
+     * 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);
+    /**
+     * 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);
+    /**
+     * 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: {
+        itemType?: ItemType;
+    }) => void;
+    /**
+     * Show a delete icon as secondary action
+     *
+     * Set `undefined` to hide
+     */
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        itemType?: ItemType;
+    }) => void;
+}
+declare const ItemListItem: React.FC<ItemListItemProps>;
+export default ItemListItem;

package/dist/es/item/ItemListItem/ItemListItem.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({
-  itemType: o,
-  primary: c,
-  secondary: l,
-  avatarVariant: p,
-  isLoading: e,
+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 E = {
+  Root: u,
+  ListItemButton: A,
+  ListItemAvatar: y,
+  ListItemText: B,
+  ListItemSecondaryAction: x
+}, S = ({
+  itemType: e,
+  primary: s,
+  secondary: n,
+  avatarVariant: I,
+  isLoading: t,
   onClick: r,
-  onDelete: I,
-  components: f,
+  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, { itemType: o, onClick: r, isLoading: e, ...i.listItemButton, children: [
-      /* @__PURE__ */ n(d, { itemType: o, variant: p, isLoading: e, ...i.listItemAvatar }),
-      /* @__PURE__ */ n(u, { itemType: o, primary: c, secondary: l, isLoading: e, ...i.listItemText })
+    Root: c,
+    ListItemAvatar: L,
+    ListItemText: v,
+    ListItemButton: m,
+    ListItemSecondaryAction: f
+  } = l;
+  return /* @__PURE__ */ a(c, { disablePadding: !t && !!r && !!m, ...i.root, children: [
+    /* @__PURE__ */ a(m, { itemType: e, onClick: r, isLoading: t, ...i.listItemButton, children: [
+      /* @__PURE__ */ o(L, { itemType: e, variant: I, isLoading: t, ...i.listItemAvatar }),
+      /* @__PURE__ */ o(v, { itemType: e, primary: s, secondary: n, isLoading: t, ...i.listItemText })
     ] }),
-    /* @__PURE__ */ n(L, { itemType: o, onDelete: I, isLoading: e, ...i.listItemSecondaryAction })
+    /* @__PURE__ */ o(f, { itemType: e, onDelete: d, isLoading: t, ...i.listItemSecondaryAction })
   ] });
-}
-m.propTypes = {
-  /**
-   * The ItemType to display as a list item
-   */
-  itemType: T.ItemType,
-  /**
-   * 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 = {
+S.defaultProps = {
   itemType: void 0,
-  primary: void 0,
+  primary: "id",
   secondary: void 0,
   avatarVariant: "square",
   isLoading: !1,
   onClick: void 0,
   onDelete: void 0,
-  components: j,
+  components: E,
   componentsProps: void 0
 };
 export {
-  m as default
+  S as default
 };

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

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

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

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

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import { BlurredBackground as VdtBlurredBackground } from '../../general';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiBox: typeof MuiBox;
+declare const StyledVdtBlurredBackground: typeof VdtBlurredBackground;
+type StyledMuiBoxImageType = StyledComponent<typeof MuiBox, {
+    image?: string;
+    backgroundSize?: React.CSSProperties['backgroundSize'];
+}>;
+declare const StyledMuiBoxImage: StyledMuiBoxImageType;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    BlurredBackground: typeof StyledVdtBlurredBackground;
+    ImageBox: typeof StyledMuiBoxImage;
+};
+export interface ItemPosterProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The ItemType to display as a list item
+     */
+    itemType?: ItemType;
+    /**
+     * The index of the poster
+     */
+    posterIndex?: number;
+    /**
+     * Cover the whole width/height of container
+     */
+    backgroundSize?: 'cover' | 'contain' | 'auto' | React.CSSProperties['backgroundSize'];
+    /**
+     * Whether to show a blurred background behind the thumbnail or not
+     */
+    showBlurredBackground?: boolean;
+    /**
+     * A function that handles the poster being clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: {
+        itemType: ItemType;
+        posterIndex: number;
+    }) => void;
+}
+declare const ItemPoster: React.FC<ItemPosterProps>;
+export default ItemPoster;

package/dist/es/item/ItemPoster/ItemPoster.js

@@ -1,10 +1,8 @@
-import { jsxs as x, jsx as c } from "react/jsx-runtime";
-import o from "prop-types";
-import a from "@mui/material/Box";
-import { styled as n } from "@mui/material/styles";
-import b from "@vidispine/proptypes";
+import { jsxs as k, jsx as m } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+import { styled as e } from "@mui/material/styles";
 import "../../general/AvatarMenu/index.js";
-import y from "../../general/BlurredBackground/index.js";
+import x from "../../general/BlurredBackground/index.js";
 import "../../general/CalendarPicker/index.js";
 import "../../general/CompactBadge/index.js";
 import "../../general/CompactLabel/index.js";
@@ -16,26 +14,27 @@ 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 I = n(a)(({
-  onClick: e
+const f = e(p)(({
+  onClick: o
 }) => ({
   height: "100%",
   width: "100%",
   position: "relative",
-  ...e && {
+  ...o && {
     cursor: "pointer"
   }
-})), v = n(y)(() => ({
+})), v = e(x)(() => ({
   height: "100%",
   width: "100%",
   position: "absolute",
   zIndex: 0,
   top: 0
-})), T = n(a, {
-  shouldForwardProp: (e) => !["image", "backgroundSize"].includes(e)
+})), b = e(p, {
+  shouldForwardProp: (o) => !["image", "backgroundSize"].includes(o)
 })(({
-  image: e,
+  image: o,
   backgroundSize: t
 }) => ({
   height: "inherit",
@@ -43,90 +42,50 @@ const I = n(a)(({
   position: "relative",
   zIndex: 5,
   transition: "all .3s ease-in",
-  background: e ? `url(${e})` : "none",
+  background: o ? `url(${o})` : "none",
   backgroundPosition: "center",
   backgroundRepeat: "no-repeat",
   backgroundSize: t
-})), S = {
-  Root: I,
+})), y = {
+  Root: f,
   BlurredBackground: v,
-  ImageBox: T
-};
-function s({
-  itemType: e,
+  ImageBox: b
+}, I = ({
+  itemType: o,
   posterIndex: t,
-  showBlurredBackground: u,
-  backgroundSize: l,
-  onClick: p,
-  components: g,
+  showBlurredBackground: c,
+  backgroundSize: u,
+  onClick: n,
+  components: l,
   componentsProps: r
-}) {
-  var m;
+}) => {
+  var a;
   const {
-    Root: B,
-    BlurredBackground: h,
-    ImageBox: k
-  } = g, {
+    Root: s,
+    BlurredBackground: g,
+    ImageBox: h
+  } = l, {
     posters: i
-  } = e || {}, d = (m = i == null ? void 0 : i.uri) == null ? void 0 : m[t];
-  return /* @__PURE__ */ x(B, { onClick: typeof p != "function" ? void 0 : (f) => {
-    p(f, {
-      itemType: e,
+  } = o || {}, d = (a = i == null ? void 0 : i.uri) == null ? void 0 : a[t];
+  return /* @__PURE__ */ k(s, { onClick: typeof n != "function" ? void 0 : (B) => {
+    n(B, {
+      itemType: o,
       posterIndex: t
     });
   }, ...r.root, children: [
-    u && /* @__PURE__ */ c(h, { image: d, ...r.blurredBackground }),
-    /* @__PURE__ */ c(k, { component: "div", image: d, backgroundSize: l, ...r.imageBox })
+    c && /* @__PURE__ */ m(g, { image: d, ...r.blurredBackground }),
+    /* @__PURE__ */ m(h, { component: "div", image: d, backgroundSize: u, ...r.imageBox })
   ] });
-}
-s.propTypes = {
-  /**
-   * The ItemType to display as a list item
-   */
-  itemType: b.ItemType,
-  /**
-   * The index of the poster
-   */
-  posterIndex: o.number,
-  /**
-   * Cover the whole width/height of container
-   */
-  backgroundSize: o.string,
-  /**
-   * Whether to show a blurred background behind the thumbnail or not
-   */
-  showBlurredBackground: o.bool,
-  /**
-   * A function that handles the poster being clicked
-   */
-  onClick: o.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: o.shape({
-    Root: o.elementType,
-    BlurredBackground: o.elementType,
-    ImageBox: o.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: o.shape({
-    root: o.instanceOf(Object),
-    blurredBackground: o.instanceOf(Object),
-    imageBox: o.instanceOf(Object)
-  })
 };
-s.defaultProps = {
+I.defaultProps = {
   itemType: void 0,
   posterIndex: 0,
   showBlurredBackground: !1,
   backgroundSize: "cover",
   onClick: void 0,
-  components: S,
+  components: y,
   componentsProps: void 0
 };
 export {
-  s as default
+  I as default
 };

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

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