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

package/dist/es/collection/CollectionRepresentativeThumbnail/CollectionRepresentativeThumbnail.js

@@ -1,38 +1,37 @@
-import { jsxs as u, jsx as a, Fragment as I } from "react/jsx-runtime";
-import { useMemo as v } from "react";
-import e from "prop-types";
-import g from "@mui/material/Box";
-import { styled as n } from "@mui/material/styles";
-import O from "@vidispine/proptypes";
-import { parseMetadataType as j } from "@vidispine/vdt-js";
+import { jsxs as p, jsx as l, Fragment as v } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import c from "@mui/material/Box";
+import { styled as r } from "@mui/material/styles";
+import { parseMetadataType as I } from "@vidispine/vdt-js";
 import "../../general/AvatarMenu/index.js";
 import S from "../../general/BlurredBackground/index.js";
 import "../../general/CalendarPicker/index.js";
 import "../../general/CompactBadge/index.js";
 import "../../general/CompactLabel/index.js";
-import w from "../../general/CornerLabelPlacer/index.js";
+import k from "../../general/CornerLabelPlacer/index.js";
 import "../../general/ExpandButton/index.js";
-import L from "../../general/ImageCollage/index.js";
+import M from "../../general/ImageCollage/index.js";
 import "../../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 M = n(g)(({
-  onClick: l
+const R = r(c)(({
+  onClick: i
 }) => ({
   position: "relative",
   height: "100%",
   width: "100%",
-  ...l ? {
+  ...i ? {
     cursor: "pointer"
   } : {}
-})), R = n(S)(() => ({
+})), T = r(S)(() => ({
   top: 0,
   position: "absolute",
   zIndex: 1
-})), z = n(L)(() => ({
+})), j = r(M)(() => ({
   position: "absolute",
   zIndex: 2,
   top: "50%",
@@ -41,7 +40,7 @@ const M = n(g)(({
   width: "100%",
   transform: "translate(-50%, -50%)",
   objectFit: "cover"
-})), P = n(g)(() => ({
+})), w = r(c)(() => ({
   position: "absolute",
   zIndex: 2,
   top: "50%",
@@ -50,120 +49,64 @@ const M = n(g)(({
   width: "100%",
   transform: "translate(-50%, -50%)",
   objectFit: "cover"
-})), V = n(w)(() => ({
+})), z = r(k)(() => ({
   top: 0,
   position: "absolute",
   zIndex: 3
-})), F = {
-  Root: M,
-  BlurredBackground: R,
-  ImageCollage: z,
-  ImageBox: P,
-  CornerLabelPlacer: V
-};
-function b({
-  collectionType: l,
-  showBlurredBackground: i,
-  showCombined: f,
-  label: B,
-  onClick: m,
-  components: C,
-  componentsProps: o
-}) {
-  var s;
+})), L = {
+  Root: R,
+  BlurredBackground: T,
+  ImageCollage: j,
+  ImageBox: w,
+  CornerLabelPlacer: z
+}, F = ({
+  collectionType: i,
+  showBlurredBackground: n,
+  showCombined: s,
+  label: u,
+  onClick: a,
+  components: f,
+  componentsProps: t
+}) => {
   const {
-    Root: h,
-    BlurredBackground: c,
-    ImageCollage: y,
-    CornerLabelPlacer: x,
-    ImageBox: k
-  } = C, {
-    id: d,
-    metadata: p
-  } = l || {}, t = v(() => {
+    Root: g,
+    BlurredBackground: h,
+    ImageCollage: C,
+    CornerLabelPlacer: b,
+    ImageBox: B
+  } = f, {
+    id: m,
+    metadata: d
+  } = i || {}, o = y(() => {
     const {
-      __representativeThumbnailsNoAuth: r
-    } = j(p, {
+      __representativeThumbnailsNoAuth: e
+    } = I(d, {
       flatTimespan: !0
     });
-    return r == null ? void 0 : r.map((T) => ({
-      src: T,
-      alt: `Representative Thumbnail for Collection ${d}`
+    return e == null ? void 0 : e.map((x) => ({
+      src: x,
+      alt: `Representative Thumbnail for Collection ${m}`
     }));
-  }, [d, p]);
-  return /* @__PURE__ */ u(h, { onClick: typeof m != "function" ? void 0 : (r) => m(r, {
-    collectionType: l
-  }), ...o.root, children: [
-    f ? /* @__PURE__ */ a(y, { images: t, showBlurredBackground: i, ...o.imageCollage, components: {
-      ...o.imageCollage.components || {},
-      BlurredBackground: ((s = o.imageCollage.components) == null ? void 0 : s.BlurredBackground) || c
-    }, componentsProps: {
-      ...o,
-      blurredBackground: {
-        ...o.blurredBackground
-      }
-    } }) : (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ u(I, { children: [
-      i && /* @__PURE__ */ a(c, { ...o.blurredBackground }),
-      /* @__PURE__ */ a(k, { ...(t == null ? void 0 : t[0]) || {}, component: "img", ...o.imageBox })
+  }, [m, d]);
+  return /* @__PURE__ */ p(g, { onClick: typeof a != "function" ? void 0 : (e) => a(e, {
+    collectionType: i
+  }), ...t.root, children: [
+    s ? /* @__PURE__ */ l(C, { images: o, showBlurredBackground: n, ...t.imageCollage }) : (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ p(v, { children: [
+      n && /* @__PURE__ */ l(h, { ...t.blurredBackground }),
+      /* @__PURE__ */ l(B, { ...(o == null ? void 0 : o[0]) || {}, component: "img", ...t.imageBox })
     ] }),
-    /* @__PURE__ */ a(x, { labelBottomRight: B, ...o.cornerLabelPlacer })
+    /* @__PURE__ */ l(b, { labelBottomRight: u, ...t.cornerLabelPlacer })
   ] });
-}
-b.propTypes = {
-  /**
-   * A VidiCore Collection
-   *
-   */
-  collectionType: O.CollectionType,
-  /**
-   * Show a blurred background behind the thumbnail
-   */
-  showBlurredBackground: e.bool,
-  /**
-   * Show multiple or thumbnail combined to one
-   */
-  showCombined: e.bool,
-  /**
-   * Add a label above thumbnail
-   */
-  label: e.string,
-  /**
-   * Add event handler when the thumbnail is clicked
-   *
-   * Set `undefined` to disable
-   */
-  onClick: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    BlurredBackground: e.elementType,
-    ImageCollage: e.elementType,
-    CornerLabelPlacer: e.elementType,
-    ImageBox: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    blurredBackground: e.instanceOf(Object),
-    imageCollage: e.instanceOf(Object),
-    cornerLabelPlacer: e.instanceOf(Object),
-    imageBox: e.instanceOf(Object)
-  })
 };
-b.defaultProps = {
+F.defaultProps = {
   collectionType: void 0,
   showBlurredBackground: void 0,
   showCombined: !1,
   label: void 0,
   onClick: void 0,
-  components: F,
+  components: L,
   componentsProps: void 0
 };
 export {
-  b as default
+  F as default
 };

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

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

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

@@ -1,11 +1,11 @@
 import { styled as n } from "@mui/material/styles";
 import { withOverrides as r } from "../../_utils/withOverrides.js";
-import m from "./CollectionRepresentativeThumbnail.js";
-const o = "CollectionRepresentativeThumbnail", e = `Vdt${o}`, i = r(e)(m), s = n(i, {
-  name: e,
-  overridesResolver: (p, t) => t.root
-})(() => ({}));
-s.displayName = o;
+import i from "./CollectionRepresentativeThumbnail.js";
+const e = "CollectionRepresentativeThumbnail", o = `Vdt${e}`, m = r(o)(i), s = n(m, {
+  name: o,
+  overridesResolver: (l, t) => t.root
+})({});
+s.displayName = e;
 export {
   s as default
 };

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

@@ -0,0 +1,4 @@
+export { default as CollectionList } from './CollectionList';
+export { default as CollectionListItem } from './CollectionListItem';
+export { default as CollectionRepresentativeThumbnail } from './CollectionRepresentativeThumbnail';
+export { default as CollectionCard } from './CollectionCard';

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Avatar as MuiAvatar } from '@mui/material';
+import VdtEntityIcon from '../EntityIcon';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+type StyledMuiAvatarComponent = StyledComponent<typeof MuiAvatar, {
+    isLoading?: boolean;
+}>;
+declare const StyledMuiAvatar: StyledMuiAvatarComponent;
+declare const StyledVdtEntityIcon: typeof VdtEntityIcon;
+declare const defaultComponents: {
+    Root: typeof StyledMuiAvatar;
+    Icon: typeof StyledVdtEntityIcon;
+};
+export interface EntityAvatarProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Type of icon for the Avatar
+     */
+    entityType?: 'item' | 'collection' | 'library';
+    /**
+     * Optional, use mediaType icon for item and library
+     */
+    mediaType?: 'video' | 'audio' | 'image' | 'document' | 'data' | 'pdf' | 'none' | string;
+    /**
+     * Variant/shapes for the Avatar
+     */
+    variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Show loading state
+     */
+    isLoading?: boolean;
+    /**
+     * Shown when avatar is loading
+     */
+    loadingSlot?: ({ variant }: {
+        variant?: EntityAvatarProps['variant'];
+    }) => JSX.Element;
+}
+declare const EntityAvatar: React.FC<EntityAvatarProps>;
+export default EntityAvatar;

package/dist/es/entity/EntityAvatar/EntityAvatar.js

@@ -1,102 +1,59 @@
-import { jsx as n } from "react/jsx-runtime";
-import o from "prop-types";
-import u from "@mui/material/Skeleton";
-import f from "@mui/material/Avatar";
-import { styled as d } from "@mui/material/styles";
-import y from "../EntityIcon/index.js";
-function g({
-  variant: t
-}) {
-  return /* @__PURE__ */ n(u, { sx: {
-    height: "100%",
-    width: "100%"
-  }, variant: t === "square" ? "rect" : t, "data-testid": "skeleton" });
-}
-const v = d(f, {
-  shouldForwardProp: (t) => t !== "isLoading"
+import { jsx as r } from "react/jsx-runtime";
+import p from "@mui/material/Skeleton";
+import m from "@mui/material/Avatar";
+import { styled as s } from "@mui/material/styles";
+import u from "../EntityIcon/index.js";
+const f = ({
+  variant: o
+}) => /* @__PURE__ */ r(p, { sx: {
+  height: "100%",
+  width: "100%"
+}, variant: o === "square" ? "rect" : o, "data-testid": "skeleton" }), y = s(m, {
+  shouldForwardProp: (o) => o !== "isLoading"
 })(({
-  theme: t,
-  isLoading: e
+  theme: o,
+  isLoading: t
 }) => ({
   transition: "background-color .2s ease-out",
-  backgroundColor: t.palette.primary.main,
-  ...e ? {
+  backgroundColor: o.palette.primary.main,
+  ...t ? {
     backgroundColor: "unset"
   } : {}
-})), T = d(y)(({
-  theme: t
+})), g = s(u)(({
+  theme: o
 }) => ({
-  color: t.palette.background.paper
-})), b = {
-  Root: v,
-  Icon: T
-};
-function s({
-  entityType: t,
-  mediaType: e,
-  variant: r,
-  isLoading: a,
-  loadingSlot: i,
-  components: c,
-  componentsProps: p
-}) {
+  color: o.palette.background.paper
+})), v = {
+  Root: y,
+  Icon: g
+}, k = ({
+  entityType: o,
+  mediaType: t,
+  variant: e,
+  isLoading: n,
+  loadingSlot: a,
+  components: d,
+  componentsProps: i
+}) => {
   const {
-    Root: l,
-    Icon: m
-  } = c;
-  return /* @__PURE__ */ n(l, { variant: r, isLoading: a, ...p.root, children: a ? i && i({
-    variant: r
-  }) : /* @__PURE__ */ n(m, { entityType: t, ...e ? {
-    mediaType: e
-  } : {}, ...p.icon }) });
-}
-s.propTypes = {
-  /**
-   * Type of icon for the Avatar
-   */
-  entityType: o.oneOf(["item", "collection", "library"]),
-  /**
-   * Optional, use mediaType icon for item and library
-   */
-  mediaType: o.oneOf(["audio", "video", "image", "document", "data", "pdf", "none"]),
-  /**
-   * Variant/shapes for the Avatar
-   */
-  variant: o.oneOf(["circular", "rounded", "square"]),
-  /**
-   * Show loading state
-   */
-  isLoading: o.bool,
-  // Slots
-  /**
-   * Shown when avatar is loading
-   */
-  loadingSlot: o.oneOfType([o.elementType, o.node]),
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: o.shape({
-    Root: o.elementType,
-    Icon: o.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: o.shape({
-    root: o.instanceOf(Object),
-    icon: o.instanceOf(Object)
-  })
+    Root: c,
+    Icon: l
+  } = d;
+  return /* @__PURE__ */ r(c, { variant: e, isLoading: n, ...i.root, children: n ? a && a({
+    variant: e
+  }) : /* @__PURE__ */ r(l, { entityType: o, ...t ? {
+    mediaType: t
+  } : {}, ...i.icon }) });
 };
-s.defaultProps = {
+k.defaultProps = {
   entityType: void 0,
   mediaType: void 0,
   variant: "square",
   isLoading: !1,
-  loadingSlot: g,
-  components: b,
+  loadingSlot: f,
+  components: v,
   componentsProps: void 0
 };
 export {
-  s as default
+  k as default
 };

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

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

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

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

package/dist/es/entity/EntityCard/_components/Typography.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TypographyProps as MuiTypographyProps } from '@mui/material';
+export interface TypographyProps extends MuiTypographyProps {
+    webkitLineClamp?: React.CSSProperties['WebkitLineClamp'];
+}
+declare const Typography: React.FC<TypographyProps>;
+export default Typography;

package/dist/es/entity/EntityCard/_components/Typography.js

@@ -0,0 +1,15 @@
+import e from "@mui/material/Typography";
+import { styled as i } from "@mui/material/styles";
+const p = i(e, {
+  shouldForwardProp: (o) => o !== "webkitLineClamp"
+})(({
+  webkitLineClamp: o
+}) => ({
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  WebkitLineClamp: o
+}));
+export {
+  p as default
+};

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { CardActionsProps as MuiCardActionsProps, IconButtonProps as MuiIconButtonProps } from '@mui/material';
+import type { ItemType, CollectionType } from '@vidispine/types';
+import { ExpandButtonProps } from '../../../general/ExpandButton/ExpandButton';
+type EntityCardActionsAction = {
+    name?: string;
+    iconProps?: MuiIconButtonProps;
+    Icon?: (props?: any) => JSX.Element;
+};
+export interface EntityCardActionsProps extends Omit<MuiCardActionsProps, 'itemType'> {
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+    checked?: boolean;
+    expanded?: boolean;
+    actions?: EntityCardActionsAction[];
+    onActionClick?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        action: EntityCardActionsAction;
+        itemType?: ItemType;
+    } | {
+        action: EntityCardActionsAction;
+        collectionType?: CollectionType;
+    }) => void;
+    onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        value: boolean;
+    }) => void;
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    expandButton?: ExpandButtonProps;
+}
+declare const EntityCardActions: React.FC<EntityCardActionsProps>;
+export default EntityCardActions;

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

@@ -1,5 +1,5 @@
 import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import S from "@mui/material/Checkbox";
+import k from "@mui/material/Checkbox";
 import x from "@mui/material/CardActions";
 import A from "@mui/material/IconButton";
 import { styled as n } from "@mui/material/styles";
@@ -9,60 +9,67 @@ import "../../../general/CalendarPicker/index.js";
 import "../../../general/CompactBadge/index.js";
 import "../../../general/CompactLabel/index.js";
 import "../../../general/CornerLabelPlacer/index.js";
-import I from "../../../general/ExpandButton/index.js";
+import S from "../../../general/ExpandButton/index.js";
 import "../../../general/ImageCollage/index.js";
 import "../../../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";
 import { getEntityProp as b } from "../../_utils/getEntityProp.js";
 import "@vidispine/vdt-js";
-const k = n(x)(() => ({
+const I = n(x)(() => ({
   alignItems: "flex-end",
   padding: 8
-})), B = n(A)(() => ({
+})), P = n(A)(() => ({
   transition: "color .2s ease-out"
-})), j = n(S)(() => ({
+})), j = n(k)(() => ({
   marginLeft: "auto",
   transition: "color .2s ease-out"
-}));
-function X({
+})), B = ({
   itemType: p,
   collectionType: l,
-  classes: P,
-  checked: s = !1,
-  expanded: d = !1,
-  actions: t = [],
-  onActionClick: f = () => null,
-  onExpand: i,
-  onCheck: m,
-  expandButton: u = {},
-  ...c
-}) {
-  const a = (o, e) => {
-    f(o, {
-      action: e,
+  checked: s,
+  expanded: c,
+  actions: t,
+  onActionClick: d,
+  onExpand: e,
+  onCheck: i,
+  expandButton: f,
+  classes: L,
+  // ignored
+  ...u
+}) => {
+  const a = (o, m) => {
+    d(o, {
+      action: m,
       ...b({
         itemType: p,
         collectionType: l
       })
     });
   };
-  return !(t != null && t.length) && !m && !i ? null : /* @__PURE__ */ h(k, { disableSpacing: !0, ...c, children: [
+  return !(t != null && t.length) && !i && !e ? null : /* @__PURE__ */ h(I, { disableSpacing: !0, ...u, children: [
     t == null ? void 0 : t.map((o) => {
       const {
-        name: e,
-        iconButtonProps: C,
+        name: m,
+        iconProps: C,
         Icon: g
       } = o || {};
-      return /* @__PURE__ */ r(B, { onClick: (y) => a(y, o), ...C, children: /* @__PURE__ */ r(g, {}) }, e);
+      return /* @__PURE__ */ r(P, { component: "button", onClick: (y) => a(y, o), ...C, children: /* @__PURE__ */ r(g, {}) }, m);
     }),
-    m && /* @__PURE__ */ r(j, { checked: s, onChange: m }),
-    i && /* @__PURE__ */ r(I, { expanded: d, onClick: i, ...u })
+    i && /* @__PURE__ */ r(j, { checked: s, onChange: i }),
+    e && /* @__PURE__ */ r(S, { expanded: c, onClick: e, ...f })
   ] });
-}
+};
+B.defaultProps = {
+  checked: !1,
+  expanded: !1,
+  actions: [],
+  onActionClick: () => null
+};
 export {
-  X as default
+  B as default
 };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { CardProps as MuiCardProps } from '@mui/material';
+export interface EntityCardBaseProps extends MuiCardProps {
+    checked?: boolean;
+}
+declare const EntityCardBase: React.FC<EntityCardBaseProps>;
+export default EntityCardBase;

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

@@ -2,10 +2,10 @@ import { jsx as t } from "react/jsx-runtime";
 import a from "@mui/material/Card";
 import { styled as i } from "@mui/material/styles";
 const e = i(a, {
-  shouldForwardProp: (o) => o !== "checked"
+  shouldForwardProp: (r) => r !== "checked"
 })(({
-  checked: o,
-  theme: r
+  theme: r,
+  checked: o
 }) => ({
   width: "100%",
   padding: 0,
@@ -31,13 +31,11 @@ const e = i(a, {
   backgroundImage: "unset",
   // remove "opacity" from card elevation
   overflow: "unset"
-}));
-function p({
-  children: o,
-  ...r
-}) {
-  return /* @__PURE__ */ t(e, { ...r, children: o });
-}
+})), d = ({
+  children: r,
+  ...o
+}) => /* @__PURE__ */ t(e, { ...o, children: r });
+d.defaultProps = {};
 export {
-  p as default
+  d as default
 };