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

package/dist/es/entity/_utils/getEntityText.js

@@ -1,34 +1,34 @@
-import { parseMetadataType as e } from "@vidispine/vdt-js";
-const i = (t, {
-  itemType: n,
-  collectionType: r
+import { parseMetadataType as u } from "@vidispine/vdt-js";
+const d = (t, {
+  itemType: r,
+  collectionType: n
 }) => {
-  const f = typeof t == "function" && t;
-  if (f)
-    return n ? f({
-      itemType: n
-    }) : r ? f({
-      collectionType: r
+  const a = typeof t == "function" && t;
+  if (a)
+    return r ? a({
+      itemType: r
+    }) : n ? a({
+      collectionType: n
     }) : void 0;
-  const a = typeof t == "string" && t;
-  if (a) {
+  const f = typeof t == "string" && t;
+  if (f === "id") {
     const {
-      metadata: u
-    } = n || r || {}, {
-      [a]: s
-    } = e(u, {
-      flat: !0,
-      arrayOnSingleValue: !1
-    });
+      id: s
+    } = r || n || {};
     return s;
   }
-  if (a === "id") {
+  if (f) {
     const {
-      id: u
-    } = n || r || {};
-    return u;
+      metadata: s
+    } = r || n || {}, {
+      [f]: o
+    } = u(s, {
+      flat: !0,
+      arrayOnSingleValue: !1
+    });
+    return o;
   }
 };
 export {
-  i as getEntityText
+  d as getEntityText
 };

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

@@ -0,0 +1,2 @@
+export { getEntityProp } from './getEntityProp';
+export { getEntityText } from './getEntityText';

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

@@ -0,0 +1,3 @@
+export { default as EntityIcon } from './EntityIcon';
+export { default as EntityAvatar } from './EntityAvatar';
+export { default as EntityList } from './EntityList';

package/dist/es/general/AvatarMenu/AvatarMenu.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { Box as MuiBox, Menu as MuiMenu } from '@mui/material';
+import VdtAvatar from './components/Avatar';
+import VdtMenuItem from './components/MenuItem';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledVdtAvatar: typeof VdtAvatar;
+type StyledVdtMenuItemType = StyledComponent<typeof VdtMenuItem, {
+    minWidth?: React.CSSProperties['minWidth'];
+}>;
+declare const StyledVdtMenuItem: StyledVdtMenuItemType;
+declare const StyledMuiMenu: typeof MuiMenu;
+declare const defaultComponents: {
+    Root: typeof MuiBox;
+    Avatar: typeof StyledVdtAvatar;
+    Menu: typeof StyledMuiMenu;
+    MenuItem: typeof StyledVdtMenuItem;
+};
+type AvatarMenuOption = {
+    label: string;
+    secondaryLabel?: string;
+    name?: string;
+    icon?: (props: any) => JSX.Element;
+};
+export interface AvatarMenuProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Type for avatar button icons
+     */
+    type?: 'dots' | 'lines' | 'user';
+    /**
+     * Up to 3 characters to show inside avatar button (instead of icon)
+     */
+    characters?: string;
+    /**
+     * Variant/shapes for the list item avatars
+     */
+    variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Set min width of menu items
+     */
+    minWidth?: string;
+    /**
+     * The menu options
+     */
+    options?: AvatarMenuOption[];
+    /**
+     * Callback for clicking on the avatar
+     *
+     * _Note: Will open menu when clicked_
+     */
+    onAvatarClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Callback for clicking on an option
+     *
+     * _Note: Will close menu when an option is clicked_
+     */
+    onOptionClick?: (event: React.MouseEvent<HTMLLIElement>, option: AvatarMenuOption) => void;
+}
+declare const AvatarMenu: React.FC<AvatarMenuProps>;
+export default AvatarMenu;

package/dist/es/general/AvatarMenu/AvatarMenu.js

@@ -1,143 +1,82 @@
-import { jsxs as A, jsx as a } from "react/jsx-runtime";
-import { useState as I } from "react";
-import e from "prop-types";
-import T from "@mui/material/Box";
-import x from "@mui/material/Menu";
-import { styled as l, darken as j } from "@mui/material/styles";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { useState as x } from "react";
+import A from "@mui/material/Box";
+import I from "@mui/material/Menu";
+import { styled as a, darken as O } from "@mui/material/styles";
 import S from "./components/Avatar.js";
 import W from "./components/MenuItem.js";
-const P = l(S)(({
-  theme: t,
-  characters: o
+const z = a(S)(({
+  theme: o,
+  characters: n
 }) => ({
   transition: "color .2s ease-out",
-  backgroundColor: t.palette.primary.main,
+  backgroundColor: o.palette.primary.main,
   "&:hover": {
-    backgroundColor: j(t.palette.primary.main, 0.3)
+    backgroundColor: O(o.palette.primary.main, 0.3)
   },
-  ...(o == null ? void 0 : o.length) > 1 ? {
-    fontSize: `${(o == null ? void 0 : o.length) === 2 ? "16" : "12"}px`,
+  ...(n == null ? void 0 : n.length) > 1 ? {
+    fontSize: `${(n == null ? void 0 : n.length) === 2 ? "16" : "12"}px`,
     lineHeight: 0,
     fontWeight: 600
   } : {
     fontWeight: 500
   }
-})), z = l(W, {
-  shouldForwardProp: (t) => t !== "minWidth"
+})), B = a(W, {
+  shouldForwardProp: (o) => o !== "minWidth"
 })(({
-  minWidth: t
+  minWidth: o
 }) => ({
-  minWidth: t
-})), B = l(x)({
+  minWidth: o
+})), j = a(I)({
   "& .MuiPaper-root": {
     // Reduce the "opacity"
     backgroundImage: "linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"
   }
-}), R = {
-  Root: T,
-  Avatar: P,
-  Menu: B,
-  MenuItem: z
-};
-function c({
-  type: t,
-  characters: o,
+}), E = {
+  Root: A,
+  Avatar: z,
+  Menu: j,
+  MenuItem: B
+}, P = ({
+  type: o,
+  characters: n,
   variant: f,
   minWidth: g,
-  options: v,
-  onAvatarClick: m,
+  options: s,
+  onAvatarClick: l,
   onOptionClick: u,
-  components: y,
-  componentsProps: r
-}) {
+  components: v,
+  componentsProps: e
+}) => {
   const {
-    Root: O,
-    Avatar: h,
-    Menu: M,
-    MenuItem: b
-  } = y, [s, p] = I(null), k = (n) => {
-    p(n.currentTarget), m && m(n);
-  }, d = () => {
-    p(null);
-  }, C = (n, i) => {
-    u && u(n, i), d();
+    Root: M,
+    Avatar: c,
+    Menu: h,
+    MenuItem: k
+  } = v, [m, d] = x(null), C = (t) => {
+    d(t.currentTarget), l && l(t);
+  }, p = () => {
+    d(null);
+  }, y = (t, r) => {
+    u && u(t, r), p();
   };
-  return /* @__PURE__ */ A(O, { ...r.root, children: [
-    /* @__PURE__ */ a(h, { onClick: k, type: t, variant: f, characters: o, ...r.avatar }),
-    /* @__PURE__ */ a(M, { anchorEl: s, keepMounted: !0, open: !!s, onClose: d, PaperProps: {
+  return /* @__PURE__ */ b(M, { ...e.root, children: [
+    /* @__PURE__ */ i(c, { onClick: C, iconType: o, variant: f, characters: n, ...e.avatar }),
+    /* @__PURE__ */ i(h, { anchorEl: m, keepMounted: !0, open: !!m, onClose: p, PaperProps: {
       square: !0,
-      ...r.menu.PaperProps || {}
+      ...e.menu.PaperProps || {}
     }, anchorOrigin: {
       vertical: "bottom",
       horizontal: "center",
-      ...r.menu.anchorOrigin || {}
+      ...e.menu.anchorOrigin || {}
     }, transformOrigin: {
       vertical: "top",
       horizontal: "center",
-      ...r.menu.transformOrigin || {}
-    }, ...r.menu, children: v.map((n) => /* @__PURE__ */ a(b, { onClick: (i) => C(i, n), option: n, minWidth: g, ...r.menuItem }, n.name || n.label)) })
+      ...e.menu.transformOrigin || {}
+    }, ...e.menu, children: s.map((t) => /* @__PURE__ */ i(k, { onClick: (r) => y(r, t), option: t, minWidth: g, ...e.menuItem }, t.name || t.label)) })
   ] });
-}
-c.propTypes = {
-  /**
-   * Type for avatar button icons
-   */
-  type: e.oneOf(["dots", "lines", "user"]),
-  /**
-   * Up to 3 characters to show inside avatar button (instead of icon)
-   */
-  characters: e.string,
-  /**
-   * Variant/shapes for the list item avatars
-   */
-  variant: e.oneOf(["circular", "rounded", "square"]),
-  /**
-   * Set min width of menu items
-   */
-  minWidth: e.string,
-  /**
-   * The menu options
-   */
-  options: e.arrayOf(e.shape({
-    icon: e.elementType,
-    name: e.string,
-    label: e.string,
-    secondaryLabel: e.string
-  })),
-  // Callbacks
-  /**
-   * Callback for clicking on the avatar
-   *
-   * Note: Will open menu when clicked
-   */
-  onAvatarClick: e.func,
-  /**
-   * Callback for clicking on an option
-   *
-   * Note: Will close menu when an option is clicked
-   */
-  onOptionClick: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    Avatar: e.elementType,
-    Menu: e.elementType,
-    MenuItem: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    avatar: e.instanceOf(Object),
-    menu: e.instanceOf(Object),
-    menuItem: e.instanceOf(Object)
-  })
 };
-c.defaultProps = {
+P.defaultProps = {
   type: "dots",
   characters: void 0,
   variant: "circular",
@@ -145,9 +84,9 @@ c.defaultProps = {
   options: [],
   onAvatarClick: void 0,
   onOptionClick: void 0,
-  components: R,
+  components: E,
   componentsProps: void 0
 };
 export {
-  c as default
+  P as default
 };

package/dist/es/general/AvatarMenu/components/Avatar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AvatarProps as MuiAvatarProps } from '@mui/material';
+export interface AvatarProps extends MuiAvatarProps<'button'> {
+    iconType?: 'dots' | 'lines' | 'user';
+    characters?: string;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/es/general/AvatarMenu/components/Avatar.js

@@ -1,14 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
 import i from "@mui/icons-material/esm/MoreVert";
-import m from "@mui/icons-material/esm/Menu";
-import s from "@mui/icons-material/esm/Person";
-import a from "@mui/material/Avatar";
-import f from "@mui/material/IconButton";
-function b({
-  type: e,
+import a from "@mui/icons-material/esm/Menu";
+import m from "@mui/icons-material/esm/Person";
+import c from "@mui/material/Avatar";
+import p from "@mui/material/IconButton";
+const f = ({
+  iconType: e,
   characters: r,
-  ...n
-}) {
+  color: n,
+  ...s
+}) => {
   let o;
   switch (e) {
     case "dots": {
@@ -16,15 +17,19 @@ function b({
       break;
     }
     case "lines": {
-      o = m;
+      o = a;
       break;
     }
     case "user":
     default:
-      o = s;
+      o = m;
   }
-  return /* @__PURE__ */ t(a, { component: f, ...n, children: r && typeof r == "string" ? r.substring(0, 3) : /* @__PURE__ */ t(o, {}) });
-}
+  return /* @__PURE__ */ t(c, { component: p, color: n, ...s, children: r && typeof r == "string" ? r.substring(0, 3) : /* @__PURE__ */ t(o, {}) });
+};
+f.defaultProps = {
+  iconType: "user",
+  characters: void 0
+};
 export {
-  b as default
+  f as default
 };

package/dist/es/general/AvatarMenu/components/MenuItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { MenuItemProps as MuiMenuItemProps } from '@mui/material';
+export interface MenuItemProps extends MuiMenuItemProps {
+    option: {
+        label: string;
+        icon?: (props: any) => JSX.Element;
+        secondaryLabel?: string;
+    };
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+export default MenuItem;

package/dist/es/general/AvatarMenu/components/MenuItem.js

@@ -1,29 +1,28 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import c from "@mui/material/MenuItem";
-import a from "@mui/material/ListItemIcon";
-import l from "@mui/material/ListItemText";
-import s from "@mui/material/Typography";
+import s from "@mui/material/ListItemIcon";
+import a from "@mui/material/ListItemText";
+import l from "@mui/material/Typography";
 import { styled as p } from "@mui/material/styles";
-const d = p(s)(({
+const d = p(l)(({
   theme: r
 }) => ({
   marginLeft: r.spacing(3)
-}));
-function g({
+})), g = ({
   option: r,
-  ...n
-}) {
+  ...i
+}) => {
   const {
     icon: t,
-    label: i,
+    label: n,
     secondaryLabel: e
   } = r || {};
-  return /* @__PURE__ */ m(c, { ...n, children: [
-    t && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(t, { fontSize: "small" }) }),
-    /* @__PURE__ */ o(l, { children: i }),
+  return /* @__PURE__ */ m(c, { ...i, children: [
+    t && /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(t, { fontSize: "small" }) }),
+    /* @__PURE__ */ o(a, { children: n }),
     e && /* @__PURE__ */ o(d, { variant: "body2", color: "text.secondary", children: e })
   ] });
-}
+};
 export {
   g as default
 };

package/dist/es/general/AvatarMenu/index.d.ts

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

package/dist/es/general/AvatarMenu/index.js

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

package/dist/es/general/BlurredBackground/BlurredBackground.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+type StyledMuiBoxType = StyledComponent<typeof MuiBox, {
+    color?: React.CSSProperties['backgroundColor'];
+    image?: string;
+    blur?: number;
+    grayscale?: number;
+}>;
+declare const StyledMuiBox: StyledMuiBoxType;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+};
+export interface BlurredBackgroundProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The image uri to show as blurred
+     */
+    image?: string;
+    /**
+     * Set a blurred background color (works with a sx theme palette string)
+     *
+     * _Note: `image` has precedence_
+     */
+    color?: string | React.CSSProperties['backgroundColor'];
+    /**
+     * Set blur amount (in px)
+     */
+    blur?: number;
+    /**
+     * Set grayscale amount (in percentage)
+     */
+    grayscale?: number;
+}
+declare const BlurredBackground: React.FC<BlurredBackgroundProps>;
+export default BlurredBackground;

package/dist/es/general/BlurredBackground/BlurredBackground.js

@@ -1,85 +1,45 @@
-import { jsx as i } from "react/jsx-runtime";
-import o from "prop-types";
-import u from "@mui/material/Box";
-import { styled as l } from "@mui/material/styles";
-const m = l(u, {
-  shouldForwardProp: (r) => !["image", "blur", "grayscale"].includes(r)
+import { jsx as d } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+import { styled as u } from "@mui/material/styles";
+const l = u(i, {
+  shouldForwardProp: (o) => !["image", "blur", "grayscale"].includes(o)
 })(({
-  color: r,
-  image: e,
+  color: o,
+  image: r,
   blur: t,
-  grayscale: n
+  grayscale: e
 }) => ({
   height: "100%",
   width: "100%",
-  backgroundColor: r,
-  backgroundImage: `url(${e})`,
+  backgroundColor: o,
+  backgroundImage: `url(${r})`,
   backgroundSize: "cover",
   backgroundRepeat: "no-repeat",
   backgroundPosition: "center",
-  filter: `blur(${Math.max(t, 0)}px) grayscale(${Math.max(n, 0)}%)`
-})), d = {
-  Root: m
-};
-function s({
-  image: r,
-  color: e,
+  filter: `blur(${Math.max(t, 0)}px) grayscale(${Math.max(e, 0)}%)`
+})), s = {
+  Root: l
+}, m = ({
+  image: o,
+  color: r,
   blur: t,
-  grayscale: n,
-  components: c,
-  componentsProps: a
-}) {
+  grayscale: e,
+  components: a,
+  componentsProps: n
+}) => {
   const {
-    Root: p
-  } = c;
-  return /* @__PURE__ */ i(p, { component: "div", image: r, blur: t, grayscale: n, ...a.root, sx: {
-    ...!r && {
-      backgroundColor: e
-    },
-    ...a.root.sx || {}
-  } });
-}
-s.propTypes = {
-  /**
-   * The image uri to show as blurred
-   */
-  image: o.string,
-  /**
-   * Set a blurred background color (works with a sx theme palette string)
-   *
-   * Note: `image` has precedence
-   */
-  color: o.string,
-  /**
-   * Set blur amount (in px)
-   */
-  blur: o.number,
-  /**
-   * Set grayscale amount (in percentage)
-   */
-  grayscale: o.number,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: o.shape({
-    Root: o.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: o.shape({
-    root: o.instanceOf(Object)
-  })
+    Root: c
+  } = a;
+  return /* @__PURE__ */ d(c, { component: "div", image: o, color: r, blur: t, grayscale: e, ...n.root });
 };
-s.defaultProps = {
+m.defaultProps = {
   image: void 0,
   color: "primary.main",
   blur: 20,
   grayscale: 50,
-  components: d,
+  components: s,
   componentsProps: void 0
 };
 export {
-  s as default
+  m as default
 };

package/dist/es/general/BlurredBackground/index.d.ts

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

package/dist/es/general/BlurredBackground/index.js

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