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

package/dist/es/_utils/showSlot.d.ts

@@ -0,0 +1 @@
+export declare const showSlot: (slot: (props?: any) => JSX.Element, props?: any) => JSX.Element | ((props?: any) => JSX.Element);

package/dist/es/_utils/showSlot.js

@@ -1,4 +1,4 @@
-const u = (n, e) => ![null, void 0].includes(n) && typeof n == "function" ? n(e) : n;
+const c = (n, o) => ![null, void 0].includes(n) && typeof n == "function" ? n(o) : n;
 export {
-  u as showSlot
+  c as showSlot
 };

package/dist/es/_utils/uuidv4.d.ts

@@ -0,0 +1 @@
+export declare const uuidv4: () => any;

package/dist/es/_utils/uuidv4.js

@@ -1,7 +1,10 @@
-const t = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (e) => (
-  // eslint-disable-next-line
-  (e ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> e / 4).toString(16)
-));
+const t = () => (
+  // @ts-expect-error (false bitwise number+number[] issue)
+  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (e) => (
+    // eslint-disable-next-line
+    (e ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> e / 4).toString(16)
+  ))
+);
 export {
   t as uuidv4
 };

package/dist/es/_utils/withOverrides.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+interface OverridesProps {
+    className: string;
+    components: any;
+    componentsProps: any;
+}
+export declare const withOverrides: (name: string) => <P extends Partial<OverridesProps> = {}>(Component: ComponentType<P>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<any>>;
+export {};

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

@@ -0,0 +1,165 @@
+/// <reference types="react" />
+import { CardActionArea as MuiCardActionArea, Collapse as MuiCollapse } from '@mui/material';
+import type { CollectionType } from '@vidispine/types';
+import VdtCardActions from '../../entity/EntityCard/components/EntityCardActions';
+import VdtCard from '../../entity/EntityCard/components/EntityCardBase';
+import VdtCardContent from '../../entity/EntityCard/components/EntityCardContent';
+import VdtCardHeader from '../../entity/EntityCard/components/EntityCardHeader';
+import VdtCardMedia from './components/CollectionCardMedia';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+type StyledVdtCardType = StyledComponent<typeof VdtCard, {
+    horizontal?: boolean;
+}>;
+declare const StyledVdtCard: StyledVdtCardType;
+type StyledVdtCardHeaderType = StyledComponent<typeof VdtCardHeader, {
+    horizontal?: boolean;
+}>;
+declare const StyledVdtCardHeader: StyledVdtCardHeaderType;
+type StyledVdtCardMediaType = StyledComponent<typeof VdtCardMedia, {
+    horizontal?: boolean;
+    mediaPadding?: number;
+    mediaSize?: React.CSSProperties['width'];
+}>;
+declare const StyledVdtCardMedia: StyledVdtCardMediaType;
+type StyledVdtCardContentType = StyledComponent<typeof VdtCardContent, {
+    horizontal?: boolean;
+}>;
+declare const StyledVdtCardContent: StyledVdtCardContentType;
+declare const StyledVdtCardActions: typeof VdtCardActions;
+declare const StyledMuiCardActionArea: typeof MuiCardActionArea<'button'>;
+declare const StyledMuiCollapse: typeof MuiCollapse;
+declare const defaultComponents: {
+    Root: typeof StyledVdtCard;
+    CardHeader: typeof StyledVdtCardHeader;
+    CardMedia: typeof StyledVdtCardMedia;
+    CardContent: typeof StyledVdtCardContent;
+    CardContentExpanded: typeof StyledVdtCardContent;
+    CardActions: typeof StyledVdtCardActions;
+    CardActionArea: typeof StyledMuiCardActionArea;
+    Collapse: typeof StyledMuiCollapse;
+};
+type CollectionCardAction = {
+    name?: string;
+    Icon?: (props?: any) => JSX.Element;
+    iconProps?: object;
+};
+type CollectionCardMenuOption = {
+    label: string;
+    secondaryLabel?: string;
+    name?: string;
+    icon?: (props: any) => JSX.Element;
+};
+export interface CollectionCardProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The Collection to show
+     */
+    collectionType?: CollectionType;
+    /**
+     * Title text for the collection card header
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get collectionType as argument
+     */
+    title?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * Subheader text for the collection card header
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get collectionType as argument
+     *
+     * Defaults to undefined
+     */
+    subheader?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * Content text for the card body
+     *
+     * Set to *field name* the value should be extracted from
+     * or set *function* which will get collectionType as argument
+     *
+     * Defaults to undefined
+     */
+    content?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * 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?: string | (({ collectionType }: {
+        collectionType: CollectionType;
+    }) => string);
+    /**
+     * Add padding around media (theme spacing value)
+     */
+    mediaPadding?: number;
+    /**
+     * Set size for the card media
+     *
+     * `width` if horizontal: true, `height` otherwise
+     */
+    mediaSize?: string;
+    /**
+     * Whether the media card is marked as checked or not
+     */
+    checked?: boolean;
+    /**
+     * Whether the expanded content is shown or not
+     */
+    expanded?: boolean;
+    /**
+     * Whether the card should have horizontal or standard layout
+     */
+    horizontal?: boolean;
+    /**
+     * A list of options for the card header action
+     */
+    menuOptions?: CollectionCardMenuOption[];
+    /**
+     * The list of actions to show
+     */
+    actions?: CollectionCardAction[];
+    /**
+     * A function that handles the onClick event
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, payload: {
+        collectionType: CollectionType;
+    }) => void;
+    /**
+     * A function that handles the check box being clicked
+     */
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        collectionType: CollectionType;
+        value: boolean;
+    }) => void;
+    /**
+     * A function that handles the expand button being clicked
+     */
+    onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        collectionType: CollectionType;
+        value: boolean;
+    }) => void;
+    /**
+     * Callback for clicking on option which will get the option as argument
+     */
+    onOptionClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, payload: {
+        option: CollectionCardMenuOption;
+        collectionType?: CollectionType;
+    }) => void;
+    /**
+     * Callback for clicking on an action which will get the action name as argument
+     */
+    onActionClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        action: CollectionCardAction;
+        collectionType?: CollectionType;
+    }) => void;
+}
+declare const CollectionCard: React.FC<CollectionCardProps>;
+export default CollectionCard;

package/dist/es/collection/CollectionCard/CollectionCard.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/CollectionCardMedia.js";
-const $ = d(X, {
-  shouldForwardProp: (t) => t !== "horizontal"
+import { jsxs as G, jsx as o } 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/CollectionCardMedia.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: e,
   mediaPadding: C,
   mediaSize: c
 }) => ({
-  padding: t.spacing(C),
-  ...i ? {
+  padding: d.spacing(C),
+  ...e ? {
     width: c,
     height: "100%"
   } : {
     height: c,
     width: "100%"
   }
-})), b = d(Y, {
-  shouldForwardProp: (t) => t !== "horizontal"
+})), x = i(U, {
+  shouldForwardProp: (d) => d !== "horizontal"
 })(({
-  horizontal: t,
-  theme: i
+  horizontal: d,
+  theme: e
 }) => ({
   gridArea: "content",
-  paddingTop: t ? 0 : i.spacing(2)
-})), ne = d(U)(() => ({
+  paddingTop: d ? 0 : e.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,76 @@ 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({
-  collectionType: t,
-  title: i,
+})), td = {
+  Root: Z,
+  CardHeader: _,
+  CardMedia: $,
+  CardContent: x,
+  CardContentExpanded: x,
+  CardActions: T,
+  CardActionArea: dd,
+  Collapse: ad
+}, od = ({
+  collectionType: d,
+  title: e,
   subheader: C,
   content: c,
-  expandedContent: f,
-  checked: s,
-  expanded: l,
-  horizontal: p,
-  mediaPadding: x,
-  mediaSize: T,
-  menuOptions: M,
-  actions: j,
-  onClick: u,
+  expandedContent: u,
+  checked: l,
+  expanded: s,
+  horizontal: r,
+  mediaPadding: M,
+  mediaSize: E,
+  menuOptions: S,
+  actions: k,
+  onClick: A,
   onCheck: m,
   onExpand: h,
-  onOptionClick: k,
-  onActionClick: E,
-  components: S,
-  componentsProps: n
-}) {
+  onOptionClick: y,
+  onActionClick: w,
+  components: H,
+  componentsProps: a
+}) => {
   const {
-    Root: H,
-    CardHeader: w,
-    CardActionArea: z,
-    CardMedia: P,
-    CardContent: R,
-    CardContentExpanded: V,
-    CardActions: F,
-    Collapse: L
-  } = S, [B, I] = g(s), [W, q] = g(l), D = (a) => {
-    var y;
-    const r = (y = a == null ? void 0 : a.target) == null ? void 0 : y.checked;
-    m && m(a, {
-      value: r,
-      collectionType: t
-    }), s === void 0 && I(r);
-  }, G = (a, {
-    value: r
+    Root: b,
+    CardHeader: V,
+    CardActionArea: F,
+    CardMedia: z,
+    CardContent: L,
+    CardContentExpanded: O,
+    CardActions: R,
+    Collapse: j
+  } = H, [B, I] = v(l), [P, W] = v(s), q = (t) => {
+    var p;
+    const n = (p = t == null ? void 0 : t.target) == null ? void 0 : p.checked;
+    m && m(t, {
+      value: n,
+      collectionType: d
+    }), l === void 0 && I(n);
+  }, D = (t, {
+    value: n
   }) => {
-    h && h(a, {
-      value: r,
-      collectionType: t
-    }), l === void 0 && q(r);
-  }, A = s !== void 0 ? s : B, O = l !== void 0 ? l : W;
-  return /* @__PURE__ */ J(H, { horizontal: p, checked: A, ...n.root, children: [
-    /* @__PURE__ */ o(w, { collectionType: t, title: i, subheader: C, menuOptions: M, horizontal: p, onOptionClick: k, ...n.cardHeader }),
-    /* @__PURE__ */ o(z, { disabled: u === void 0, onClick: (a) => u(a, {
-      collectionType: t
-    }), ...n.cardActionArea, children: /* @__PURE__ */ o(P, { collectionType: t, mediaSize: T, mediaPadding: x, horizontal: p, ...n.cardMedia }) }),
-    /* @__PURE__ */ o(R, { collectionType: t, content: c, horizontal: p, ...n.cardContent }),
-    /* @__PURE__ */ o(F, { collectionType: t, checked: A, expanded: O, actions: j, onCheck: m ? D : null, onExpand: f ? G : null, onActionClick: E, ...n.cardActions }),
-    /* @__PURE__ */ o(L, { in: O && f !== void 0, timeout: "auto", unmountOnExit: !0, ...n.collapse, children: /* @__PURE__ */ o(V, { collectionType: t, content: f, WebkitLineClamp: 0, ...n.cardContentExpanded }) })
+    h && h(t, {
+      value: n,
+      collectionType: d
+    }), s === void 0 && W(n);
+  }, f = l !== void 0 ? l : B, g = s !== void 0 ? s : P;
+  return /* @__PURE__ */ G(b, { horizontal: r, checked: f, ...a.root, children: [
+    /* @__PURE__ */ o(V, { collectionType: d, title: e, subheader: C, menuOptions: S, horizontal: r, onOptionClick: y, ...a.cardHeader }),
+    /* @__PURE__ */ o(F, { disabled: A === void 0, onClick: (t) => A(t, {
+      collectionType: d
+    }), ...a.cardActionArea, children: /* @__PURE__ */ o(z, { collectionType: d, mediaSize: E, mediaPadding: M, horizontal: r, showCombined: !r, ...a.cardMedia }) }),
+    /* @__PURE__ */ o(L, { collectionType: d, content: c, horizontal: r, ...a.cardContent }),
+    /* @__PURE__ */ o(R, { collectionType: d, checked: f, expanded: g, actions: k, onCheck: m ? q : null, onExpand: u ? D : null, onActionClick: w, ...a.cardActions }),
+    /* @__PURE__ */ o(j, { in: g && u !== void 0, timeout: "auto", unmountOnExit: !0, ...a.collapse, children: /* @__PURE__ */ o(O, { collectionType: d, content: u, WebkitLineClamp: 0, ...a.cardContentExpanded }) })
   ] });
-}
-v.propTypes = {
-  /**
-   * The Collection to show
-   */
-  collectionType: Q.CollectionType,
-  /**
-   * Title text for the collection card header
-   *
-   * Set to *field name* the value should be extracted from
-   * or set *function* which will get collectionType as argument
-   *
-   * Defaults to id of collection
-   */
-  title: e.oneOfType([e.string, e.func]),
-  /**
-   * Subheader text for the collection card header
-   *
-   * Set to *field name* the value should be extracted from
-   * or set *function* which will get collectionType 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 collectionType 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]),
-  /**
-   * 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,
-  /**
-   * Whether the card should have horizontal or standard layout
-   */
-  horizontal: e.bool,
-  /**
-   * A list of options for the card header action
-   */
-  menuOptions: e.arrayOf(e.instanceOf(Object)),
-  /**
-   * The list of actions to show
-   */
-  actions: e.arrayOf(e.shape({
-    name: e.string,
-    Icon: e.elementType,
-    iconProps: e.instanceOf(Object)
-  })),
-  // Callbacks
-  /**
-   * A function that handles the onClick event
-   */
-  onClick: e.func,
-  /**
-   * A function that handles the check box being clicked
-   */
-  onCheck: e.func,
-  /**
-   * A function that handles the expand button being clicked
-   */
-  onExpand: 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({
-      collectionRepresentativeThumbnail: e.instanceOf(Object)
-    }),
-    cardContent: e.instanceOf(Object),
-    cardContentExpanded: e.instanceOf(Object),
-    cardActions: e.shape({
-      expandButton: e.instanceOf(Object)
-    }),
-    collapse: e.instanceOf(Object)
-  })
 };
-v.defaultProps = {
+od.defaultProps = {
   collectionType: void 0,
   onClick: void 0,
-  title: void 0,
+  title: "id",
   subheader: void 0,
   content: void 0,
   expandedContent: void 0,
@@ -284,9 +150,9 @@ v.defaultProps = {
   onExpand: void 0,
   onOptionClick: void 0,
   onActionClick: void 0,
-  components: de,
+  components: td,
   componentsProps: void 0
 };
 export {
-  v as default
+  od as default
 };

package/dist/es/collection/CollectionCard/components/CollectionCardMedia.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { CardMediaProps as MuiCardMediaProps } from '@mui/material';
+import type { CollectionType } from '@vidispine/types';
+import type { CollectionRepresentativeThumbnailProps } from '../../CollectionRepresentativeThumbnail/CollectionRepresentativeThumbnail';
+export interface CollectionCardMediaProps extends MuiCardMediaProps {
+    collectionType?: CollectionType;
+    showCombined?: boolean;
+    collectionRepresentativeThumbnail?: CollectionRepresentativeThumbnailProps;
+}
+declare const CollectionCardMedia: React.FC<CollectionCardMediaProps>;
+export default CollectionCardMedia;

package/dist/es/collection/CollectionCard/components/CollectionCardMedia.js

@@ -1,14 +1,17 @@
 import { jsx as o } from "react/jsx-runtime";
-import i from "@mui/material/CardMedia";
-import d from "../../CollectionRepresentativeThumbnail/index.js";
-function f({
-  collectionType: r,
-  showCombined: m,
-  collectionRepresentativeThumbnail: e = {},
-  ...t
-}) {
-  return /* @__PURE__ */ o(i, { ...t, children: /* @__PURE__ */ o(d, { collectionType: r, showCombined: !0, ...e }) });
-}
+import r from "@mui/material/CardMedia";
+import l from "../../CollectionRepresentativeThumbnail/index.js";
+const n = ({
+  collectionType: e,
+  showCombined: i,
+  collectionRepresentativeThumbnail: t,
+  ...d
+}) => /* @__PURE__ */ o(r, { ...d, children: /* @__PURE__ */ o(l, { collectionType: e, showCombined: i, ...t ?? {} }) });
+n.defaultProps = {
+  collectionType: void 0,
+  showCombined: void 0,
+  collectionRepresentativeThumbnail: void 0
+};
 export {
-  f as default
+  n as default
 };

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

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

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

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