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

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

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+import { Table as MuiTable, TableBody as MuiTableBody } from '@mui/material';
+import type { ItemListType, ItemType } from '@vidispine/types';
+import VdtItemTableRow from '../ItemTableRow';
+import VdtItemTableHead from './components/ItemTableHead';
+import type { PropsFrom, WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: typeof MuiTable;
+    TableHead: typeof VdtItemTableHead;
+    TableBody: typeof MuiTableBody;
+    TableRow: typeof VdtItemTableRow;
+};
+export interface ItemTableProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The item list to show in table
+     */
+    itemListType?: ItemListType;
+    /**
+     * List of header labels and values for table columns
+     *
+     * Set value to the *field name* it should be extracted from
+     * or a *function* which will get itemType as argument
+     *
+     * Defaults to empty list
+     */
+    rows?: {
+        label?: string | JSX.Element;
+        value?: string | JSX.Element | (({ itemType }: {
+            itemType: ItemType;
+        }) => string | JSX.Element);
+    }[];
+    /**
+     * Set size of table
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Variant/shapes for the Avatar
+     */
+    avatarVariant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Set the header to stick at top when scrolled
+     */
+    stickyHeader?: boolean;
+    /**
+     * A list of string ids for which items are checked.
+     */
+    checked?: ItemType[];
+    /**
+     * Set if table row avatar should be shown
+     */
+    showAvatar?: boolean;
+    /**
+     * Show skeleton table items as loading state
+     */
+    isLoading?: boolean;
+    /**
+     * Amount of table items to show when loading
+     */
+    amountLoading?: number;
+    /**
+     * A function that handles a checkbox being clicked.
+     */
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        itemListType: ItemListType;
+    }) => void;
+    /**
+     * A function that handles an item being clicked.
+     */
+    onRowClick?: PropsFrom<typeof VdtItemTableRow>['onClick'];
+    /**
+     * Shown when the table is empty
+     */
+    emptySlot?: ({ rows, onCheck, }: {
+        rows: ItemTableProps['rows'];
+        onCheck: ItemTableProps['onCheck'];
+    }) => JSX.Element;
+}
+declare const ItemTable: React.FC<ItemTableProps>;
+export default ItemTable;

package/dist/es/item/ItemTable/ItemTable.js

@@ -1,186 +1,101 @@
-import { jsxs as k, jsx as f } from "react/jsx-runtime";
-import { useMemo as D, useState as F } from "react";
-import e from "prop-types";
-import G from "@mui/material/Table";
-import J from "@mui/material/TableBody";
-import K from "@mui/material/TableRow";
+import { jsxs as k, jsx as c, Fragment as V } from "react/jsx-runtime";
+import { useMemo as D, useState as G } from "react";
+import J from "@mui/material/Table";
+import K from "@mui/material/TableBody";
+import O from "@mui/material/TableRow";
 import Q from "@mui/material/TableCell";
-import y from "@vidispine/proptypes";
 import "clsx";
 import "@mui/material/styles";
 import { showSlot as U } from "../../_utils/showSlot.js";
 import W from "../ItemTableRow/index.js";
 import X from "./components/ItemTableHead.js";
-function Y({
-  rows: t,
-  onCheck: l
-}) {
-  return /* @__PURE__ */ f(K, { children: /* @__PURE__ */ f(Q, { colSpan: t.length + (l ? 1 : 0), sx: {
-    borderBottom: "none"
-  }, children: "No items found..." }) });
-}
-const Z = {
-  Root: G,
+const Y = ({
+  rows: n,
+  onCheck: d
+}) => /* @__PURE__ */ c(O, { children: /* @__PURE__ */ c(Q, { colSpan: n.length + (d ? 1 : 0), sx: {
+  borderBottom: "none"
+}, children: "No items found..." }) }), Z = {
+  Root: J,
   TableHead: X,
-  TableBody: J,
+  TableBody: K,
   TableRow: W
-};
-function O({
-  itemListType: t,
-  rows: l,
-  size: w,
-  avatarVariant: R,
-  stickyHeader: C,
-  showAvatar: b,
-  onRowClick: T,
-  checked: i,
-  onCheck: d,
-  isLoading: c,
-  amountLoading: g,
-  emptySlot: H,
-  components: S,
-  componentsProps: j
-}) {
+}, _ = ({
+  itemListType: n,
+  rows: d,
+  size: C,
+  avatarVariant: w,
+  stickyHeader: R,
+  showAvatar: h,
+  onRowClick: x,
+  checked: m,
+  onCheck: l,
+  isLoading: i,
+  amountLoading: S,
+  emptySlot: g,
+  components: M,
+  componentsProps: A
+}) => {
   const {
-    Root: x,
-    TableHead: B,
+    Root: B,
+    TableHead: H,
     TableBody: I,
-    TableRow: A
-  } = S, M = [...Array(Math.max(g, 0)).keys()].map((a) => ({
-    key: a
+    TableRow: j
+  } = M, p = [...Array(Math.max(S, 0)).keys()].map((r) => ({
+    key: r
   })), u = D(() => {
-    var a;
-    return ((a = t == null ? void 0 : t.item) == null ? void 0 : a.map((o) => ({
+    var r;
+    return ((r = n == null ? void 0 : n.item) == null ? void 0 : r.map((o) => ({
       key: o == null ? void 0 : o.id,
       itemType: o
     }))) || [];
-  }, [t]), [P, h] = F([]), n = i === void 0 ? P : i, V = d ? (a, {
+  }, [n]), [P, b] = G([]), e = m === void 0 ? P : m, q = l ? (r, {
     value: o
   }) => {
     const {
-      item: r = []
-    } = t || {}, m = o === !0 ? [...n, ...r].filter(
+      item: a = []
+    } = n || {}, t = o === !0 ? [...e, ...a].filter(
       // Remove duplicates
-      (s, p, E) => p === E.findIndex(({
+      (s, f, F) => f === F.findIndex(({
         id: N
       }) => s.id === N)
-    ) : n.filter(({
+    ) : e.filter(({
       id: s
-    }) => !r.some((p) => p.id === s));
-    i === void 0 && h(() => m), d(a, {
+    }) => !a.some((f) => f.id === s));
+    m === void 0 && b(() => t), l(r, {
       itemListType: {
-        item: m
+        item: t
       }
     });
-  } : void 0, q = d ? (a, {
+  } : void 0, z = l ? (r, {
     value: o,
-    itemType: r
+    itemType: a
   }) => {
-    const m = o === !0 ? [...n, r] : n.filter(({
+    const t = o === !0 ? [...e, a] : e.filter(({
       id: s
-    }) => r.id !== s);
-    i === void 0 && h(() => m), d(a, {
+    }) => a.id !== s);
+    m === void 0 && b(() => t), l(r, {
       itemListType: {
-        item: m
+        item: t
       }
     });
-  } : void 0, v = (n == null ? void 0 : n.length) > 0 && ((t == null ? void 0 : t.item) || []).every((a) => n.some((o) => a.id === o.id)), z = !v && (n == null ? void 0 : n.length) > 0 && ((t == null ? void 0 : t.item) || []).some((a) => n.some((o) => a.id === o.id));
-  return /* @__PURE__ */ k(x, { size: w, stickyHeader: C, ...j.root, children: [
-    /* @__PURE__ */ f(B, { rows: l, isLoading: c, checked: v, showAvatar: b, indeterminate: z, onCheck: V }),
-    /* @__PURE__ */ k(I, { children: [
-      !c && u.length === 0 && U(H, {
-        onCheck: d,
-        rows: l
+  } : void 0, v = (e == null ? void 0 : e.length) > 0 && ((n == null ? void 0 : n.item) || []).every((r) => e.some((o) => r.id === o.id)), E = !v && (e == null ? void 0 : e.length) > 0 && ((n == null ? void 0 : n.item) || []).some((r) => e.some((o) => r.id === o.id));
+  return /* @__PURE__ */ k(B, { size: C, stickyHeader: R, ...A.root, children: [
+    /* @__PURE__ */ c(H, { rows: d, isLoading: i, checked: v, showAvatar: h, indeterminate: E, onCheck: q }),
+    /* @__PURE__ */ c(I, { children: /* @__PURE__ */ k(V, { children: [
+      !i && u.length === 0 && U(g, {
+        onCheck: l,
+        rows: d
       }),
-      (c ? M : u).map(({
-        key: a,
+      (i ? p : u).map(({
+        key: r,
         itemType: o
-      }) => /* @__PURE__ */ f(A, { itemType: o, rows: l, isLoading: c, onClick: T, showAvatar: b, avatarVariant: R, checked: Array.isArray(n) && n.some(({
-        id: r
-      }) => r === o.id), onCheck: q }, a))
-    ] })
+      }) => /* @__PURE__ */ c(j, { itemType: o, rows: d, isLoading: i, onClick: x, showAvatar: h, avatarVariant: w, checked: Array.isArray(e) && e.some(({
+        id: a
+      }) => a === (o == null ? void 0 : o.id)), onCheck: z }, r))
+    ] }) })
   ] });
-}
-O.propTypes = {
-  /**
-   * The `ItemListType` to show in the table
-   */
-  itemListType: y.ItemListType,
-  /**
-   * List of header labels and values for table columns
-   *
-   * Set value to the *field name* it should be extracted from
-   * or a *function* which will get itemType as argument
-   *
-   * Defaults to empty list
-   */
-  rows: e.arrayOf(e.shape({
-    label: e.string,
-    value: e.oneOfType([e.node, e.func])
-  })),
-  /**
-   * Set size of table
-   */
-  size: e.oneOf(["medium", "small"]),
-  /**
-   * Variant/shapes for the Avatar
-   */
-  avatarVariant: e.oneOf(["circular", "rounded", "square"]),
-  /**
-   * Set the header to stick at top when scrolled
-   */
-  stickyHeader: e.bool,
-  /**
-   * A list of string ids for which items are checked.
-   */
-  checked: e.arrayOf(y.ItemType),
-  /**
-   * Set if table row avatar should be shown
-   */
-  showAvatar: e.bool,
-  /**
-   * Show skeleton table items as loading state
-   */
-  isLoading: e.bool,
-  /**
-   * Amount of table items to show when loading
-   */
-  amountLoading: e.number,
-  // Callbacks
-  /**
-   * A function that handles a checkbox being clicked.
-   */
-  onCheck: e.func,
-  /**
-   * A function that handles an item being clicked.
-   */
-  onRowClick: e.func,
-  // Slots
-  /**
-   * Shown when the table is empty
-   */
-  emptySlot: e.oneOfType([e.elementType, e.node]),
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    TableHead: e.elementType,
-    TableBody: e.elementType,
-    TableRow: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    tableHead: e.instanceOf(Object),
-    tableBody: e.instanceOf(Object),
-    tableRow: e.instanceOf(Object)
-  })
 };
-O.defaultProps = {
+_.defaultProps = {
   itemListType: void 0,
   rows: [],
   size: "medium",
@@ -197,5 +112,5 @@ O.defaultProps = {
   componentsProps: void 0
 };
 export {
-  O as default
+  _ as default
 };

package/dist/es/item/ItemTable/components/ItemTableHead.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { TableHeadProps as MuiTableHeadProps } from '@mui/material';
+export interface ItemTableHeadProps extends MuiTableHeadProps {
+    rows?: {
+        label?: string | JSX.Element;
+    }[];
+    isLoading?: boolean;
+    checked?: boolean;
+    showAvatar?: boolean;
+    indeterminate?: boolean;
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        value: boolean;
+    }) => void;
+}
+declare const ItemTableHead: React.FC<ItemTableHeadProps>;
+export default ItemTableHead;

package/dist/es/item/ItemTable/components/ItemTableHead.js

@@ -1,35 +1,34 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import n from "@mui/material/Checkbox";
-import x from "@mui/material/Skeleton";
-import i from "@mui/material/TableCell";
-import f from "@mui/material/TableHead";
-import b from "@mui/material/TableRow";
-function w({
-  rows: m,
-  isLoading: c,
-  checked: d,
-  showAvatar: h,
-  indeterminate: t,
+import f from "@mui/material/Checkbox";
+import n from "@mui/material/Skeleton";
+import t from "@mui/material/TableCell";
+import x from "@mui/material/TableHead";
+import s from "@mui/material/TableRow";
+const g = ({
+  rows: d,
+  isLoading: m,
+  checked: p,
+  showAvatar: c,
+  indeterminate: i,
   onCheck: a,
-  ...p
-}) {
-  return /* @__PURE__ */ r(f, { ...p, children: /* @__PURE__ */ l(b, { children: [
-    a && /* @__PURE__ */ r(i, { padding: "checkbox", children: c ? /* @__PURE__ */ r(x, { sx: {
-      width: "18px",
-      height: "36px",
-      margin: "auto"
-    } }) : /* @__PURE__ */ r(n, { checked: d || t, indeterminate: t, onChange: (o) => {
-      var e;
-      return a(o, {
-        value: (e = o == null ? void 0 : o.target) == null ? void 0 : e.checked
-      });
-    } }) }),
-    h && /* @__PURE__ */ r(i, { padding: "checkbox" }),
-    m.map(({
-      label: o
-    }, e) => /* @__PURE__ */ r(i, { children: o }, o || e))
-  ] }) });
-}
+  ...h
+}) => /* @__PURE__ */ r(x, { ...h, children: /* @__PURE__ */ l(s, { children: [
+  a && /* @__PURE__ */ r(t, { padding: "checkbox", children: m ? /* @__PURE__ */ r(n, { sx: {
+    width: "18px",
+    height: "36px",
+    margin: "auto"
+  } }) : /* @__PURE__ */ r(f, { checked: p || i, indeterminate: i, onChange: (o) => {
+    var e;
+    return a(o, {
+      value: (e = o == null ? void 0 : o.target) == null ? void 0 : e.checked
+    });
+  } }) }),
+  c && /* @__PURE__ */ r(t, { padding: "checkbox" }),
+  d.map(({
+    label: o
+  }, e) => /* @__PURE__ */ r(t, { children: o }, typeof o == "string" ? o : e))
+] }) });
+g.defaultProps = {};
 export {
-  w as default
+  g as default
 };

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

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

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

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

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

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import { TableRow as MuiTableRow, TableCell as MuiTableCell, Checkbox as MuiCheckbox } from '@mui/material';
+import type { ItemType } from '@vidispine/types';
+import { WithOverrideProps } from '../../_types';
+import VdtEntityTableCellAvatar from '../../entity/EntityTableRow/components/EntityTableCellAvatar';
+import VdtEntityTableCellCheckbox from '../../entity/EntityTableRow/components/EntityTableCellCheckbox';
+declare const StyledMuiTableRow: typeof MuiTableRow;
+declare const defaultComponents: {
+    Root: typeof StyledMuiTableRow;
+    TableCell: typeof MuiTableCell;
+    TableCellAvatar: typeof VdtEntityTableCellAvatar;
+    TableCellCheckbox: typeof VdtEntityTableCellCheckbox;
+    Checkbox: typeof MuiCheckbox;
+};
+export interface ItemTableRowProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The item to show as table row
+     */
+    itemType?: ItemType;
+    /**
+     * A list of what item content to display in the table rows
+     *
+     * `defaultValue` can be added to show what to display if value is empty
+     */
+    rows?: {
+        value?: string | JSX.Element | (({ itemType }: {
+            itemType: ItemType;
+        }) => string | JSX.Element);
+        defaultValue?: string | JSX.Element;
+    }[];
+    /**
+     * Add a default value for all row values that are empty
+     */
+    defaultValue?: string;
+    /**
+     * Set if avatar should be shown on row
+     */
+    showAvatar?: boolean;
+    /**
+     * Whether the checkbox is checked or not
+     */
+    checked?: boolean;
+    /**
+     * Variant/shapes for the Avatar
+     */
+    avatarVariant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Show skeleton table item as loading state
+     */
+    isLoading?: boolean;
+    /**
+     * A function that handles the item being clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLTableRowElement>, payload: {
+        itemType: ItemType;
+    }) => void;
+    /**
+     * A function that handles the checkbox being clicked
+     */
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        value: boolean;
+        itemType: ItemType;
+    }) => void;
+}
+declare const ItemTableRow: React.FC<ItemTableRowProps>;
+export default ItemTableRow;